在 Snack 中使用 JSON 格式的数据

第 6 步 - 检查结果。

示例中使用的 JSON 文件：文件名 – products.json

示例

{
   "products": [
      {
         "id": 68,
         "title": "School shoes",
         "price": 122,
         "quantity": 3,
         "total": 160,
         "discount%": 50,
         "discountedRate": 80
      },
      {
         "id": 82,
         "title": "Washing Gloves",
         "price": 50,
         "quantity": 2,
         "total": 60,
         "discount%": 10,
         "discountedRate": 45
      },
      {
         "id": 28,
         "title": "Moisturizer 100ml",
         "price": 45,
         "quantity": 2,
         "total": 90,
         "discount%": 13.1,
         "discountedRate": 70
      },
      {
         "id": 92,
         "title": "Leather Belt",
         "price": 900,
         "quantity": 1,
         "total": 950,
         "discount%": 19.77,
         "discountedRate": 766
      },
      {
         "id": 49,
         "title": "Woollen Shawl",
         "price": 800,
         "quantity": 2,
         "total": 1300,
         "discount%": 20,
         "discountedRate": 994
      }
   ]
}

示例 1：读取 JSON 数据并将其显示为表格。

项目中用到的重要文件是

• App.js

App.js：这是该项目的主要 JavaScript 文件。

示例

import productData from './products.json'

import {Component} from "react";
import {View} from "react-native";

export default class JSONEXAMPLE extends Component {
   render(){
      return (
         
         
Products Ordered

         
               {productData.products.map(products => {
               const { id, title, price, quantity } = products
               return (
               
               )
               })}
            

            

               

                  
ID
                  
Title
                  
Price
                  
Quantity
               
            
            

                  
{id}
                  
{title}
                  
{price}
                  
{quantity}
               
         
         
      )
   }
}

查看结果

结果可以在线查看。当用户键入代码时，默认情况下会选择 Web 视图，并且结果会立即显示。

JSON 数据在 Snack 的 Web 视图中显示为表格

Algorithm-2

步骤 1 − 从“react-native”导入视图。还可以从 json 文件导入 JSON 数据。此处，例如使用 products.json

第 2 步 - 制作 App.js 并编写代码。

华友协同办公自动化OA系统

华友协同办公管理系统(华友OA)，基于微软最新的.net 2.0平台和SQL Server数据库，集成强大的Ajax技术，采用多层分布式架构，实现统一办公平台，功能强大、价格便宜，是适用于企事业单位的通用型网络协同办公系统。 系统秉承协同办公的思想，集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、

下载

第 3 步 - 使用 id 作为键，从 json 文件中获取所有产品，并以表格形式显示产品信息。

第 4 步 - 使用参数数据、文件名和文件类型编写函数 downldFl()。使用 Blob() 指定文件类型，并使用 window.URL.createObjectURL(blob) 下载文件。

第 5 步 − header 用 ',' 连接，然后连接 json 内容，用“

”分隔。

第 6 步 span> − 单击下载 CSV 并检查下载的文件及其结果。

示例 2：将 JSON 数据转换为 CSV 并下载文件。

项目中用到的重要文件是

• App.js

App.js：这是该项目的主要 JavaScript 文件。

示例

import productData from './products.json'
import {View} from "react-native";

const downldFl = ({ data, fl_name, fl_type }) => {
   const blobb = new Blob([data], { type: fl_type })
   const lnk = document.createElement('a');
   lnk.download = fl_name;
   lnk.href = window.URL.createObjectURL(blobb);
   lnk.click();
   URL.revokeObjectURL(lnk.href);
   lnk.remove();
}

const downloadCSVfile = e => {
   e.preventDefault()

   let headers = ['Id,Title,Price,Quantity']

   let productsCsv = productData.products.reduce((str1, product) => {
   const { id, title, price, quantity } = product
   str1.push([id,title, price, quantity].join(','))
   return str1
   }, [])

   downldFl({
         data: [...headers, ...productsCsv].join(''),
         fl_name: 'products.csv',
         fl_type: 'text/csv',
      }
   )
}

export default function JSONEXAMPLETWO() {
   return (
      
         
 Download JSON as CSV

         
               {productData.products.map(products => {
                  const { id, title, price, quantity } = products
                  return (
                     
                  )
               }
               )
               }
            

            

               

                  
ID
                  
Title
                  
Price
                  
Quantity
               
            
            

                        
{id}
                        
{title}
                        
{price}
                        
{quantity}
                     
         

         
            Download CSV
         
      
   )
}

查看结果

结果可以在线查看。当用户单击下载按钮时，文件将被下载并立即显示结果。

按下载 CSV 按钮即可下载文件。

显示下载的由 JSON 制成的 CSV 文件的内容。

本文通过两个不同的示例，给出了在 Expo Snack 应用中使用 JSON 的方法。首先给出读取 json 文件并以表格形式显示其内容的方法。然后给出了将所选 JSON 数据保存为 CSV 格式并下载该文件的方法。