Separate different data in a response in JavaScript

Question

I have to get the values of the following response.

var response =  { "data": [

    {
      "value": "Network problem",
      "text": "Network problem",
      "areas": [
        {
          "value": "Congestion",
          "text": "Congestion",
          "sub_areas": [
            {
              "value": "Congestion_1",
              "text": "Congestion_1",
              "id":"1"
            },
            {
              "value": "Call D",
              "text": "Call D",
              "id":"2"
            }]
        },
        {
          "value": "Drop",
          "text": "Drop",
          "sub_areas": [
            {
              "value": "Drop_1",
              "text": "Drop_1",
              "id":"3"
            }]
        }
      ]};

If I have the value "Network problem", then I have to retrieve its areas(ex: areas = ["Congestion","Drop"]). Then I have to rerieve the sub areas using area value. If area value is "congestion", then sub_areas =["congestion_1", "Call D"]). How can I do it

you have to `flatten` this json object and then you can get whatever `value` you want. — Venkata Dorisala, Jul 07 '16 at 09:28
http://stackoverflow.com/questions/6890969/how-to-navigate-in-nested-json — Venkata Dorisala, Jul 07 '16 at 09:51
http://stackoverflow.com/questions/9463233/how-to-access-nested-json-data — Venkata Dorisala, Jul 07 '16 at 09:52
you can use `underscore` library to flatten a json object and get whatever values you want. http://stackoverflow.com/questions/8786417/how-to-use-underscore-js-to-produce-a-flatten-result — Venkata Dorisala, Jul 07 '16 at 09:53

score 1 · Answer 1 · answered Jul 07 '16 at 10:28

As suggested by Venky, using a library such as underscore is probably the best way to go.

If you're curious about a native JS solution, I will present one below.

Because your structure does not have many levels of imbrication, you can consider using a simple approach such as:

var node, root = {};

response.data.forEach(function(data) {
  node = root[data.value] = {};

  data.areas.forEach(function(area) {
    node[area.value] = [];

    area.sub_areas.forEach(function(subArea) {
      node[area.value].push(subArea.value);
    });
  });
});

Example output #1: list of 'data' values:

console.log(Object.keys(root));
["Network problem"]

Example output #2: list of areas for 'Network problem':

console.log(Object.keys(root['Network problem']));
["Congestion", "Drop"]

Example output #3: list of sub-areas for 'Network problem' / 'Congestion':

console.log(root['Network problem']['Congestion']);
["Congestion_1", "Call D"]

Note that the root node and its immediate children are objects, while the leaf nodes are arrays. Hence the different syntax for the last example.

Appendix

Below is the response object I used, with fixed formatting.

var response = {
  "data": [
    {
      "value": "Network problem",
      "text": "Network problem",
      "areas": [
        {
          "value": "Congestion",
          "text": "Congestion",
          "sub_areas": [
            {
              "value": "Congestion_1",
              "text": "Congestion_1",
              "id":"1"
            },
            {
              "value": "Call D",
              "text": "Call D",
              "id":"2"
            }
          ]
        },
        {
          "value": "Drop",
          "text": "Drop",
          "sub_areas": [
            {
              "value": "Drop_1",
              "text": "Drop_1",
              "id":"3"
            }
          ]
        }
      ]
    }
  ]
};

Separate different data in a response in JavaScript

1 Answers1