首页 > web前端 > js教程 > 正文

在 Snack 中使用 JSON 格式的数据

WBOY
发布: 2023-08-28 08:17:01
转载
763人浏览过

通过 snack expo 制作的应用程序可以通过多种方式使用数据。有时数据存储为 json,即 javascript 对象表示法。在这种格式中,数据可以轻松存储为键值对,也可以转换为 csv 文件。在这篇文章中,在snack上使用javascript,指定了使用json数据的方法。在示例 1 中,给出了读取该数据并将其显示为表格的方法。在第二个示例中,显示了将 json 数据保存为 csv 文件并下载的方法。

算法-1

第 1 步 - 从“react-native”导入视图。还可以从 json 文件导入 JSON 数据。这里例如使用products.json

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

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

第 4 步 - 首先显示标题,然后使用映射函数获取每个产品项。选择要显示的列。

步骤 5 - 使用

、、 和
标签以表格形式显示数据。

第 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 (
         <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 中使用 JSON 格式的数据

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

Algorithm-2

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

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

第 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 (
      <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>
   )
}
登录后复制

查看结果

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

在 Snack 中使用 JSON 格式的数据

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

在 Snack 中使用 JSON 格式的数据

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

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

以上就是在 Snack 中使用 JSON 格式的数据的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:tutorialspoint网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号