在 Snack 中使用 JSON 格式的数据

使用 Snack Expo 创建的应用程序有很多方法可以使用数据。有时数据存储为 JSON 格式，即 JavaScript 对象表示法。在这种格式下，数据可以轻松地以键值对的形式存储，也可以转换为 CSV 文件。本文使用 Snack 上的 javascript，指定了使用 JSON 数据的方法。在示例 1 中，给出了读取这些数据并将其显示为表格的方法。在第二个示例中，展示了将 JSON 数据保存为 CSV 文件并下载它的方法。

算法 1

步骤 1 − 从 'react-native' 导入 View。还从 json 文件导入 JSON 数据。这里，例如使用 products.json

步骤 2 − 创建 App.js 并编写代码。

步骤 3 − 使用 id 作为键，并从 json 文件中获取所有产品。

步骤 4 − 首先显示标题，然后使用 map 函数获取每个产品项。选择要显示的列。

步骤 5 − 使用 <table>、<thead>、<tr> 和 <th> 标签以表格形式显示数据。

步骤 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
      }
   ]
}

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例 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 (
         <View style={{padding: 10}}>
         <h2>Products Ordered</h2>

         <table>
            <thead>
               <tr>
                  <th>ID</th>
                  <th>Title</th>
                  <th>Price</th>
                  <th>Quantity</th>
               </tr>
            </thead>
            <tbody>
               {productData.products.map(products => {
               const { id, title, price, quantity } = products
               return (
               <tr key={id}>
                  <td>{id}</td>
                  <td>{title}</td>
                  <td>{price}</td>
                  <td>{quantity}</td>
               </tr>
               )
               })}
            </tbody>
         </table>
         </View>
      )
   }
}

查看结果

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

Snack 中 Web 视图中以表格形式显示的 JSON 数据

算法 2

步骤 1 − 从 'react-native' 导入 View。还从 json 文件导入 JSON 数据。这里，例如使用 products.json

步骤 2 − 创建 App.js 并编写代码。

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

步骤 4 − 编写一个带有参数 data、filename 和 filetype 的函数 downldFl()。使用 Blob() 指定文件类型，并使用 window.URL.createObjectURL(blob) 下载文件。

步骤 5 − 将标题与 ‘,’ 连接，然后将 json 内容用 “
” 分隔连接。

步骤 6 − 点击下载 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 (
      <View style={{padding: 10}}>
         <h2> Download JSON as CSV</h2>

         <table className='productsTable'>
            <thead>
               <tr>
                  <th>ID</th>
                  <th>Title</th>
                  <th>Price</th>
                  <th>Quantity</th>
               </tr>
            </thead>
            <tbody>
               {productData.products.map(products => {
                  const { id, title, price, quantity } = products
                  return (
                     <tr key={id}>
                        <td>{id}</td>
                        <td>{title}</td>
                        <td>{price}</td>
                        <td>{quantity}</td>
                     </tr>
                  )
               }
               )
               }
            </tbody>
         </table>

         <button type='button' onClick={downloadCSVfile}>
            Download CSV
         </button>
      </View>
   )
}

查看结果

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

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

显示从 JSON 创建的已下载 CSV 文件的内容。

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

更新于： 2023 年 5 月 2 日

592 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始
广告