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.

Solution 1

in your code this.props.json is not an array, it's an array-like object and map is an array function. what your doing to solve this, is converting that array-like object into an array, with .slice()

a more elegant way to do this:

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

Solution 2

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

Solution 3

let jsonMap = JSON.stringify([...map.entries()])
let myMap = new Map(JSON.parse(jsonMap));

Solution 4

You can do it very easily as @Gary mentioned in his answer:

From Map to JSON (string keys):

const personsJson = `{"1":{"firstName":"Jan","lastName":"Kowalski"},"2":{"firstName":"Justyna","lastName":"Kowalczyk"}}`;
const personsObject = JSON.parse(personsJson);
const personsMap = new Map(Object.entries(personsObject));
for (const key of personsMap.keys()) {
    console.log(typeof key)
}

But there is one issue about which you have to be careful. Key of the map created in that way will always be a STRING. It will happen, because KEY of JSON object is always a STRING. So if your Map keys should be numbers then first you have parse keys of your object entries.

• From JSON to Map (number keys)::

const personsJson = `{"1":{"firstName":"Jan","lastName":"Kowalski"},"2":{"firstName":"Justyna","lastName":"Kowalczyk"}}`;
const personsObject = JSON.parse(personsJson);
const personObjectEntries = Object.entries(personsObject);
const personObjectEntriesNumberKeys = personObjectEntries.map(person => {
    person[0] = parseInt(person[0]);
    return person;
});
const personsMap = new Map(personObjectEntriesNumberKeys);
for (const key of personsMap.keys()) {
    console.log(typeof key)
}

There is person[0] because under 0 index there is the key of the object

View more solutions

Comments

[Gromski]

What exactly is this.props.json…? How does it get created? { ... }, { ... } is neither valid JSON nor Javascript.

[Mateusz Woźniak]

Instead of using Array.prototype.slice.call(this.props.json) you can use Array(this.props.json), but anyway it looks like it's something wrong with your application. Is that complete output from your API?

[zappee]

updated. now it looks better

[Mateusz Woźniak]

Now your JSON response is valid, I can post solution, but the questions is holded.

[Mateusz Woźniak]

Try to use JSON.parse(response) and you will end up with array. That's the correct way.

[zappee]

please check my updated post

[Mateusz Woźniak]

Check this snippet jsfiddle.net/16spzhL5

[SherylHohman]

Please add an explanation, highlighting parts of your answer that addresses OP's issue, and why/how. Code only answers are generally frowned upon on SO . Adding details adds to long term value, and helps future visitors learn, so they can apply this knowledge to their own coding issues. Also, it improves quality of the answer, and hence SO as well. Higher quality answers are upvoted more often, as more users find them of greater use as a resource to refer back to. Consider editing to provide additional info.

[Shane Kenyon]

It makes no sense to serialize and then immediately deserialize an object.

[bash0r]

@ShaneK it's a pretty good unit test whenever you are dealing with parsers and (pretty) printers of any kind.