Retrieving Keys from JSON Array key-value pair dynamically - Javascript

Question

I have a question that would like to seek your expertise on.

This is a JSON array that I have:

[{"A":20,"B":32,"C":27,"D":30,"E":40}]

What I would like to do is to retrieve the keys (A, B, C, D, E) from the JSON array instead of the values. I am able to retrieve the values but not the keys.

I am using this to retrieve the values dynamically:

function calculateSum(jsonArray) {
    var result = 0;
    for (var i = jsonArray.length - 1;  i >= 0; --i)
    {
        var o = jsonArray[i];
        A = o.A;
        B = o.B;
        C = o.C;
        D = o.D;
        E = o.E;
        result = A + B + C + D + E;
        return result;
    }

    return result;
}

Similarly, what should I do to retrieve the keys using JavaScript?

nrabinowitz · Accepted Answer · 2011-09-12 21:10:14Z

17

Are you using D3.js as your tag implies? Because in that case, you can just use d3.keys():

var data = [{"A":20,"B":32,"C":27,"D":30,"E":40}];
d3.keys(data[0]); // ["A", "B", "C", "D", "E"]

If you want the sum of all the values, you might be better off using d3.values() and d3.sum():

var data = [{"A":20,"B":32,"C":27,"D":30,"E":40}, {"F":50}];
// get total of all object totals
var total = d3.sum(data, function(d) {
    // get total of a single object's values
    return d3.sum(d3.values(d));
});
total; // 199

answered Sep 12, 2011 at 21:10

nrabinowitz

55.7k10 gold badges152 silver badges169 bronze badges

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

Comments

Sahil Muthoo · Accepted Answer · 2011-09-12 17:22:11Z

11

All of the current posted solutions have a problem. None of them check for object.hasOwnProperty(prop) while iterating over an object using a for...in loop. This might cause phantom keys to appear if properties are added to the prototype.

Quoting Douglas Crockford

Be aware that members that are added to the prototype of the object will be included in the enumeration. It is wise to program defensively by using the hasOwnProperty method to distinguish the true members of the object.

Adding a check for hasOwnProperty to maerics' excellent solution.

var getKeys = function (arr) {
        var key, keys = [];
        for (i = 0; i < arr.length; i++) {
            for (key in arr[i]) {
                if (arr[i].hasOwnProperty(key)) {
                    keys.push(key);
                }
            }
        }
        return keys;
    };

answered Sep 12, 2011 at 17:22

Sahil Muthoo

12.6k2 gold badges32 silver badges39 bronze badges

1 Comment

Jordão Over a year ago

+1 This is not really a problem for a JSON-deserialized object, but you're right, the code is better with the check. I'll add it to my answer...

Jordão · Accepted Answer · 2011-09-12 17:29:57Z

4

Use for .. in:

var result = 0;

for (var i = jsonArray.length - 1; i >= 0; --i) {
    var o = jsonArray[i];
    for (var key in o) {
      if (o.hasOwnProperty(key)) {
        result += o[key];
      }
    }
    // in your code, you return result here, 
    // which might not give the right result 
    // if the array has more than 1 element
}

return result;

edited Sep 12, 2011 at 17:29

answered Sep 12, 2011 at 17:07

Jordão

56.8k13 gold badges118 silver badges147 bronze badges

2 Comments

Sahil Muthoo Over a year ago

This just sums up the values. I believe @Queryer wants to retrieve the list of keys.

Jordão Over a year ago

@Sahil Muthoo: That's not what I understood.... To me he wants to sum up the values, but without knowing the keys beforehand....

Billy Moon · Accepted Answer · 2014-07-20 09:07:02Z

4

var easy = {
    a: 1,
    b: 2,
    c: 3
}

var keys = [], vals = []
for (var key in easy) {
    keys.push(key)
    vals.push(easy[key])
}

alert(keys+" - tha's how easy baby, it's gonna be")
alert(vals+" - tha's how easy baby, it's gonna be")

defensively

Including @Sahil's defensive method...

for (var key in easy) {
    if (easy.hasOwnProperty(key)) {
        keys.push(key)
        vals.push(easy[key])
    }
}

edited Jul 20, 2014 at 9:07

answered Sep 12, 2011 at 17:19

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Comments

