How to get value of a key in JSON

Question

I have a JSON like this:

var arrStages = [                 
    { "strID" : "ID-0001" , "intStageNum" : 1 , "strNumOfDays": 1 }, 
    { "strID" : "ID-0003" , "intStageNum" : 3 , "strNumOfDays": 14}, 
    { "strID" : "ID-0002" , "intStageNum" : 2 , "strNumOfDays": 3 },
    { "strID" : "ID-0006" , "intStageNum" : 6 , "strNumOfDays": 3 },
    { "strID" : "ID-0004" , "intStageNum" : 4 , "strNumOfDays": 3 },
    { "strID" : "ID-0005" , "intStageNum" : 5 , "strNumOfDays": 3 },
];

How can I get the a specific attribute (let's say I want the strNumOfDays) of each one of them? Do I have to use $.each()?

`arrStages.forEach(function(stage) { console.log(stage.strNumOfDays); })` — Abhitalks, Mar 04 '17 at 08:53
JSON is a *textual notation* for data exchange. [(More.)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. — T.J. Crowder, Mar 04 '17 at 08:57

score 2 · Accepted Answer · edited May 23 '17 at 12:09

Do I have to use $.each()?

You'll need some kind of looping construct, yes. A for loop, for instance, or the features of Array.prototype, or in ES2015 (aka "ES6") and later a for-of loop, or yes, you could use jQuery's $.each or $.map. For instance, we can get an array of those values using arrStages.map:

var days = arrStages.map(function(entry) {
  return entry.strNumOfDays;
});

Or in ES2015+:

let days = arrStages.map(entry => entry.strNumOfDays);

Example (in ES5):

var arrStages = [                 
    { "strID" : "ID-0001" , "intStageNum" : 1 , "strNumOfDays": 1 }, 
    { "strID" : "ID-0003" , "intStageNum" : 3 , "strNumOfDays": 14}, 
    { "strID" : "ID-0002" , "intStageNum" : 2 , "strNumOfDays": 3 },
    { "strID" : "ID-0006" , "intStageNum" : 6 , "strNumOfDays": 3 },
    { "strID" : "ID-0004" , "intStageNum" : 4 , "strNumOfDays": 3 },
    { "strID" : "ID-0005" , "intStageNum" : 5 , "strNumOfDays": 3 },
];
var days = arrStages.map(function(entry) {
  return entry.strNumOfDays;
});
console.log(days);

This question's answers cover the wide number of options you have for looping through arrays in JavaScript.

In ES2015 and above, if you don't need an array but you just need to loop through the values, here's what a for-of loop would look like:

for (let entry of arrStages) {
    // Use entry.strNumOfDays here...
}

Fabian Schultz · Answer 2 · 2017-03-04T09:07:03.287

You can also use Javascript's map() or forEach(), since it's an array. It's also a little more straightforward than $.each().

var arrStages = [                 
    { "strID" : "ID-0001" , "intStageNum" : 1 , "strNumOfDays": 1 }, 
    { "strID" : "ID-0003" , "intStageNum" : 3 , "strNumOfDays": 14}, 
    { "strID" : "ID-0002" , "intStageNum" : 2 , "strNumOfDays": 3 },
    { "strID" : "ID-0006" , "intStageNum" : 6 , "strNumOfDays": 3 },
    { "strID" : "ID-0004" , "intStageNum" : 4 , "strNumOfDays": 3 },
    { "strID" : "ID-0005" , "intStageNum" : 5 , "strNumOfDays": 3 },
];

// map()
var newArray = arrStages.map(function(string) {
  return string.strNumOfDays;
});
console.log(newArray);

// map()
arrStages.forEach(function(string) {
  console.log(string.strNumOfDays);
});

// jQuery each()
$.each(arrStages, function(key) {
  console.log(arrStages[key].strNumOfDays);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You should also point out that he can use `Array.prototype.forEach()`. — dodov, Mar 04 '17 at 08:59
If you're not using the return value from `.map()` you should be using `.forEach()`. (A matter of semantics.) — nnnnnn, Mar 04 '17 at 09:05

dodov · Answer 3 · 2017-03-04T10:51:40.187

Array.prototype.reduce() could also be used.

It works by receiving two arguments - a function that is called for each iteration over the array and an initial value. In the first iteration, the initial value is passed to the provided function as its first argument (memo). The second argument is the currently iterated array element (curr). We just push the desired property in memo and return memo. It needs to be returned because reduce() uses the returned value as the memo of the next iteration. Basically, the second argument to reduce() is an empty array in which we push new values while passing it between iterations. That array is returned with the last iteration and stored in the days variable.

var arrStages = [                 
    { "strID" : "ID-0001" , "intStageNum" : 1 , "strNumOfDays": 1 }, 
    { "strID" : "ID-0003" , "intStageNum" : 3 , "strNumOfDays": 14}, 
    { "strID" : "ID-0002" , "intStageNum" : 2 , "strNumOfDays": 3 },
    { "strID" : "ID-0006" , "intStageNum" : 6 , "strNumOfDays": 3 },
    { "strID" : "ID-0004" , "intStageNum" : 4 , "strNumOfDays": 3 },
    { "strID" : "ID-0005" , "intStageNum" : 5 , "strNumOfDays": 3 },
];

var days = arrStages.reduce(function (memo, curr) {
  memo.push(curr.strNumOfDays);
  return memo;
}, []);

console.log(days);

Edit

@nnnnnn said map() is more straightforward. That's true, but it has a bit less flexibility. For example, if you want to get only the values where strNumOfDays is not 3:

var arrStages = [                 
    { "strID" : "ID-0001" , "intStageNum" : 1 , "strNumOfDays": 1 }, 
    { "strID" : "ID-0003" , "intStageNum" : 3 , "strNumOfDays": 14}, 
    { "strID" : "ID-0002" , "intStageNum" : 2 , "strNumOfDays": 3 },
    { "strID" : "ID-0006" , "intStageNum" : 6 , "strNumOfDays": 3 },
    { "strID" : "ID-0004" , "intStageNum" : 4 , "strNumOfDays": 3 },
    { "strID" : "ID-0005" , "intStageNum" : 5 , "strNumOfDays": 3 },
];

var mappedDays = arrStages.map(function (elem) {
  if (elem.strNumOfDays !== 3) {
    return elem.strNumOfDays;
  }
});

var reducedDays = arrStages.reduce(function (memo, curr) {
  if (curr.strNumOfDays !== 3) {
    memo.push(curr.strNumOfDays);
  }
  return memo;
}, []);

console.log("map", mappedDays);
console.log("reduce", reducedDays);

Notice that map() always saves the returned value. If nothing is returned, it saves undefined. With reduce(), you control what exactly is being added.

Disclaimer: I know this is not required in the question and I'm not saying reduce() is better, I just wanted to show its benefits.

True. But if you want to skip some properties, for example, `map()` wouldn't do the job since it always saves the returned value. With `reduce()` you, have more control. Besides, it's still a legitimate solution, so I decided to post it. — dodov, Mar 04 '17 at 09:13

Nina Scholz · Answer 4 · 2017-03-04T09:19:29.760

You could use Array#map with a closure over the wanted key.

function getValues(key) {
    return function (object) {
        return object[key];
    };
}

var arrStages = [{ strID: "ID-0001" , intStageNum: 1 , strNumOfDays: 1 }, { strID: "ID-0003" , intStageNum: 3 , strNumOfDays: 14}, { strID: "ID-0002" , intStageNum: 2 , strNumOfDays: 3 }, { strID: "ID-0006" , intStageNum: 6 , strNumOfDays: 3 }, { strID: "ID-0004" , intStageNum: 4 , strNumOfDays: 3 }, { strID: "ID-0005" , intStageNum: 5 , strNumOfDays: 3 }];

console.log(arrStages.map(getValues('strNumOfDays')));

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

He said he wants to get the property "of each one of them", not just `ID-0003`. — dodov, Mar 04 '17 at 09:15

score 0 · Answer 5 · answered Mar 04 '17 at 09:42

0

This is an ES6 solution to your problem:

arrStages.forEach((arrStage) => {
    console.log(arrStage["strNumOfDays"]);
});

I think this is what you wanted.

I Hope it helps.

answered Mar 04 '17 at 09:42

Alon

112
1
7

How to get value of a key in JSON

5 Answers5

Edit