How can I access and process nested objects, arrays or JSON?
Preliminaries
JavaScript has only one data type which can contain multiple values: Object. An Array is a special form of object.
(Plain) Objects have the form
{key: value, key: value, ...}Arrays have the form
[value, value, ...]Both arrays and objects expose a key -> value structure. Keys in an array must be numeric, whereas any string can be used as key in objects. The key-value pairs are also called the "properties".
Properties can be accessed either using dot notation
const value = obj.someProperty;or bracket notation, if the property name would not be a valid JavaScript identifier name [spec], or the name is the value of a variable:
// the space is not a valid character in identifier namesconst value = obj["some Property"];// property name as variableconst name = "some Property";const value = obj[name];For that reason, array elements can only be accessed using bracket notation:
const value = arr[5]; // arr.5 would be a syntax error// property name / index as variableconst x = 5;const value = arr[x];Wait... what about JSON?
JSON is a textual representation of data, just like XML, YAML, CSV, and others. To work with such data, it first has to be converted to JavaScript data types, i.e. arrays and objects (and how to work with those was just explained). How to parse JSON is explained in the question Parse JSON in JavaScript? .
Further reading material
How to access arrays and objects is fundamental JavaScript knowledge and therefore it is advisable to read the MDN JavaScript Guide, especially the sections
Accessing nested data structures
A nested data structure is an array or object which refers to other arrays or objects, i.e. its values are arrays or objects. Such structures can be accessed by consecutively applying dot or bracket notation.
Here is an example:
const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]};Let's assume we want to access the name of the second item.
Here is how we can do it step-by-step:
As we can see data is an object, hence we can access its properties using dot notation. The items property is accessed as follows:
data.itemsThe value is an array, to access its second element, we have to use bracket notation:
data.items[1]This value is an object and we use dot notation again to access the name property. So we eventually get:
const item_name = data.items[1].name;Alternatively, we could have used bracket notation for any of the properties, especially if the name contained characters that would have made it invalid for dot notation usage:
const item_name = data['items'][1]['name'];I'm trying to access a property but I get only undefined back?
Most of the time when you are getting undefined, the object/array simply doesn't have a property with that name.
const foo = {bar: {baz: 42}};console.log(foo.baz); // undefinedUse console.log or console.dir and inspect the structure of object / array. The property you are trying to access might be actually defined on a nested object / array.
console.log(foo.bar.baz); // 42What if the property names are dynamic and I don't know them beforehand?
If the property names are unknown or we want to access all properties of an object / elements of an array, we can use the for...in [MDN] loop for objects and the for [MDN] loop for arrays to iterate over all properties / elements.
Objects
To iterate over all properties of data, we can iterate over the object like so:
for (const prop in data) { // `prop` contains the name of each property, i.e. `'code'` or `'items'` // consequently, `data[prop]` refers to the value of each property, i.e. // either `42` or the array}Depending on where the object comes from (and what you want to do), you might have to test in each iteration whether the property is really a property of the object, or it is an inherited property. You can do this with Object#hasOwnProperty [MDN].
As alternative to for...in with hasOwnProperty, you can use Object.keys [MDN] to get an array of property names:
Object.keys(data).forEach(function(prop) { // `prop` is the property name // `data[prop]` is the property value});Arrays
To iterate over all elements of the data.items array, we use a for loop:
for(let i = 0, l = data.items.length; i < l; i++) { // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration // we can access the next element in the array with `data.items[i]`, example: // // var obj = data.items[i]; // // Since each element is an object (in our example), // we can now access the objects properties with `obj.id` and `obj.name`. // We could also use `data.items[i].id`.}One could also use for...in to iterate over arrays, but there are reasons why this should be avoided: Why is 'for(var item in list)' with arrays considered bad practice in JavaScript?.
With the increasing browser support of ECMAScript 5, the array method forEach [MDN] becomes an interesting alternative as well:
data.items.forEach(function(value, index, array) { // The callback is executed for each element in the array. // `value` is the element itself (equivalent to `array[index]`) // `index` will be the index of the element in the array // `array` is a reference to the array itself (i.e. `data.items` in this case)}); In environments supporting ES2015 (ES6), you can also use the for...of [MDN] loop, which not only works for arrays, but for any iterable:
for (const item of data.items) { // `item` is the array element, **not** the index}In each iteration, for...of directly gives us the next element of the iterable, there is no "index" to access or use.
What if the "depth" of the data structure is unknown to me?
In addition to unknown keys, the "depth" of the data structure (i.e. how many nested objects) it has, might be unknown as well. How to access deeply nested properties usually depends on the exact data structure.
But if the data structure contains repeating patterns, e.g. the representation of a binary tree, the solution typically includes to recursively [Wikipedia] access each level of the data structure.
Here is an example to get the first leaf node of a binary tree:
function getLeaf(node) { if (node.leftChild) { return getLeaf(node.leftChild); // <- recursive call } else if (node.rightChild) { return getLeaf(node.rightChild); // <- recursive call } else { // node must be a leaf node return node; }}const first_leaf = getLeaf(root);A more generic way to access a nested data structure with unknown keys and depth is to test the type of the value and act accordingly.
Here is an example which adds all primitive values inside a nested data structure into an array (assuming it does not contain any functions). If we encounter an object (or array) we simply call toArray again on that value (recursive call).
function toArray(obj) { const result = []; for (const prop in obj) { const value = obj[prop]; if (typeof value === 'object') { result.push(toArray(value)); // <- recursive call } else { result.push(value); } } return result;}Helpers
Since the structure of a complex object or array is not necessarily obvious, we can inspect the value at each step to decide how to move further. console.log [MDN] and console.dir [MDN] help us doing this. For example (output of the Chrome console):
> console.log(data.items) [ Object, Object ]Here we see that that data.items is an array with two elements which are both objects. In Chrome console the objects can even be expanded and inspected immediately.
> console.log(data.items[1]) Object id: 2 name: "bar" __proto__: ObjectThis tells us that data.items[1] is an object, and after expanding it we see that it has three properties, id, name and __proto__. The latter is an internal property used for the prototype chain of the object. The prototype chain and inheritance is out of scope for this answer, though.
You can access it this way
data.items[1].nameor
data["items"][1]["name"]Both ways are equal.
Objects and arrays has a lot of built-in methods that can help you with processing data.
Note: in many of the examples I'm using arrow functions. They are similar to function expressions, but they bind the this value lexically.
Object.keys(), Object.values() (ES 2017) and Object.entries() (ES 2017)
Object.keys() returns an array of object's keys, Object.values() returns an array of object's values, and Object.entries() returns an array of object's keys and corresponding values in a format [key, value].
const obj = { a: 1 ,b: 2 ,c: 3}console.log(Object.keys(obj)) // ['a', 'b', 'c']console.log(Object.values(obj)) // [1, 2, 3]console.log(Object.entries(obj)) // [['a', 1], ['b', 2], ['c', 3]]Object.entries() with a for-of loop and destructuring assignment
const obj = { a: 1 ,b: 2 ,c: 3}for (const [key, value] of Object.entries(obj)) { console.log(`key: ${key}, value: ${value}`)}It's very convenient to iterate the result of Object.entries() with a for-of loop and destructuring assignment.
For-of loop lets you iterate array elements. The syntax is for (const element of array) (we can replace const with var or let, but it's better to use const if we don't intend to modify element).
Destructuring assignment lets you extract values from an array or an object and assign them to variables. In this case const [key, value] means that instead of assigning the [key, value] array to element, we assign the first element of that array to key and the second element to value. It is equivalent to this:
for (const element of Object.entries(obj)) { const key = element[0] ,value = element[1]}As you can see, destructuring makes this a lot simpler.
Array.prototype.every() and Array.prototype.some()
The every() method returns true if the specified callback function returns true for every element of the array. The some() method returns true if the specified callback function returns true for some (at least one) element.
const arr = [1, 2, 3]// true, because every element is greater than 0console.log(arr.every(x => x > 0))// false, because 3^2 is greater than 5console.log(arr.every(x => Math.pow(x, 2) < 5))// true, because 2 is even (the remainder from dividing by 2 is 0)console.log(arr.some(x => x % 2 === 0))// false, because none of the elements is equal to 5console.log(arr.some(x => x === 5))Array.prototype.find() and Array.prototype.filter()
The find() methods returns the first element which satisfies the provided callback function. The filter() method returns an array of all elements which satisfies the provided callback function.
const arr = [1, 2, 3]// 2, because 2^2 !== 2console.log(arr.find(x => x !== Math.pow(x, 2)))// 1, because it's the first elementconsole.log(arr.find(x => true))// undefined, because none of the elements equals 7console.log(arr.find(x => x === 7))// [2, 3], because these elements are greater than 1console.log(arr.filter(x => x > 1))// [1, 2, 3], because the function returns true for all elementsconsole.log(arr.filter(x => true))// [], because none of the elements equals neither 6 nor 7console.log(arr.filter(x => x === 6 || x === 7))Array.prototype.map()
The map() method returns an array with the results of calling a provided callback function on the array elements.
const arr = [1, 2, 3]console.log(arr.map(x => x + 1)) // [2, 3, 4]console.log(arr.map(x => String.fromCharCode(96 + x))) // ['a', 'b', 'c']console.log(arr.map(x => x)) // [1, 2, 3] (no-op)console.log(arr.map(x => Math.pow(x, 2))) // [1, 4, 9]console.log(arr.map(String)) // ['1', '2', '3']Array.prototype.reduce()
The reduce() method reduces an array to a single value by calling the provided callback function with two elements.
const arr = [1, 2, 3]// Sum of array elements.console.log(arr.reduce((a, b) => a + b)) // 6// The largest number in the array.console.log(arr.reduce((a, b) => a > b ? a : b)) // 3The reduce() method takes an optional second parameter, which is the initial value. This is useful when the array on which you call reduce() can has zero or one elements. For example, if we wanted to create a function sum() which takes an array as an argument and returns the sum of all elements, we could write it like that:
const sum = arr => arr.reduce((a, b) => a + b, 0)console.log(sum([])) // 0console.log(sum([4])) // 4console.log(sum([2, 5])) // 7