数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 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
}
]
}
示例 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 格式，然后下载该文件的方法。
592 次浏览
