[英]how to loop through a nested dictionary or json data in Reactjs
Using Reactjs
how do you create a function component
that loop through the json data
below and display location
content.使用
Reactjs
如何创建一个function component
,该组件循环遍历下面的json data
并显示location
内容。
I want the function to also be able to display something else like members
if needed.如果需要,我希望 function 也能够显示其他内容,例如
members
。
I am new to react and most examples online show it using class component (which i am not interested into)我是新手,大多数在线示例都使用 class 组件(我对此不感兴趣)
[{
"squadName": "Super hero squad",
"homeTown": "Metro City",
"formed": 2016,
"secretBase": "Super tower",
"active": true,
"members": [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": [
"Radiation resistance",
"Turning tiny",
"Radiation blast"
]
},
{
"authorization": "Black card",
"location": [
"Next",
"Previous",
"Here"
]
}
]
}]
You can map through data in a functional component the same way you would map through a class component.您可以通过 map 通过 class 组件来通过功能组件中的数据进行 map。 For this example, you could list only nested data:
对于此示例,您可以仅列出嵌套数据:
const List = () => { return ( <div> {data.map(item => (item.members || []).map(member => (member.location || []).map(item => (<div>{item}</div>)) ) )} </div> ); };
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
which would list only the nested "location" data for each member if that property exists.如果该属性存在,它将仅列出每个成员的嵌套“位置”数据。 Or you could map through data and display top-level properties and then also map through its nested properties:
或者您可以通过数据 map 并显示顶级属性,然后还可以通过其嵌套属性 map :
const List = () => { return ( <div> {data.map(item => ( ((item.members || []).map(member => ( <div> {member.name || ''} {member.location && member.location.map(loc => (<div>{loc}</div>))} </div> ))) ))} </div> ); };
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Of course that I cant make an entire project solution for you but the function that you wanted must have this kind of logic.当然,我不能为你做一个完整的项目解决方案,但你想要的 function 必须有这种逻辑。
const jsonData = [{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": [ "Radiation resistance", "Turning tiny", "Radiation blast" ] }, { "authorization": "Black card", "location": [ "Next", "Previous", "Here" ] } ] }] jsonData.forEach(item=>{ item.members.map((member)=>{ if(member.location&&member.location[0]){ //Do whatever, maybe you want to use return statement in there console.log(member.location) } else{ //do something else, or add more conditions console.log("There's no location in it") } }) })
you can put it in a variable and add your variable inside your jsx return statement or use it directly in middle of your function's return statement.你可以把它放在一个变量中,然后在你的 jsx return 语句中添加你的变量,或者直接在函数的 return 语句中间使用它。
Good luck.祝你好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.