parse nested JSON Data

Question

I'm new to Javascript, ES6 , and i have hit the wall with this problem

This is the JSON that i'm getting from a webservice

{
  "products": [
    {
      "id": 2,
      "id_default_image": "21",
      "price": "35.900000",
      "name": [
        {
          "id": "1",
          "value": "item 1"
        },
        {
          "id": "2",
          "value": "item 1 alternate name"
        }
      ]
    },
    {
      "id": 4,
      "id_default_image": "4",
      "price": "29.000000",
      "name": [
        {
          "id": "1",
          "value": "item 2"
        },
        {
          "id": "2",
          "value": "item 2 alternate name"
        }
      ]
    }
  ]
}

The name property in the above JSON is an array and i need only the value of the first element. The desired output would be like below

{
  "products": [
    {
      "id": 2,
      "id_default_image": "21",
      "price": "35.900000",
      "name": "item 1"
    },
    {
      "id": 4,
      "id_default_image": "4",
      "price": "29.000000",
      "name": "item 2"
    }
  ]
}

I'm working on a react-native project. What would be the easiest way to achieve this? Any help would be greatly appreciated. Thanks.

Welcome to SO! I'd encourage you to read [how to ask a good question](https://stackoverflow.com/help/how-to-ask) and edit your question. Most likely the reason behind the downvotes is that you've not provided any attempt to solve your problem yourself. Show us your code and explain any problems or errors you are having. — chazsolo, Oct 17 '18 at 20:00
Please [edit](https://stackoverflow.com/posts/52862591/edit) your question and add what you have already tried. — Ruzihm, Oct 17 '18 at 20:00
Welcome to SO. It is not clear how will you use this data mutation. As you can see, some of the provided answers already mutating the data and if you will use this data in your state I discourage you from using those suggestions. This is why people try to direct you to ask your question a little bit better. I also removed the `reactjs` tag from the question since it is not related to `reactjs` in the current state. So, if you edit your question and give some details about it, and if it is related to `react` you/we can add this tag again. — devserkan, Oct 17 '18 at 20:14

score 1 · Answer 1 · answered Oct 17 '18 at 20:18

Similar to Ele's answer but if you don't want to change the original object. You can use map to iterate over the product objects and return a new products array:

const data = {"products":[{"id":2,"id_default_image":"21","price":"35.900000","name":[{"id":"1","value":"item 1"},{"id":"2","value":"item 1 alternate name"}]},{"id":4,"id_default_image":"4","price":"29.000000","name":[{"id":"1","value":"item 2"},{"id":"2","value":"item 2 alternate name"}]}]};

const products = data.products.map(obj => ({ ...obj, name: obj.name[0].value }));

console.log(products);

Also used: spread syntax

Ele · Answer 2 · 2018-10-17T20:00:02.483

0

Well, you can use the function forEach or a simple for-loop and assign the first value to the attribute name.

let obj = {  "products": [    {      "id": 2,      "id_default_image": "21",      "price": "35.900000",      "name": [        {          "id": "1",          "value": "item 1"        },        {          "id": "2",          "value": "item 1 alternate name"        }      ]    },    {      "id": 4,      "id_default_image": "4",      "price": "29.000000",      "name": [        {          "id": "1",          "value": "item 2"        },        {          "id": "2",          "value": "item 2 alternate name"        }      ]    }  ]}

obj.products.forEach(o => (o.name = o.name[0].value));

console.log(obj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Oct 17 '18 at 20:00

answered Oct 17 '18 at 19:55

Ele

33,468
7
37
75

May I ask why you reverted back the edit? If you want to keep `""` in the object properties I can understand it (though we don't need them here) but at least why didn't you keep the format? Your code is very ugly as the current shape. – devserkan Oct 17 '18 at 20:16
@devserkan I partially agree, however, here the purpose is the solution rather than the format. – Ele Oct 17 '18 at 20:23
Of course OP can see the solution easily here but someone already edited the code for a better format. Why the revert? Just a rhetorical question, I have the answer already... – devserkan Oct 17 '18 at 20:26
@devserkan too much lines. – Ele Oct 17 '18 at 20:27

score 0 · Answer 3 · edited Oct 17 '18 at 20:27

0

Try this

 const productsArray = products.map((product, index) => {
   const obj = {};
   obj["id"] = product["id"];
   obj["id_default_image"] = product["id_default_image"];
   obj["price"] = product["price"],
  obj["name"] = product.name[0].value;
  return obj;
});

 const obj = {};
 obj.products = productsArray;

 console.log(obj);//will print you the desired output you want

edited Oct 17 '18 at 20:27

devserkan

16,870
4
31
47

answered Oct 17 '18 at 20:00

Hemadri Dasari

32,666
37
119
162

1

Some missing parens there. `( product, index )` for the map arguments and one for the closing part of `products.map`. `});` – devserkan Oct 17 '18 at 20:09

parse nested JSON Data

3 Answers3