transforming json data into an array or map

Question

transforming json data into an array or map

Once my REST API responds, it provides the following JSON content:

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

Managing the data, I use the following code to iterate through the list:

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

While the content displays correctly, an error appears in the web browser console:

map is not a function

To address this, I searched online and altered my code as follows:

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

Although this resolves the error, the solution appears complicated. Is this the correct approach for this task?

UPDATE

My attempts so far:

Using JSON.parse(...).map: I encounter an "Unexpected end of JSON input" error
Using JSON.parse(JSON.stringify(...)).map(...): The data displays but I receive an error: "JSON.parse(...).map is not a function"
Using Array(...).map: I face the issue that each child in array or iterator should have a unique key.

javascript json ecmascript-6

Answer 1

Answer №1

To easily access both keys and values from an object, use Object.entries(). Then, you can pass this to Map() to retrieve values based on keys.

Create a new Map object by passing Object.entries(this.props.json) as shown below:
let myMap = new Map(Object.entries(this.props.json));

Answer 2

To easily access both keys and values from an object, use Object.entries(). Then, you can pass this to Map() to retrieve values based on keys.

Create a new Map object by passing Object.entries(this.props.json) as shown below:
let myMap = new Map(Object.entries(this.props.json));

Answer 3

Answer №2

When looking at your code, it appears that this.props.json is not technically an array, but rather an object that behaves like an array. The issue lies in trying to use a function like map, which is specifically for arrays. To fix this issue, you are correctly converting the array-like object into an actual array using .slice()

For a more elegant solution, you can use the following approach:

Array.from(this.props.json).map(item => <ItemComponent key={item.id} data={item} />)

Answer 4

When looking at your code, it appears that this.props.json is not technically an array, but rather an object that behaves like an array. The issue lies in trying to use a function like map, which is specifically for arrays. To fix this issue, you are correctly converting the array-like object into an actual array using .slice()

For a more elegant solution, you can use the following approach:

Array.from(this.props.json).map(item => <ItemComponent key={item.id} data={item} />)

Answer 5

Answer №3

You can easily achieve this as mentioned by @Gary in his response:

Moving from Map to JSON with 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)
}

However, it is important to note an issue that requires attention. When creating a map in this manner, the keys will always be STRING. This is because the key of a JSON object is always a STRING. If your map keys should be numbers, you will need to parse the keys of your object entries first.

Converting from JSON to Map with 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)
}

The use of person[0] is necessary because the key of the object is located at index 0

Answer 6

You can easily achieve this as mentioned by @Gary in his response:

Moving from Map to JSON with 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)
}

However, it is important to note an issue that requires attention. When creating a map in this manner, the keys will always be STRING. This is because the key of a JSON object is always a STRING. If your map keys should be numbers, you will need to parse the keys of your object entries first.

Converting from JSON to Map with 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)
}

The use of person[0] is necessary because the key of the object is located at index 0

Answer 7

Answer №4

const mapToArray = JSON.stringify([...userMap.entries()]);
const newUserMap = new Map(JSON.parse(mapToArray));

Answer 8

const mapToArray = JSON.stringify([...userMap.entries()]);
const newUserMap = new Map(JSON.parse(mapToArray));

Answer 9

Answer №5

Feel free to use this handy function for converting JSON into a Map of Maps:

This function is designed to work with JSON data structured like the example below:

{
   "data":{
      "1":{
         "color":"red",
         "size":"big"
      },
      "2":{
         "color":"red",
         "size":"big"
      },
      "3":{
         "color":"red",
         "size":"big"
      },
      "4":{
         "color":"red",
         "size":"big"
      },
      "5":{
         "color":"red",
         "size":"big"
      }
   }
}

function jsonToMap(jsonString)  {
    var jsonObject = JSON.parse(jsonString);
    var dataObject = jsonObject.data;
    var dataMap = new Map(Object.entries(dataObject));
    var resultMap = new Map();
    for (const key of dataMap.keys())  {
        console.log(key);
        var keyMap = new Map(Object.entries(dataMap.get(key)));
        resultMap.set(key, keyMap);
    }

    console.log("done!");
    return resultMap;
}

Answer 10

Feel free to use this handy function for converting JSON into a Map of Maps:

This function is designed to work with JSON data structured like the example below:

{
   "data":{
      "1":{
         "color":"red",
         "size":"big"
      },
      "2":{
         "color":"red",
         "size":"big"
      },
      "3":{
         "color":"red",
         "size":"big"
      },
      "4":{
         "color":"red",
         "size":"big"
      },
      "5":{
         "color":"red",
         "size":"big"
      }
   }
}

function jsonToMap(jsonString)  {
    var jsonObject = JSON.parse(jsonString);
    var dataObject = jsonObject.data;
    var dataMap = new Map(Object.entries(dataObject));
    var resultMap = new Map();
    for (const key of dataMap.keys())  {
        console.log(key);
        var keyMap = new Map(Object.entries(dataMap.get(key)));
        resultMap.set(key, keyMap);
    }

    console.log("done!");
    return resultMap;
}

transforming json data into an array or map

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Issue with the react-redux Provider

405 - Sorry, this method is not allowed for deletion

Utilize JQuery to extract data from JSON and populate form inputs

Move the cursor over the text to reveal an image

Unusual actions when making a $.ajax call using the PUT method

Reveal each element individually upon clicking the button

Enforce numerical input in input field by implementing a custom validator in Angular 2

What exactly is the concept of lazily installing a dependency?

What could be the reason behind the login button not triggering the console message display?

Place a list with scrolling and overflow features side by side

Having issues with NextJs app router and redux-toolkit not resetting to initial state after server-side rendering (SSR)

When using Ionic, clicking on a Google Maps marker to navigate to another page with NavController can sometimes result in the clicks on the new

Conversion of CSV data into JSON format parameter

Guide to Subscribing to a nested observable with mergeMap within a button's click event

Addressing the delay of "Rasterize Paint" on mobile devices while implementing css3 opacity transitions

The feature 'forEach' is not available for the 'void' type

What is the most effective way to output data using the response.write method in a Node.js program after retrieving it from a MySQL server?

Prevent further execution upon callback in an AJAX request by stopping the click event function

Ways to activate paging feature in the Extension JS Basic Grid

Leveraging the power of Google Closure Templates alongside the versatility of