How can I access and process nested objects arrays or JSON

Question

I have a nested data structure containing objects and arrays  How can I extract the information  i e  access a specific or multiple values  or keys    For example   var data         code  42      items             id  1          name   foo                   id  2          name   bar              How could I access the name of the second item in items

User · Answer

Using lodash would be good solution   Ex                                                                                                  var object      a      b      c   3                                                                                                         get object   a b c                                                                                                      gt  3

User · Answer

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

User · Answer

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     x000D   x000D  var data     x000D    code  42  x000D    items     x000D      id  1  x000D      name   aaa   x000D      items     x000D          id  3  x000D          name   ccc  x000D             x000D          id  4  x000D          name   ddd  x000D           x000D           x000D      id  2  x000D      name   bbb   x000D      items     x000D          id  5  x000D          name   eee  x000D             x000D          id  6  x000D          name   fff  x000D           x000D         x000D     x000D   x000D  var jsonloop   new JSONLoop data   id    items    x000D   x000D  jsonloop findNodeById data  5  function err  node    x000D    if  err    x000D      document write err   x000D      else   x000D      document write JSON stringify node  null  2    x000D      x000D      x000D   lt script src  https   rawgit com dabeng JSON-Loop master JSONLoop js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Accessing dynamically multi levels object   var obj       name   john doe     subobj        subsubobj          names   I am sub sub obj                var level    subobj subsubobj names   level   level split        var currentObjState   obj   for  var i   0  i  lt  level length  i        currentObjState   currentObjState level i       console log currentObjState     Working fiddle  https   jsfiddle net andreitodorut 3mws3kjL

User · Answer

Here are 4 different methods mentioned to get the object property   x000D   x000D  var data       code  42    items         id  1      name   foo             id  2      name   bar             Method 1 let method1   data items 1  name  console log method1       Method 2 let method2   data items 1   name    console log method2       Method 3 let method3   data  items   1   name    console log method3       Method 4  Destructuring let   items       name  second name        data  console log second name   x000D   x000D   x000D

User · Answer

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    gt        return pathArr reduce  obj  key    gt           obj  amp  amp  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

User · Answer

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  gt  1       will return the first element with an id larger than 1 data items first function e  return e id  gt  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  gt  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

User · Answer

I prefer JQuery  It s cleaner and easy to read     each   parseJSON data   function  key  value      alert value  lt propertyname gt

User · Answer

Here is an answer using object-scan  When accessing a single entry  this answer doesn t really provide much benefit over vanilla javascript  However interacting with multiple fields at the same time this answer can be more performant  Here is how you could interact with a single field  x000D   x000D     const objectScan   require  object-scan     const data     code  42  items     id  1  name   foo       id  2  name   bar         const get    haystack  needle    gt  objectScan  needle       abort  true    rtn   value     haystack    const set    haystack  needle  value    gt  objectScan  needle       abort  true    rtn   bool     filterFn     parent  property      gt        parent property    value      return true         haystack    console log get data   items 1  name          gt  bar  console log set data   items 1  name    foo2          gt  true console log data        gt    code  42  items      id  1  name   foo       id  2  name   foo2        x000D   as-console-wrapper  max-height  100   important  top  0  x000D   lt script src  https   bundle run object-scan 13 8 0  gt  lt  script gt  x000D   x000D   x000D   Disclaimer  I m the author of object-scan and here is how you could interact with multiple fields at the same time  x000D   x000D     const objectScan   require  object-scan     const data     code  42  items     id  1  name   foo       id  2  name   bar         const get    haystack     needles    gt  objectScan needles      joined  true    rtn   entry     haystack    const set    haystack  actions    gt  objectScan Object keys actions       rtn   count     filterFn     matchedBy  parent  property      gt        matchedBy forEach  m    gt          parent property    actions m              return true         haystack    console log get data   items 0  name    items 1  name          gt       items 1  name    bar        items 0  name    foo       console log set data       items 0  name    foo1      items 1  name    foo2            gt  2 console log data        gt    code  42  items      id  1  name   foo1       id  2  name   foo2        x000D   as-console-wrapper  max-height  100   important  top  0  x000D   lt script src  https   bundle run object-scan 13 8 0  gt  lt  script gt  x000D   x000D   x000D   Disclaimer  I m the author of object-scan  And here is how one could find an entity in a deeply nested object searching by id  as asked in comment   x000D   x000D     const objectScan   require  object-scan     const myData     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            const findItemById    haystack  id    gt  objectScan       items   id        abort  true    useArraySelector  false    rtn   parent     filterFn     value      gt  value     id    haystack    console log findItemById myData  5         gt    id  5  name   eee    x000D   as-console-wrapper  max-height  100   important  top  0  x000D   lt script src  https   bundle run object-scan 13 8 0  gt  lt  script gt  x000D   x000D   x000D   Disclaimer  I m the author of object-scan

User · Answer

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

User · Answer

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    x000D   x000D  const data     x000D    code  42  x000D    items     x000D      id  1  x000D      name   foo  x000D         x000D      id  2  x000D      name   bar  x000D       x000D     x000D   x000D  const   x000D    items       x000D      name  secondName x000D       x000D      data  x000D   x000D  console log secondName   x000D   x000D   x000D    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

