How to access data from JSON object array using JavaScript ?
Assuming you have the following JSON object,
[{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"alternateEmail": ["ja3dec@gmail.com", "rpdddy57@gmail.com"]
}, {
"id": 2,
"name": "Leanne",
"username": "Samson",
"email": "abc@april.biz",
"address": {
"street": "Muines Light",
"suite": "Apt. 556",
"city": "dert",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"alternateEmail": ["fake34@gmail.com", "someday57@gmail.com"]
}]
The above example is an array of objects. So, let’s first have a look at how you can iterate such a JSON which is an array of objects.
Access Array of JSON Objects
Assign the sample JSON to a variable and you can use a normal for loop or Array.map to iterate over the array of objects.
let jsonObjectArray = [{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"alternateEmail": ["ja3dec@gmail.com", "rpdddy57@gmail.com"]
}, {
"id": 2,
"name": "Samson",
"username": "leanne",
"email": "abc@april.biz",
"address": {
"street": "Muines Light",
"suite": "Apt. 556",
"city": "dert",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"alternateEmail": ["fake34@gmail.com", "someday57@gmail.com"]
}];
let userNames = [];
for(let objIndex = 0; objIndex < jsonObjectArray.length; objIndex++){
userNames.push(jsonObjectArray[objIndex]['name']);
}
console.log('user names list ', userNames);
// "user names list ", ["Leanne Graham", "Samson"]
You can also use Array.map to parse the array of objects in a single line.
let userNames = jsonObjectArray.map(object => object['name']);
console.log('user names list ', userNames);
// "user names list ", ["Leanne Graham", "Samson"]
Access JSON Object Properties
You can access JSON object properties using dot notation object.property or using bracket notation object['property'].
You already accessed the name property of the JSON object in the above code sample.
Before accessing the object property you can check if the property exists, else you might end up with undefined values. You can use hasOwnProperty.
let userNames = jsonObjectArray.map(object => {
if(object.hasOwnProperty('name')) return object.name
return ""
})
console.log('user names list ', userNames);