从 Props 中检索数据数组

Question

I am trying to retrieve an array of data which is in a JSON format, and is passed to a React Component. If I use console.log(props), I can see data as follows: { props: {data: [[array]]}}.

The problem I have is that I am not able to drill down into the actual data. I have tried props.data.map and props.map, and both of theses return undefined.

The JSON format is as follows:

someData = {
             data: [
                     [
                       { 'id':'1',
                         'name': 'somename'
                        }
                     ]
                   ]
            }

Is there another object that I need to drill down to get to the data?

Answer 1

The problem here is that the Data is in JSON format and to retrieve and use the the data in JavaScript, you have to parse it into a JavaScript Object. You can simply do that using the JSON.parse() method to parse it into a object. Just pass the prop into this object before sending it and it will work as expected then.

data = JSON.parse(data); // if it was defined using let keyword

Then just pass it to the required component.
You can learn more about JSON.parse() from here

Answer 2

The object structure is layered differently than you were expecting. It is encapsulated within an additional object with another props property, and the inner array is wrapped in another array.
props.props.data[0].map

Answer 3

 let data = JSON.parse(someData) data.forEach(element => { element.map(item => { return item }) })

if you are exact know there is only one item in array then use somedata.data[0].item; but parse json first because json is strigfy when we recieve json