get JSON key value pair within json object array in javascript

Question

Here is my JSON

[  
   {  
      "var5":"item-company-1",
      "asd2":"item-company-1",
      "tie1":"0",
      "cxs1":"481.891px",
      "xcve2":"130.563px"
   },
   {  
      "var5":"item-company-2",
      "asd2":"item-company-2",
      "tie1":"0",
      "cxs1":"481.891px",
      "xcve2":"130.563px"
   },
   {  
      "var5":"item-company-3",
      "asd2":"item-company-3",
      "tie1":"0",
      "cxs1":"481.891px",
      "xcve2":"130.563px"
   }
]

How do I read the key and the value? Keep in mind I might not know the Key. I tried using...

var data = JSON.parse(json);

Object.keys(data).forEach(function(prop) {
  // `prop` is the property name
  // `data[prop]` is the property value
     console.log(prop + " = " + data[prop]);
});

However it just outputs

0 = [object Object]
1 = [object Object]
2 = [object Object]

EDIT FOR CLARIFICATION

in PHP I get the following output which is what I'm trying to achieve from javascript

0:
var5 => item-company-1
asd2 => item-company-1
tie1 => 0
cxs1 => 481.891px
xcve2 => 130.563px
1:
var5 => item-company-2
asd2 => item-company-2
tie1 => 0
cxs1 => 481.891px
xcve2 => 130.563px
2:
var5 => item-company-3
asd2 => item-company-3
tie1 => 0
cxs1 => 481.891px
xcve2 => 130.563px

@zerkms that just returns the objects not the keys inside each object — eqiz
– eqiz, Commented Aug 30, 2016 at 2:07
That is correct. I just shown you how to deal with console.log when you want to output an object. — zerkms
– zerkms, Commented Aug 30, 2016 at 2:07
It automatically puts spaces in between items when giving multiple parameters to console.log, so it would be console.log(prop, "=", data[prop]) — castletheperson
– castletheperson, Commented Aug 30, 2016 at 2:50

Ying Yi · Accepted Answer · 2016-08-30 02:06:42Z

3

You can try this:

var data = [  
   {  
      "var5":"item-company-1",
      "asd2":"item-company-1",
      "tie1":"0",
      "cxs1":"481.891px",
      "xcve2":"130.563px"
   },
   {  
      "var5":"item-company-2",
      "asd2":"item-company-2",
      "tie1":"0",
      "cxs1":"481.891px",
      "xcve2":"130.563px"
   },
   {  
      "var5":"item-company-3",
      "asd2":"item-company-3",
      "tie1":"0",
      "cxs1":"481.891px",
      "xcve2":"130.563px"
   }
]

for(var i=0,item;item=data[i++];){
  console.log("==========="+i+"=========")
  for(var key in item){
    console.log(key+":"+item[key])
  }
}

answered Aug 30, 2016 at 2:06

Ying Yi

7824 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ying Yi Over a year ago

@zerkms Thanks,but i want to know what's the reason.Use like this,just want the code simply.

zerkms Over a year ago

The reason: there is a third section in for designed to modify the loop counter. It is really awkward to see mutable comparison.

Ying Yi Over a year ago

@zerkms Thank you.Have a good way do this? var length =data.length;for(var i=0;i<length;i++) ?

castletheperson · Accepted Answer · 2016-08-30 02:47:50Z

2

JSON.parse has a reviver function that lets you view key/value pairs at it parses:

var data = '[{"var5":"item-company-1","asd2":"item-company-1","tie1":"0","cxs1":"481.891px","xcve2":"130.563px"},{"var5":"item-company-2","asd2":"item-company-2","tie1":"0","cxs1":"481.891px","xcve2":"130.563px"},{"var5":"item-company-3","asd2":"item-company-3","tie1":"0","cxs1":"481.891px","xcve2":"130.563px"}]';

JSON.parse(data, function(key, value) {
  console.log(key, "=>", value);
  return value;
});

To iterate just the keys from the objects, use nested loops:

