You can access it this way

data.items[1].name

or

data["items"][1]["name"]

Both methods are equal.

Preliminary knowledge

JavaScript has only one data type that can contain multiple values:Object.Arrayis a special form of object.

(Normal) objects have the following form

{key: value, key: value, ...}

The form of the array is

[value, value, ...]

Both arrays and objects expose akey -> valuestructure. Keys in arrays must be numbers, while any string can be used as a key in an object. Key-value pairs are also called"properties".

You can usedot notationto access properties

const value = obj.someProperty;

orBracket notation, if the property name is not a valid JavaScriptIdentifier name^[spec], or the name Is the value of the variable:

// the space is not a valid character in identifier names const value = obj["some Property"]; // property name as variable const name = "some Property"; const value = obj[name];

Therefore, array elements can only be accessed using bracket notation:

const value = arr[5]; // arr.5 would be a syntax error // property name / index as variable const x = 5; const value = arr[x];

Wait...what about JSON?

JSON is a text representation of data, just like XML, YAML, CSV, etc. To process such data, you first have to convert it to JavaScript data types, namely arrays and objects (how to process these data was just explained). QuestionParsing JSON in JavaScript? How to parse JSON is explained in.

Further reading material

How to access arrays and objects is JavaScript basic knowledge, so it is recommended to read theMDN JavaScript Guide, especially the various parts

• user target audience
• Array
• Eloquent JavaScript - Data Structure

---

---

Access nested data structures

A nested data structure is an array or object that refers to other arrays or objects, that is, its value is an array or object. Such structures can be accessed by successive application of dot or bracket notation.

This is an example:

const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] };

Suppose we want to access thenameof the second project.

Here's how we do it step by step:

As we can see,datais an object, so we can access its properties using dot notation.itemsThe attributes are accessed as follows:

data.items

The value is an array, to access its second element we must use bracket notation:

data.items[1]

The value is an object, and we again use dot notation to access thenameproperty. So we end up with:

const item_name = data.items[1].name;

Alternatively, we can use bracket notation for any attribute, especially if the name contains characters that make it invalid for dot notation:

const item_name = data['items'][1]['name'];

---

I'm trying to access a property but I only getundefinedmessages?

Most of the time when you encounterundefinedthe object/array simply does not have a property with that name.

const foo = {bar: {baz: 42}}; console.log(foo.baz); // undefined

Useconsole.logorconsole.dirand check the structure of the object/array. It's possible that the property you're trying to access is actually defined on a nested object/array.

console.log(foo.bar.baz); // 42

---

What if the property names are dynamic and I don't know them beforehand?

If the property name is unknown or we want to access all properties of the object/array element, we can usefor...in^[MDN]Loop over objects andfor^[MDN]Loop through arrays to iterate over all properties/elements.

Object

To iterate over all properties ofdata, we can iterate overobjectsas follows:

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 may have to test on each iteration whether the property is indeed a property of the object, or an inherited property. You can useObject#hasOwnProperty代码>[MDN].

As an alternative tofor...inandhasOwnProperty, you can useObject.keys^{[MDN ]}Getattribute name array:

Object.keys(data).forEach(function(prop) { // `prop` is the property name // `data[prop]` is the property value });

Array

To iterate over all elements ofdata.itemsarraywe use aforloop:

for(let i = 0, l = data.items.length; i
It is also possible to iterate over an array usingfor...in, but there are some reasons why this should be avoided:Why use "for(var item in list)" for arrays in JavaScript Considered bad practice?.
As browser support for ECMAScript 5 continues to increase, the array methodforEach[MDN]also becomes an interesting alternative plan:
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 that support ES2015 (ES6), you can also usefor...of[MDN]Loops, which work not only with arrays, but with anyiterable object:
for (const item of data.items) { // `item` is the array element, **not** the index }
On each iteration,for...ofgives us the next element of the iterable directly, with no "index" to access or use.
           
What if I don't know the "depth" of the data structure?
In addition to unknown keys, the "depth" of the data structure (i.e. how many nested objects there are) may also be unknown. How you access deeply nested properties often depends on the exact data structure.
But if the data structure contains repeating patterns, such as the representation of a binary tree, the solution usually involvesrecursion[Wikipedia]Access every level of the data structure.
The following is an example of obtaining the first leaf node of a binary tree:
function getLeaf(node) { if (node.leftChild) { return getLeaf(node.leftChild); //

            

             

              
const root = { leftChild: { leftChild: { leftChild: null, rightChild: null, data: 42 }, rightChild: { leftChild: null, rightChild: null, data: 5 } }, rightChild: { leftChild: { leftChild: null, rightChild: null, data: 6 }, rightChild: { leftChild: null, rightChild: null, data: 7 } } }; function getLeaf(node) { if (node.leftChild) { return getLeaf(node.leftChild); } else if (node.rightChild) { return getLeaf(node.rightChild); } else { // node must be a leaf node return node; } } console.log(getLeaf(root).data);