How to get nested loop value using map function in React js?

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

@Hurobaki I was tired but it's not working for me. can you provide me any jsfiddle link for this example — Gurumoorthy Dhanabal
– Gurumoorthy Dhanabal, Commented Jan 6, 2020 at 1:24

Hurobaki · Accepted Answer · 2020-01-06 10:39:18Z

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/

edited Jan 6, 2020 at 10:39

answered Jan 5, 2020 at 15:34

Hurobaki

4,1886 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get nested loop value using map function in React js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related