如何在 React js 中使用 map 函数获取嵌套循环值？

Question

How to get TC id value and using map function in react js

Here's my code json

[
    {
        "Results": {
            "TC": [
                {
                   "id": 1
                 },
                 {
                   "id": 2
                 },
                 {
                   "id": 3
                 }
            ]
        }
   }
]

Here's my React Code:

import PostData from './result_log.json';

{PostData.map((PostDetail, index) => {
    return <h1>{PostDetail.Results.TC.length}</h1>
})}

Answer 1

Here's how to create a h1 balise tag for each id inside your TC array in your json code.

import PostData from './result_log.json';

const getAllIds = () => {
  const idsArray = PostData.map(item => {
    return item.Results.TC.map(it => <h1>{it.id}</h1>)
  }.reduce((acc, curr) => [...acc, ...curr], [])

  return idsArray
}

getAllIds()

I have flattened the first map result so you have only one array containing every id key value of your json code.

https://jsfiddle.net/v5r8oyds/