convert json to array/map

Question

My rest API returns with the following json content:

[{
    "key": "apple",
    "value": "green"
},
{
    "key": "banana",
    "value": "yellow"
}]

I am iterating through the list with this code:

this.props.json.map(row => {
    return <RowRender key={id.row} row={row} />
}

It works because the content is displayed but on the web browser's console I can see an error:

map is not a function

I googled for it and I changed my code to this:

Array.prototype.slice.call(this.props.json).map(row => {
    return <RowRender key={id.row} row={row} />
}

It works without any error but seems so complicated. Is that the correct way to do this job?

---

UPDATE

What I tried:

• JSON.parse(...).map: Unexpected end of JSON input
• JSON.parse(JSON.stringify(...)).map(...): data is displayed but I get an error: JSON.parse(...).map is not a function
• Array(...).map: Each child in array or iterator should have a unique key.

Answer 1

Use Object.entries() to get both the key and values, then give that to Map() to allow you to select your values by key.

let myMap = new Map(Object.entries(this.props.json));