Agfdhyk

You can access it this way

data.items[1].name

or

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

Both ways are equal.

In case you're trying to access an item from the example structure by id or name, without knowing it's position in the array, the easiest way to do it would be to use underscore.js library:

var data = {

    code: 42,

    items: [{

        id: 1,

        name: 'foo'

    }, {

        id: 2,

        name: 'bar'

    }]

};



_.find(data.items, function(item) {

  return item.id === 2;

});

// Object {id: 2, name: "bar"}

From my experience, using higher order functions instead of for or for..in loops results in code that is easier to reason about, and hence more maintainable.

Just my 2 cents.

At times, accessing a nested object using a string can be desirable. The simple approach is the first level, for example

var obj = { hello: "world" };

var key = "hello";

alert(obj[key]);//world

But this is often not the case with complex json. As json becomes more complex, the approaches for finding values inside of the json also become complex. A recursive approach for navigating the json is best, and how that recursion is leveraged will depend on the type of data being searched for. If there are conditional statements involved, a json search can be a good tool to use.

If the property being accessed is already known, but the path is complex, for example in this object

var obj = {

 arr: [

    { id: 1, name: "larry" },    

    { id: 2, name: "curly" },

    { id: 3, name: "moe" }

 ]

};

And you know you want to get the first result of the array in the object, perhaps you would like to use

var moe = obj["arr[0].name"];

However, that will cause an exception as there is no property of object with that name. The solution to be able to use this would be to flatten the tree aspect of the object. This can be done recursively.

function flatten(obj){

 var root = {};

 (function tree(obj, index){

   var suffix = toString.call(obj) == "[object Array]" ? "]" : "";

   for(var key in obj){

    if(!obj.hasOwnProperty(key))continue;

    root[index+key+suffix] = obj[key];

    if( toString.call(obj[key]) == "[object Array]" )tree(obj[key],index+key+suffix+"[");

    if( toString.call(obj[key]) == "[object Object]" )tree(obj[key],index+key+suffix+".");   

   }

 })(obj,"");

 return root;

}

Now, the complex object can be flattened

var obj = previous definition;

var flat = flatten(obj);

var moe = flat["arr[0].name"];//moe

Here is a jsFiddle Demo of this approach being used.

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 0

console.log(arr.every(x => x > 0))

// false, because 3^2 is greater than 5

console.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 5

console.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 !== 2

console.log(arr.find(x => x !== Math.pow(x, 2)))

// 1, because it's the first element

console.log(arr.find(x => true))

// undefined, because none of the elements equals 7

console.log(arr.find(x => x === 7))



// [2, 3], because these elements are greater than 1

console.log(arr.filter(x => x > 1))

// [1, 2, 3], because the function returns true for all elements

console.log(arr.filter(x => true))

// , because none of the elements equals neither 6 nor 7

console.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)) // 3

The 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())     // 0

console.log(sum([4]))    // 4

console.log(sum([2, 5])) // 7

This question is quite old, so as a contemporary update. With the onset of ES2015 there are alternatives to get a hold of the data you require. There is now a feature called object destructuring for accessing nested objects.

const data = {

  code: 42,

  items: [{

    id: 1,

    name: 'foo'

  }, {

    id: 2,

    name: 'bar'

  }]

};



const {

  items: [, {

    name: secondName

  }]

} = data;



console.log(secondName);

The above example creates a variable called secondName from the name key from an array called items, the lonely , says skip the first object in the array.

Notably it's probably overkill for this example, as simple array acccess is easier to read, but it comes in useful when breaking apart objects in general.

This is very brief intro to your specific use case, destructuring can be an unusual syntax to get used to at first. I'd recommend reading Mozilla's Destructuring Assignment documentation to learn more.

Using JSONPath would be one of the most flexible solutions if you are willing to include a library:
https://github.com/s3u/JSONPath (node and browser)

For your use case the json path would be:

$..items[1].name

so:

var secondName = jsonPath.eval(data, "$..items[1].name");

I prefer JQuery. It's cleaner and easy to read.

 $.each($.parseJSON(data), function (key, value) {

    alert(value.<propertyname>);

});

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.

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.

You could use lodash _get function:

var object = { 'a': [{ 'b': { 'c': 3 } }] };



_.get(object, 'a[0].b.c');

// => 3

If you are looking for one or more objects that meets certain criteria you have a few options using query-js

//will return all elements with an id larger than 1

data.items.where(function(e){return e.id > 1;});

//will return the first element with an id larger than 1

data.items.first(function(e){return e.id > 1;});

//will return the first element with an id larger than 1 

//or the second argument if non are found

data.items.first(function(e){return e.id > 1;},{id:-1,name:""});

There's also a single and a singleOrDefault they work much like firstand firstOrDefaultrespectively. The only difference is that they will throw if more than one match is found.

for further explanation of query-js you can start with this post

The Underscore js Way

Which is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.

Solution:

var data = {

  code: 42,

  items: [{

    id: 1,

    name: 'foo'

  }, {

    id: 2,

    name: 'bar'

  }]

};



var item = _.findWhere(data.items, {

  id: 2

});

if (!_.isUndefined(item)) {

  console.log('NAME =>', item.name);

}



//using find - 



var item = _.find(data.items, function(item) {

  return item.id === 2;

});



if (!_.isUndefined(item)) {

  console.log('NAME =>', item.name);

}

Old question but as nobody mentioned lodash (just underscore).

In case you are already using lodash in your project, I think an elegant way to do this in a complex example:

Opt 1

_.get(response, ['output', 'fund', 'data', '0', 'children', '0', 'group', 'myValue'], '')

same as:

Opt 2

response.output.fund.data[0].children[0].group.myValue

