通过 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 视图，并且结果会立即显示。
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 步 − 单击下载 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 格式并下载该文件的方法。
以上就是在 snack 中使用 json 格式的数据的详细内容。