var json = '[{"var5":"item-company-1","asd2":"item-company-1","tie1":"0","cxs1":"481.891px","xcve2":"130.563px"},{"var5":"item-company-2","asd2":"item-company-2","tie1":"0","cxs1":"481.891px","xcve2":"130.563px"},{"var5":"item-company-3","asd2":"item-company-3","tie1":"0","cxs1":"481.891px","xcve2":"130.563px"}]';

var data = JSON.parse(json);

for (var i = 0; i < data.length; i++) {
  console.log(i + ":");
  for (var key in data[i]) {
    console.log(key, "=>", data[i][key]);  
  }
}

edited Aug 30, 2016 at 2:47

answered Aug 30, 2016 at 2:07

castletheperson

33.6k11 gold badges74 silver badges111 bronze badges

12 Comments

zerkms Over a year ago

Object.keys does not work in IE8. Array.prototype.forEach does not work in IE8 either. JSON.parse does not work in IE7.

castletheperson Over a year ago

@zerkms That's why we have polyfill libraries

zerkms Over a year ago

That's why we have babel.

castletheperson Over a year ago

@zerkms Babel is too much just for this single operation. Of course people are free to use it.

eqiz Over a year ago

I would like to mark this as an answer, but I can't. Just for the simple reason that some reason 0: is the last thats printed out in its object, also your returning a key value pair that is undefined and doesn't exist in the actual json itself. Baffled

|

Tom Coughlin · Accepted Answer · 2016-08-30 02:12:10Z

2

This should work...

data.forEach(function(obj) {
  for (let key in obj) {
    let value = obj[key];
    console.log(`Key: ${key}, Value: ${value}`)
  }
});

In your implementation, Object.keys(data) is evaluating to an array of the numeric keys in the data array. So the prop parameter in your callback function is not referring to the keys of the objects in the data array.

Object.keys()

edited Aug 30, 2016 at 2:12

answered Aug 30, 2016 at 2:04

Tom Coughlin

4634 silver badges14 bronze badges

4 Comments

castletheperson Over a year ago

@zerkms I'm just giving a warning to those who view the answer. People have to check that it fits with their compatibility requirements before they use it. There's nothing wrong with this answer.

zerkms Over a year ago

@4castle I think it would be a good lesson to learn about "a thing" before using (see copy-pasting) it, if they break their production :-)

castletheperson Over a year ago

@zerkms I do too, but this answer hasn't given any indications that they are using newer features, or what those features are called.

zerkms Over a year ago

@4castle anyone before using code must read through it and make sure they understand every token from it. But I agree for something as new as ES2015 (which is more than 1y old after the standardisation and almost 2y since first proposals) it might have been noted explicitly.

Waqar Ul Aziz · Accepted Answer · 2016-08-30 02:42:47Z

2

You actually have array for objects. So Code should look like this

var data = JSON.parse(json);
for (var key in data) {
    for (var prop in data[key]) {
        console.log(prop + " = " + data[key][prop]);
    }
}

edited Aug 30, 2016 at 2:42

answered Aug 30, 2016 at 2:17

Waqar Ul Aziz

1972 silver badges9 bronze badges

1 Comment

castletheperson Over a year ago

You never defined obj. It should be data[key][prop]

Mohamed Nizar · Accepted Answer · 2016-08-30 02:17:04Z

Try this on your code

    var data = [  
       {  
          "var5":"item-company-1",
          "asd2":"item-company-1",
          "tie1":"0",
          "cxs1":"481.891px",
          "xcve2":"130.563px"
       },
       {  
          "var5":"item-company-2",
          "asd2":"item-company-2",
          "tie1":"0",
          "cxs1":"481.891px",
          "xcve2":"130.563px"
       },
       {  
          "var5":"item-company-3",
          "asd2":"item-company-3",
          "tie1":"0",
          "cxs1":"481.891px",
          "xcve2":"130.563px"
       }
    ];

data.forEach(function(obj,k) {
     console.log(k+":");
  // `prop` is the property name
  // `data[prop]` is the property value
     Object.keys(obj).forEach(function(key){
     console.log(k+":" +key + " = " + obj[key]);
});
     
});

Collectives™ on Stack Overflow

get JSON key value pair within json object array in javascript

5 Answers 5

3 Comments

12 Comments

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

12 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related