[英]How to map an array of arrays of arrays with objects in react
I have an array that contains multiple arrays which contain arrays which hold objects.我有一个包含多个 arrays 的数组,其中包含包含对象的 arrays。 I know right.我知道,对吧。 Sounds confusing.听起来很混乱。 It looks like this看起来像这样
Each Internal Array has two arrays, one in the 0 index and the other in the first index.每个内部数组有两个 arrays,一个在 0 索引,另一个在第一个索引。 These in turn also contain objects.这些反过来也包含对象。 Now my problem is how can I map from the top arrays to get to the lowests object to be able to do something like {array.name} in react.现在我的问题是我怎样才能从顶部 arrays 到最低点 object 能够做类似 {array.name} 的事情。 This does not work.这不起作用。 Nothing gets rendered onto the page页面上没有呈现任何内容
This is how the array looks like.这就是数组的样子。 I removed the other two internal arrays to make it look less messy.我删除了另外两个内部 arrays 以使其看起来不那么凌乱。
const data = [ [ [ {name: "Michael Norman", house: "9", class: "3B2"} ], [ {name: "Ronald Eyeson", house: "9", class: "3D3"}, {name: "Kingsley Buadi", house: "9", class: "3N"}, {name: "Lommo", house: "9", class: "3H"} ] ] ] console.log(data)
Try to run this code:尝试运行此代码:
const data = [ [ [ {name: "Michael Norman", house: "9", class: "3B2"} ], [ {name: "Ronald Eyeson", house: "9", class: "3D3"}, {name: "Kingsley Buadi", house: "9", class: "3N"}, {name: "Lommo", house: "9", class: "3H"} ] ], [ [ {name: "Michael Norman1", house: "9", class: "3B2"} ], [ {name: "Ronald Eyeson1", house: "9", class: "3D3"}, {name: "Kingsley Buadi1", house: "9", class: "3N"}, {name: "Lommo1", house: "9", class: "3H"} ] ] ];
<div> {Object.keys(data).map((key) => { return( <div key={key}> {data[key].map((dataItem) => { return( <div> {Object.keys(dataItem).map((innerDataItem) => { return ( <h1>{dataItem[innerDataItem].name} </h1> ); }) } </div> ) })} </div> ) })} </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.