maerics · Accepted Answer · 2011-09-12 17:10:05Z

2

Try using the JavaScript for..in statement:

var getKeys = function(arr) {
  var key, keys = [];
  for (i=0; i<arr.length; i++) {
    for (key in arr[i]) {
      keys.push(key);
    }
  }
  return keys;
};

var a = [{"A":20, "B":32, "C":27, "D":30, "E":40}, {"F":50}]
getKeys(a); // => ["A", "B", "C", "D", "E", "F"]

answered Sep 12, 2011 at 17:10

maerics

157k47 gold badges277 silver badges299 bronze badges

Comments

Do-Gyun Kim · Accepted Answer · 2014-05-22 08:35:46Z

2

I think this is the simplest.

var a = [{"A":20,"B":32,"C":27,"D":30,"E":40}];
Object.keys( a[0] );

Result :

["A", "B", "C", "D", "E"]

answered May 22, 2014 at 8:35

Do-Gyun Kim

214 bronze badges

1 Comment

DragonBorn Over a year ago

What if there are multiple objects in the array?

sjngm · Accepted Answer · 2011-09-12 17:08:23Z

0

A for-in-loop does the trick. On one object it looks like this:

var o = {
    a: 5,
    b: 3
};
var num = 0;

for (var key in o) {
    num += o[key];
}
alert(num);

answered Sep 12, 2011 at 17:08

sjngm

13k16 gold badges90 silver badges118 bronze badges

1 Comment

Sahil Muthoo Over a year ago

This just sums up the values. I believe @Queryer wants to retrieve the list of keys.

Daniil Ryzhkov · Accepted Answer · 2015-05-05 12:32:27Z

0

Try this. It is simple:

var a = [{"A":20,"B":32,"C":27,"D":30,"E":40}];

for(var i in a){
  for(var j in a[i]){
    console.log(j); // shows key
    console.log(a[i][j]); // shows value
  }
}

edited May 5, 2015 at 12:32

Daniil Ryzhkov

7,6264 gold badges44 silver badges59 bronze badges

answered May 5, 2015 at 12:08

sangeeth kumar

3272 gold badges8 silver badges25 bronze badges

Comments

user1686644 · Accepted Answer · 2015-08-16 14:57:56Z

0

I think this should be parsed recursively like below

var getKeys = function(previousKeys,obj){
        var currentKeys = Object.keys(obj);
        previousKeys = previousKeys.concat(currentKeys);
        for(var i=0;i<currentKeys.length;i++){
            var innerObj = obj[currentKeys[i]];
            if(innerObj!==null && typeof innerObj === 'object' && !Array.isArray(innerObj)){
            return this.getKeys(previousKeys,innerObj);
            }
        }
        return previousKeys;
    }

usage: getKeys([],{"a":"1",n:{c:"3",e:{ f:4,g:[1,2,3]}}})

Result: ["a", "n", "c", "e", "f", "g"]

answered Aug 16, 2015 at 14:57

user1686644

212 bronze badges

Comments

RedBassett · Accepted Answer · 2016-01-28 05:59:42Z

0

var _ = require('underscore');

var obj = [{"A":20,"B":32,"C":27,"D":30,"E":40},{"F":50}, {"G":60,"H":70},{"I":80}];

var keys = [], values = [];



_.each(obj, function(d) {

     keys.push(_.keys(d));

     values.push(_.values(d));
});


// Keys   ->  [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I' ]
console.log('Keys   -> ', _.flatten(keys ));
// Values ->  [ 20, 32, 27, 30, 40, 50, 60, 70, 80 ]
console.log('Values -> ', _.flatten(values));

edited Jan 28, 2016 at 5:59

RedBassett

3,5973 gold badges36 silver badges61 bronze badges

answered Jan 28, 2016 at 5:03

Tukaram Patil Pune

8197 silver badges16 bronze badges

Comments

gondwe · Accepted Answer · 2018-05-23 20:08:07Z

0

stop reinventing the wheel !

Object.keys()

MDN

answered May 23, 2018 at 20:08

gondwe

10111 bronze badges

Collectives™ on Stack Overflow

Retrieving Keys from JSON Array key-value pair dynamically - Javascript

11 Answers 11

Comments

1 Comment

2 Comments

defensively

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

Comments

1 Comment

2 Comments

defensively

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related