There are two ways to access properties of objects:
var obj = {a: 'foo', b: 'bar'};
obj.a //foo
obj['b'] //bar
Or, if you need to dynamically do it:
var key = 'b';
obj[key] //bar
If you don't already have it as an object, you'll need to convert it.
For a more complex example, let's assume you have an array of objects that represent users:
var users = [{name: 'Corbin', age: 20, favoriteFoods: ['ice cream', 'pizza']},
{name: 'John', age: 25, favoriteFoods: ['ice cream', 'skittle']}];
To access the age property of the second user, you would use users[1].age. To
access the second "favoriteFood" of the first user, you'd use users[0].favoriteFoods[2].
Another example: obj[2].key[3]["some key"]
That would access the 3rd element of an array named 2. Then, it would access 'key' in that array, go to the third element of that, and then access the property name some key.
As Amadan noted, it might be worth also discussing how to loop over different structures.
To loop over an array, you can use a simple for loop:
var arr = ['a', 'b', 'c'],
i;
for [i = 0; i < arr.length; ++i] {
console.log[arr[i]];
}
To loop over an object is a bit more
complicated. In the case that you're absolutely positive that the object is a plain object, you can use a plain for [x in obj] { } loop, but it's a lot safer to add in a hasOwnProperty check. This is necessary in situations where you cannot verify that the object does not have inherited properties. [It also future proofs the code a bit.]
var user = {name: 'Corbin', age: 20, location: 'USA'},
key;
for [key in user] {
if [user.hasOwnProperty[key]] {
console.log[key + " = " + user[key]];
}
}
[Note that
I've assumed whatever JS implementation you're using has console.log. If not, you could use alert or some kind of DOM manipulation instead.]
Use the array filter function to get the JSON value for the key in JavaScript. Simple example code gets value for a key from nested JSON object in JavaScript. Output:
const obj = {
"prop": [
{
"key": "FOO",
"value": "Foo is wonderfull, foo is great"
},
{
"key": "BAR",
"value": "Bar is bad, really bad"
}
]
};
const arr = obj['prop'];
const result = arr.filter[el => {
return el['key'] === "BAR";
}];
console.log[result[0].value]
JavaScript function that takes in one such object as the first argument, and a key string as the second argument.
const findByKey = [obj, key] => {
const arr = obj['prop'];
if[arr.length]{
const result = arr.filter[el => {
return el['key'] === key;
}];
if[result && result.length]{
return result[0].value;
}
else{
return '';
}
}
}
console.log[findByKey[obj, 'BAR']];Do comment if you have any doubts or suggestions on this JS JSON code.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.
You can use the map[] function or loop over them to either get the key and value from the JSON array object in JavaScript. Simple example code using a map. Output:
let arr = [
{name: "AAA", age: 10},
{name: "BBB", age: 20},
{name: "CCC", age: 30}
]
let res = arr.map[function[elem]{
return elem.name +" "+ elem.age; }].join[","];
console.log[res]
Using loop
JSON content is basically represented as an associative array in JavaScript. Just use for-loop over them to either read the key or the value.
var JSON_Obj = { "one":1, "two":2, "three":3, "four":4, "five":5 };
// Read key
for [var key in JSON_Obj] {
console.log[key];
console.log[JSON_Obj[key]];
}
Output:
Do comment if you have any doubts or suggestions on this JS array topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.