如何显示 API 列表中的嵌套项

Question

我有一个这种格式的数据

{
  "id": 1,
  "brands": [], // "n" number of items inside this brands 
  "title": "Phone",
  "image": "/image.png",
  "timestamp": "2022-01-30T23:15:45.355411+05:30",
  "updated": "2022-01-30T23:18:05.053914+05:30"
}

品牌里面的数据是这样的

brands": [{
  "title": "Phone",
  "id": 1,
  "products": [{
    "id": 1,
    "name": "iPhone 13",
    "image": "/image.png",
    "timestamp": "2022-01-30T23:22:11.259452+05:30",
    "updated": "2022-01-30T23:22:11.259452+05:30",
    "variant": "256 Storage",
  }]
}]

这样做我可以显示标题 ID 等类别字段

{ categories.map((items) => (
  <Col key={items.id} sm={12} md={8} lg={4} xl={3} >
    <div>{items.title}</div>
  </Col>
)) }

但是onClick我想向该类别显示嵌套品牌，作为 JS 和 React 的新手，我不知道访问嵌套项目的正确语法。

Answer 1

我认为这样的方法可行。

{categories.map(category => (
    <Col key={category.id} sm={12} md={8} lg={4} xl={3} >
        <div>{category.title}</div>
        <h2>Brands</h2>
        <div>
            {category.brands.map(brand => (
                <div>
                    <div>{brand.title}</div>
                    <ul>
                        brand.products.map(product => (
                            <li>
                                <b>{product.name}</b>
                                <b>{product.timestamp}</b>
                                <img src={product.image}/>
                                <span>{product.id}</span>
                            </li>
                        ))
                    </ul>
                </div>
            ))}
        </div>
    </Col>
))}

如何显示 API 列表中的嵌套项

How to show nested items from a API list

javascript

arrays

nested

reactjs