The difference between the first and second option is that in the Opt 1 if you have one of the properties missing (undefined) in the path you don't get an error, it returns you the third parameter.

For array filter lodash has _.find() but I'd rather use the regular filter(). But I still think the above method _.get() is super useful when working with really complex data. I faced in the past really complex APIs and it was handy!

I hope it can be useful for who's looking for options to manipulate really complex data which the title implies.

Accessing dynamically multi levels object.

var obj = {

  name: "salut",

  subobj: {

    subsubobj: {

      names: "I am sub sub obj"

    }

  }

};



var level = "subobj.subsubobj.names";

level = level.split(".");



var currentObjState = obj;



for (var i = 0; i < level.length; i++) {

  currentObjState = currentObjState[level[i]];

}



console.log(currentObjState);

Working fiddle: https://jsfiddle.net/andreitodorut/3mws3kjL/

var ourStorage = {





"desk":    {

    "drawer": "stapler"

  },

"cabinet": {

    "top drawer": { 

      "folder1": "a file",

      "folder2": "secrets"

    },

    "bottom drawer": "soda"

  }

};

ourStorage.cabinet["top drawer"].folder2; // Outputs -> "secrets"

or

//parent.subParent.subsubParent["almost there"]["final property"]

Basically, use a dot between each descendant that unfolds underneath it and when you have object names made out of two strings, you must use the ["obj Name"] notation. Otherwise, just a dot would suffice;

Source: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects

to add to this, accessing nested Arrays would happen like so:

var ourPets = [

  {

    animalType: "cat",

    names: [

      "Meowzer",

      "Fluffy",

      "Kit-Cat"

    ]

  },

  {

    animalType: "dog",

    names: [

      "Spot",

      "Bowser",

      "Frankie"

    ]

  }

];

ourPets[0].names[1]; // Outputs "Fluffy"

ourPets[1].names[0]; // Outputs "Spot"

Source: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays/

I don't think questioner just only concern one level nested object, so I present the following demo to demonstrate how to access the node of deeply nested json object. All right, let's find the node with id '5'.

var data = {

  code: 42,

  items: [{

    id: 1,

    name: 'aaa',

    items: [{

        id: 3,

        name: 'ccc'

      }, {

        id: 4,

        name: 'ddd'

      }]

    }, {

    id: 2,

    name: 'bbb',

    items: [{

        id: 5,

        name: 'eee'

      }, {

        id: 6,

        name: 'fff'

      }]

    }]

};



var jsonloop = new JSONLoop(data, 'id', 'items');



jsonloop.findNodeById(data, 5, function(err, node) {

  if (err) {

    document.write(err);

  } else {

    document.write(JSON.stringify(node, null, 2));

  }

});

<script src="https://rawgit.com/dabeng/JSON-Loop/master/JSONLoop.js"></script>

Just in case, anyone's visiting this question in 2017 or later and looking for an easy-to-remember way, here's an elaborate blog post on Accessing Nested Objects in JavaScript without being bamboozled by

Cannot read property 'foo' of undefined error

1. Oliver Steele's nested object access pattern

The easiest and the cleanest way is to use Oliver Steele's nested object access pattern

const name = ((user || {}).personalInfo || {}).name;

With this notation, you'll never run into

Cannot read property 'name' of undefined.

You basically check if user exists, if not, you create an empty object on the fly. This way, the next level key will always be accessed from an object that exists or an empty object, but never from undefined.

2. Access Nested Objects Using Array Reduce

To be able to access nested arrays, you can write your own array reduce util.

const getNestedObject = (nestedObj, pathArr) => {

    return pathArr.reduce((obj, key) =>

        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);

}



// pass in your object structure as array elements

const name = getNestedObject(user, ['personalInfo', 'name']);



// to access nested array, just pass in array index as an element the path array.

const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);

// this will return the city from the first address item.

There is also an excellent type handling minimal library typy that does all this for you.

A pythonic, recursive and functional approach to unravel arbitrary JSON trees:

handlers = {

    list:  iterate,

    dict:  delve,

    str:   emit_li,

    float: emit_li,

}



def emit_li(stuff, strong=False):

    emission = '<li><strong>%s</strong></li>' if strong else '<li>%s</li>'

    print(emission % stuff)



def iterate(a_list):

    print('<ul>')

    map(unravel, a_list)

    print('</ul>')



def delve(a_dict):

    print('<ul>')

    for key, value in a_dict.items():

        emit_li(key, strong=True)

        unravel(value)

    print('</ul>')



def unravel(structure):

    h = handlers[type(structure)]

    return h(structure)



unravel(data)

where data is a python list (parsed from a JSON text string):

data = [

    {'data': {'customKey1': 'customValue1',

           'customKey2': {'customSubKey1': {'customSubSubKey1': 'keyvalue'}}},

  'geometry': {'location': {'lat': 37.3860517, 'lng': -122.0838511},

               'viewport': {'northeast': {'lat': 37.4508789,

                                          'lng': -122.0446721},

                            'southwest': {'lat': 37.3567599,

                                          'lng': -122.1178619}}},

  'name': 'Mountain View',

  'scope': 'GOOGLE',

  'types': ['locality', 'political']}

]

jQuery's grep function lets you filter through an array:

var data = {

    code: 42,

    items: [{

        id: 1,

        name: 'foo'

    }, {

        id: 2,

        name: 'bar'

    }]

};



$.grep(data.items, function(item) {

    if (item.id === 2) {

        console.log(item.id); //console id of item

        console.log(item.name); //console name of item

        console.log(item); //console item object

        return item; //returns item object

    }



});

// Object {id: 2, name: "bar"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Using lodash would be good solution

Ex:

var object = { 'a': { 'b': { 'c': 3 } } };                                                                                               

_.get(object, 'a.b.c');                                                                                             

// => 3