[英]How do i iterate over JSON data in React
我正在尝试做的事情:在反应中获取数据进行一些练习,并且我使用了 covid19 api 以及案例数量等...
这是代码:
import { useState, useEffect } from "react";
import axios from "axios";
const Home = () => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios("api_here",);
setData([result.data]);
};
fetchData();
}, [])
console.log(data);//i have a screen-shot below for the output
return (
<ul>
{data.map((items, index) => (
<li key={index}>{JSON.stringify(items)}</li>
//<li key={index}>{items}</li> This doesn't work
))}
</ul>
)} export default Home;
并且 data.map 仅在 json[0] 上进行迭代,但我需要从 json 遍历每个国家/地区。
我尝试做类似的事情:
setData([result.data][0])
//or
data[0].map......
但不起作用
您的数据是键 -> 值的 map 以便遍历所有国家/地区(键)。
<ul>
{Object.keys(data).map((key, index) => (
<li key={index}>{JSON.stringify(data[key])}</li>
))}
</ul>
您可以将对象的 Object 转换为对象数组。
import { useState, useEffect } from "react";
import axios from "axios";
const Home = () => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios("api_here",);
let res = [result.data];
res = Object.entries(res[0]).map((e) => ( { [e[0]]: e[1] } ));
setData(res);
};
fetchData();
}, [])
console.log(data);
return (
<ul>
{data.map((items, index) => (
<li key={index}>{JSON.stringify(items)}</li>
//<li key={index}>{items}</li> This doesn't work
))}
</ul>
)} export default Home;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.