User · Answer

You can use the syntax jsonObject key to access the the value  And if you want access a value from an array  then you can use the syntax jsonObjectArray index  key   Here are the code examples to access various values to give you the idea    x000D   x000D          var data     x000D              code  42  x000D              items     x000D                  id  1  x000D                  name   foo  x000D                   x000D                  id  2  x000D                  name   bar  x000D                 x000D             x000D   x000D             if you want  bar  x000D          console log data items 1  name   x000D   x000D             if you want array of item names x000D          console log data items map x   gt  x name    x000D   x000D             get the id of the item where name    bar  x000D          console log data items filter x   gt   x name     bar     x id   null  0  id   x000D   x000D   x000D

User · Answer

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     lt li gt  lt strong gt  s lt  strong gt  lt  li gt   if strong else   lt li gt  s lt  li gt       print emission   stuff   def iterate a list       print   lt ul gt        map unravel  a list      print   lt  ul gt     def delve a dict       print   lt ul gt        for key  value in a dict items            emit li key  strong True          unravel value      print   lt  ul gt     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

User · Answer

jQuery s grep function lets you filter through an array    x000D   x000D  var data     x000D      code  42  x000D      items     x000D          id  1  x000D          name   foo  x000D           x000D          id  2  x000D          name   bar  x000D         x000D     x000D   x000D    grep data items  function item    x000D      if  item id     2    x000D          console log item id     console id of item x000D          console log item name     console name of item x000D          console log item     console item object x000D          return item    returns item object x000D        x000D   x000D      x000D     Object  id  2  name   bar   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

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

User · Answer

My stringdata is coming from PHP file but still  I indicate here in var  When i directly take my json into obj it will nothing show thats why i put my json file as  var obj JSON parse stringdata    so after that i get message obj and show in alert box then I get data which is json array and store in one varible ArrObj then i read first object of that array with key value like this ArrObj 0  id        var stringdata            success   true           message    working            data                         id   1                     name    foo                                        var obj JSON parse stringdata                   var key    message                   alert obj key                    var keyobj    data                   var ArrObj  obj keyobj                    alert ArrObj 0  id

User · Answer

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     x000D   x000D  const obj     x000D    a  1 x000D    b  2 x000D    c  3 x000D    x000D   x000D  console log Object keys obj        a    b    c   x000D  console log Object values obj       1  2  3  x000D  console log Object entries obj         a   1     b   2     c   3   x000D   x000D   x000D    Object entries   with a for-of loop and destructuring assignment   x000D   x000D  const obj     x000D    a  1 x000D    b  2 x000D    c  3 x000D    x000D   x000D  for  const  key  value  of Object entries obj     x000D    console log  key    key   value    value    x000D    x000D   x000D   x000D    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    x000D   x000D  const arr    1  2  3  x000D   x000D     true  because every element is greater than 0 x000D  console log arr every x   gt  x  gt  0   x000D     false  because 3 2 is greater than 5 x000D  console log arr every x   gt  Math pow x  2   lt  5   x000D     true  because 2 is even  the remainder from dividing by 2 is 0  x000D  console log arr some x   gt  x   2     0   x000D     false  because none of the elements is equal to 5 x000D  console log arr some x   gt  x     5   x000D   x000D   x000D    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    x000D   x000D  const arr    1  2  3  x000D   x000D     2  because 2 2     2 x000D  console log arr find x   gt  x     Math pow x  2    x000D     1  because it s the first element x000D  console log arr find x   gt  true   x000D     undefined  because none of the elements equals 7 x000D  console log arr find x   gt  x     7   x000D   x000D      2  3   because these elements are greater than 1 x000D  console log arr filter x   gt  x  gt  1   x000D      1  2  3   because the function returns true for all elements x000D  console log arr filter x   gt  true   x000D         because none of the elements equals neither 6 nor 7 x000D  console log arr filter x   gt  x     6    x     7   x000D   x000D   x000D    Array prototype map    The map   method returns an array with the results of calling a provided callback function on the array elements    x000D   x000D  const arr    1  2  3  x000D   x000D  console log arr map x   gt  x   1       2  3  4  x000D  console log arr map x   gt  String fromCharCode 96   x         a    b    c   x000D  console log arr map x   gt  x       1  2  3   no-op  x000D  console log arr map x   gt  Math pow x  2        1  4  9  x000D  console log arr map String        1    2    3   x000D   x000D   x000D    Array prototype reduce    The reduce   method reduces an array to a single value by calling the provided callback function with two elements    x000D   x000D  const arr    1  2  3  x000D   x000D     Sum of array elements  x000D  console log arr reduce  a  b    gt  a   b      6 x000D     The largest number in the array  x000D  console log arr reduce  a  b    gt  a  gt  b   a   b      3 x000D   x000D   x000D    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    x000D   x000D  const sum   arr   gt  arr reduce  a  b    gt  a   b  0  x000D   x000D  console log sum             0 x000D  console log sum  4          4 x000D  console log sum  2  5       7 x000D   x000D   x000D

User · Answer

