Accessing json objects with jquery arrays

Question

I have JSON data in this format:

{
  "head": {
    "heading": ["header1", "header2", "header3"]
  },
  "body": {
    "elements": [{
        "header1": {
          "value": "value1"
        },
        "header2": {
          "value": "value2"
        }
        "header3": {
          "value": "value3"
        }
      },
      {
        "header1": {
          "value": "value1"
        },
        "header2": {
          "value": "value2"
        }
        "header3": {
          "value": "value3"
        }
      }
    ]
  }

I can't predict the number of values in headings. So, I initially parsed the values in headings and stored in an array. Later while printing the body elements. I wrote the following code

// data has the parsed json file
var heading = [];
data.head.heading.forEach(function(head) {
  heading.push(head);
});
data.body.elements.forEach( function(elem) {
  for (var head in the heading) {
    var header = heading[head];
    alert(elem.header.value); //not accessing value inside header
  }
});

On using values.header.value it needs to access value inside header1, header2 and header3 of each elem but it is returning an error

TypeError: elem.header is undefined

It is taking the value as the header instead of value inside the variable header. Is there any way to make it access the values inside the variable header? thanks in advance

element.header won't ever exist as they're named header1, 2, 3. You'll need to run trough Object.keys. — Phiter
– Phiter, Commented Apr 5, 2018 at 11:12
header consists of values of array heading. It actually consist of values header1, heaader2 and heaader3 for each turn — Sandesh Ghanta
– Sandesh Ghanta, Commented Apr 5, 2018 at 11:16
Because header contains the key value you can change from elem.header.value to elem[header].value. At the same time your foreach is: data.body.elements.forEach — gaetanoM
– gaetanoM, Commented Apr 5, 2018 at 11:18
@gaetanoM thanks for the reply. But I can't exactly understand what you said. Can you be more specific? thanks — Sandesh Ghanta
– Sandesh Ghanta, Commented Apr 5, 2018 at 11:21

Rory McCrossan · Accepted Answer · 2018-04-05 11:20:15Z

You need to access the object using bracket notation as the value of header needs to be used as the key, not the literal word 'header`, eg.

elem[header].value

Also, your first loop is entirely redundant, as you're just copying an array you already have access to. Try this:

data.body.elements.forEach(function(elem) {
  for (var head in data.head.heading) {
    var header = data.head.heading[head];
    console.log(elem[header].value);
  }
});

Finally, note that this can be made even more succinct by using another nested forEach() call to iterate data.head.heading:

var data = {
  "head": {
    "heading": ["header1", "header2", "header3"]
  },
  "body": {
    "elements": [{
      "header1": { "value": "value1" },
      "header2": { "value": "value2" },
      "header3": { "value": "value3" }
    },
    {
      "header1": { "value": "value1" },
      "header2": { "value": "value2" },
      "header3": { "value": "value3" }
    }]
  }
}

data.body.elements.forEach(function(elem) {
  data.head.heading.forEach(function(header) {
    console.log(elem[header].value);
  });
});

Collectives™ on Stack Overflow

Accessing json objects with jquery arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related