我目前正在尝试在本机反应中迭代 json。JSON 有可变数量的返回,其格式非常奇怪,不幸的是我无法更改 JSON 的创建方式,因此我希望获得有关如何正确解析它的建议。
这是应该 fetch() json 并显示值的代码:
import React, { useState, useEffect } from "react";
import { ActivityIndicator, FlatList, SafeAreaView, StatusBar, StyleSheet, Text, View, TouchableOpacity } from "react-native";
const App = () => {
const [selectedId, setSelectedId] = useState(null);
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState({});
const [counter, setCounter] = useState(0);
const getJSON = async () => {
const response = await fetch('URL');
const json = await response.json();
setData(json.Items);
setCounter(json.Count);
setLoading(false);
}
useEffect(() =>{
getJSON();
}, []);
return (
<View style={{ flex: 1, padding: 24 }}>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ Items }, index) => id}
renderItem={({ item }) => (
<Text>{item.Items}</Text>
)}
/>
)}
</View>
);
};
这是 fetched() 的 JSON:
{
"Count": 1,
"Items": [{
"building": {
"S": "Wash"
},
"mac": {
"S": "FF:FF:FF:FF:FF:FF"
},
"name": {
"S": "test asset"
},
"asset_id": {
"S": "01"
},
"floor": {
"S": "1"
},
"room": {
"S": "102"
}
}],
"ScannedCount": 1
}
任何帮助,将不胜感激。我对解析 JSONS 还是很陌生
我建议将响应值预处理Items
为更可用的格式来呈现。您需要“解包”S
每个嵌套外部键的嵌套属性。然后,您可以item
更轻松地映射/访问元素属性。
例子:
const { Items } = {
Count: 1,
Items: [
{
building: { S: "Wash" },
mac: { S: "FF:FF:FF:FF:FF:FF" },
name: { S: "test asset" },
asset_id: { S: "01" },
floor: { S: "1" },
room: { S: "102" }
},
],
ScannedCount: 1
};
const data = Items.map((obj) =>
Object.entries(obj).reduce((items, item) => {
const [key, { S: value }] = item;
return {
...items,
[key]: value
};
}, {})
);
console.log(data);
代码:
function App() {
const [selectedId, setSelectedId] = useState(null);
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
const [counter, setCounter] = useState(0);
const getJSON = async () => {
const response = await fetch("URL");
const json = await response.json();
const { Count, Items } = json;
const data = Items.map((obj) =>
Object.entries(obj).reduce((items, item) => {
const [key, { S: value }] = item;
return {
...items,
[key]: value
};
}, {})
);
setData(data);
setCounter(Count);
setLoading(false);
};
useEffect(() => {
getJSON();
}, []);
return (
<div className="App">
{isLoading ? (
<h2>Loading...</h2>
) : (
<FlatList
data={data}
keyExtractor={({ asset_id }) => asset_id}
renderItem={({ item }) => (
<View key={item.asset_id}>
<Text>
Location: {item.building} {item.floor}-{item.room}
</Text>
<Text>Name: {item.name}</Text>
<Text>MAC: {item.mac}</Text>
<Text>Asset Id: {item.asset_id}</Text>
</View>
)}
/>
)}
</div>
);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句