var ourStorage        desk             drawer    stapler        cabinet          top drawer             folder1    a file          folder2    secrets              bottom drawer    soda         ourStorage cabinet  top drawer   folder2     Outputs - gt   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   Another more useful document depicting the situation above   https   developer mozilla org en-US docs Learn JavaScript Objects Basics Bracket notation  Property access via dot walking  https   developer mozilla org en-US docs Web JavaScript Reference Operators Property Accessors Dot notation

User · Answer

In 2020  you can use  babel plugin-proposal-optional-chaining it is very easy to access nested values in an object     const obj      foo       bar         baz  class                      const baz   new obj  foo  bar  baz       baz instance  const safe   new obj  qux  baz       undefined const safe2   new obj  foo bar qux         undefined   https   babeljs io docs en babel-plugin-proposal-optional-chaining  https   github com tc39 proposal-optional-chaining

User · Answer

You could use lodash  get function   var object      a       b      c   3            get object   a 0  b c         gt  3

User · Answer

const path    info value 0  item     const obj     info    value      item   it works        randominfo  3         getValue path  obj   export const getValue     path   obj    gt      const newPath   path replace     g        const arrayPath   newPath split               newPath     const final   arrayPath reduce   obj  k    gt  obj    obj k    obj  obj    return final

User · Answer

You can access it this way  data items 1  name   or  data  items   1   name     Both ways are equal

User · Answer

It s simple explanation    x000D   x000D  var data     x000D      code  42  x000D      items     x000D          id  1  x000D          name   foo  x000D           x000D          id  2  x000D          name   bar  x000D         x000D     x000D   x000D     x000D  1   data  is object contain  item  object   x000D  console log data   x000D   x000D     x000D  2   item  object contain array of two objects as elements   x000D  console log data items   x000D   x000D     x000D  3  you need 2nd element of array - the  1  from   0  1     x000D  console log data items 1    x000D   x000D     x000D  4  and you need value of  name  property of 2nd object-element of array    x000D  console log data items 1  name   x000D   x000D   x000D

User · Answer

Dynamic approach  In below deep data key  function  you can use arbitrary key string - in your case items 1  name  you can use array notation  i  at any level  - if key is invalid then undefined is return    x000D   x000D  let deep    o k    gt  k split      reduce  a c i    gt    x000D      let m c match           d        x000D      if m  amp  amp  a  null  amp  amp  a m 1    null  return a m 1    m 2    x000D      return a  null   a  a c   x000D    o   x000D   x000D     TEST x000D   x000D  let key    items 1  name     arbitrary deep-key x000D   x000D  let data     x000D      code  42  x000D      items     id  11  name   foo      id  22  name   bar     x000D     x000D   x000D  console log  key      deep data key     x000D   x000D   x000D

User · Answer

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    gt  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    gt  a v   data    This is just plain JavaScript  without using any third party libraries like jQuery or lodash

User · Answer

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   gt    item name        using find -   var item     find data items  function item      return item id     2       if     isUndefined item       console log  NAME   gt    item name

User · Answer

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 - gt  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 names const value   obj  some Property        property name as variable const 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 variable const 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   Working with Objects Arrays Eloquent JavaScript - Data Structures       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 items   The 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      undefined   Use 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      42     What 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  lt  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   39 for var item in list   39  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       lt - recursive call           else if  node rightChild            return getLeaf node rightChild       lt - recursive call           else      node must be a leaf node         return node           const first leaf   getLeaf root      x000D   x000D  const root     x000D      leftChild    x000D          leftChild    x000D              leftChild  null  x000D              rightChild  null  x000D              data  42 x000D             x000D          rightChild    x000D              leftChild  null  x000D              rightChild  null  x000D              data  5 x000D            x000D         x000D      rightChild    x000D          leftChild    x000D              leftChild  null  x000D              rightChild  null  x000D              data  6 x000D             x000D          rightChild    x000D              leftChild  null  x000D              rightChild  null  x000D              data  7 x000D            x000D        x000D     x000D  function getLeaf node    x000D      if  node leftChild    x000D          return getLeaf node leftChild   x000D        else if  node rightChild    x000D          return getLeaf node rightChild   x000D        else      node must be a leaf node x000D          return node  x000D        x000D    x000D   x000D  console log getLeaf root  data   x000D   x000D   x000D    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        lt - recursive call                   else               result push value                       return result       x000D   x000D  const data     x000D    code  42  x000D    items     x000D      id  1  x000D      name   foo  x000D         x000D      id  2  x000D      name   bar  x000D       x000D     x000D   x000D   x000D  function toArray obj    x000D    const result       x000D    for  const prop in obj    x000D      const value   obj prop   x000D      if  typeof value      object     x000D        result push toArray value    x000D        else   x000D        result push value   x000D        x000D      x000D    return result  x000D    x000D   x000D  console log toArray data    x000D   x000D   x000D        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     gt  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    gt  console log data items 1     Object      id  2      name   bar         proto    Object   This 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

[javascript] How can I access and process nested objects, arrays or JSON?

Examples related to javascript

Examples related to arrays

Examples related to object

Examples related to nested

Examples related to data-manipulation