Question

我的脚本有问题。

我有这样的JSON数据：

[{
     "Group": "General"
     "Properties": [{
          "name" : "blabla"
           "number" : 12
         }]
        }]

我想知道如何使用.map（）显示“名称”和“数字”，我有这个脚本：

 data.map((n) => {
        return <div> 
            <Grid item xs={12}>
                 <div style={{padding:20}}>
                    <div style={{backgroundColor:colors.main, fontSize: 16, color:'#FFF', padding: 5}}>
                    <h5 >{n.group}</h5></div>
</Grid>}

我正在尝试n.properties.name，而bla却不起作用...

n.group可以正常工作，但是我不知道如何在第一个数组中显示另一个数组。

非常感谢。

Answer 1

尝试一下

render() {
  const data = [{
    "Group": "General",
    "Properties": [{
      "name" : "blabla",
      "number" : 12
    }]
  }];

  const items = data.map((n) => {
    var props = n.Properties.map((props, index) => <div key={index}>{props.name} {props.number}</div>);

    return (
      <Grid item xs={12}>
        <div style={{padding:20}}>
          <div style={{ backgroundColor: colors.main, fontSize: 16, color:'#fff', padding: 5 }}>
            <h5>{n.Group}</h5>
            <div>{props}</div>
          </div>
        </div>
      </Grid>
    )
  });

  return <div>{items}</div>;
}

。地图（）;不显示完整数据

1 个答案: