javascript - 。 map ();不显示完整数据

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>;
}