[FIXED] How to run nested React map function?

Issue

I have a JSON I need to fetch data & display in UI but not able to do due to nested.

JSON data:

data =[
  {
        "First Row": {
            "info": 274.176,
        }
    },
    {
        "Second Row": {
            "info": 139.536,
        }
    }
]

My Code:

{data
                ? data.map((val, i) =>
                    val[i].map((val2) => {
                      <>
                        <div>{val2.info}</div>
                      </>;
                    })
                  )
                : ""}

Solution

Use Object.values() to get an array of all the values, then use [0] to get the first object where you can acces the info as desired:

data.map((val, i) => Object.values(val)[0].info)

[
  274.176,
  139.536
]

const data = [
    { "First Row": { "info": 274.176, } },
    { "Second Row": { "info": 139.536, } }
];

const r = data.map((val, i) => Object.values(val)[0].info);
console.log(r)

Answered By - 0stone0
Answer Checked By - - Katrina (ReactFix Volunteer)