To access a nested attribute, you need to specify its name and then search through the object.
If you already know the exact path, then you can hardcode it in your script like so:
data['items'][1]['name']
these also work -
data.items[1].name
data['items'][1].name
data.items[1]['name']
When you don't know the exact name before hand, or a user is the one who provides the name for you. Then dynamically searching through the data structure is required. Some suggested here that the search can be done using a for
loop, but there is a very simple way to traverse a path using Array.reduce
Array.reduce
.
const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }
const path = [ 'items', '1', 'name']
let result = path.reduce((a,v) => a[v], data)
The path is a way to say: First take the object with key items
, which happens to be an array. Then take the 1
-st element (0 index arrays). Last take the object with key name
in that array element, which happens to be the string bar
.
If you have a very long path, you might even use String.split
to make all of this easier -
'items.1.name'.split('.').reduce((a,v) => a[v], data)
This is just plain JavaScript, without using any third party libraries like jQuery or lodash.