Iterate through Nested JavaScript Objects

Question

I m trying to iterate through a nested object to retrieve a specific object identified by a string  In the sample object below  the identifier string is the  label  property  I can t wrap my head around how to iterate down through the tree to return the appropriate object  Any help or suggestions would be greatly appreciated   var cars       label   Autos     subs                label   SUVs         subs                        label   Trucks         subs                        label   2 Wheel Drive             subs                                    label   4 Wheel Drive             subs                                label   Ford                 subs                                                label   Chevrolet                 subs                                                                    label   Sedan         subs

User · Answer

In case you want to deeply iterate into a complex  nested  object for each key  amp  value  you can do so using Object keys    recursively   const iterate    obj    gt        Object keys obj  forEach key   gt         console log  key    key   value    obj key          if  typeof obj key       object                 iterate obj key                        REPL example

User · Answer

var findObjectByLabel   function objs  label      if objs label     label         return objs           else      if objs subs         for var i in objs subs           let found   findObjectByLabel objs subs i  label          if found  return found                       findObjectByLabel cars   Ford

User · Answer

In typescript with object generic way  it could be alse implemented  export interface INestedIterator lt T gt        getChildren    T       export class NestedIterator       private static forEach lt T extends INestedIterator lt T gt  gt  obj  T  fn    obj  T    gt  void    void                 fn obj               if  obj getChildren   length                for  const item of obj getChildren                      NestedIterator forEach item  fn                                                 than you can implement interface INestedIterator lt T gt   class SomeNestedClass implements INestedIterator lt SomeNestedClass gt       items  SomeNestedClass        getChildren             return this items           and then just call NestedIterator forEach someNesteObject   item    gt        console log item        if you don t want use interfaces and strongly typed classes  just remove types export class NestedIterator       private static forEach obj  any  fn    obj  any    gt  void    void                 fn obj               if  obj items  amp  amp  obj items length                for  const item of obj items                    NestedIterator forEach item  fn

User · Answer

You can have a recursive function with a parse function built within it    Here how it works   x000D   x000D     recursively loops through nested object and applys parse function x000D  function parseObjectProperties obj  parse    x000D    for  var k in obj    x000D      if  typeof obj k       object   amp  amp  obj k      null    x000D        parseObjectProperties obj k   parse  x000D        else if  obj hasOwnProperty k     x000D        parse obj  k  x000D        x000D      x000D    x000D                   x000D   x000D   x000D     example x000D  var foo     x000D    bar  a   x000D    child   x000D      b   b   x000D      grand   x000D        greatgrand    x000D          c  c  x000D          x000D        x000D      x000D    x000D   x000D   x000D     just console properties x000D  parseObjectProperties foo  function obj  prop    x000D    console log prop         obj prop   x000D     x000D   x000D     add character a on every property x000D  parseObjectProperties foo  function obj  prop    x000D    obj prop      a  x000D     x000D  console log foo  x000D   x000D   x000D

User · Answer

Here is a concise breadth-first iterative solution  which I prefer to recursion   const findCar   function car        const carSearch    cars          while carSearch length              let item   carSearch shift              if  item label     car  return true            carSearch push    item subs                  return false

User · Answer

You can get through every object in the list and get which value you want  Just pass an object as first parameter in the function call and object property which you want as second parameter  Change object with your object    x000D   x000D  const treeData      x000D           jssType    fieldset   x000D           jssSelectLabel    Fieldset  with legend    x000D           jssSelectGroup    jssItem   x000D           jsName    fieldset-715   x000D           jssLabel    Legend   x000D           jssIcon    typcn typcn-folder   x000D           expanded   true  x000D           children      x000D                   jssType    list-ol   x000D                   jssSelectLabel    List - ol   x000D                   jssSelectGroup    jssItem   x000D                   jsName    list-ol-147   x000D                   jssLabel       x000D                   jssIcon    dashicons dashicons-editor-ol   x000D                   noChildren   false  x000D                   expanded   true  x000D                   children      x000D                           jssType    list-li   x000D                           jssSelectLabel    List Item - li   x000D                           jssSelectGroup    jssItem   x000D                           jsName    list-li-752   x000D                           jssLabel       x000D                           jssIcon    dashicons dashicons-editor-ul   x000D                           noChildren   false  x000D                           expanded   true  x000D                           children      x000D                               jssType    text   x000D                               jssSelectLabel    Text  short text    x000D                               jssSelectGroup    jsTag   x000D                               jsName    text-422   x000D                               jssLabel    Your Name  required    x000D                               jsRequired   true  x000D                               jsTagOptions      x000D                                       jsOption       x000D                                       optionLabel    Default value   x000D                                       optionType    input  x000D                                     x000D                                    x000D                                       jsOption    placeholder   x000D                                       isChecked   false  x000D                                       optionLabel    Use this text as the placeholder of the field   x000D                                       optionType    checkbox  x000D                                     x000D                                    x000D                                       jsOption    akismet author email   x000D                                       isChecked   false  x000D                                       optionLabel    Akismet - this field requires author s email address   x000D                                       optionType    checkbox  x000D                                    x000D                                 x000D                               jsValues       x000D                               jsPlaceholder   false  x000D                               jsAkismetAuthor   false  x000D                               jsIdAttribute       x000D                               jsClassAttribute       x000D                               jssIcon    typcn typcn-sort-alphabetically   x000D                               noChildren   true x000D                             x000D                         x000D                        x000D                           jssType    list-li   x000D                           jssSelectLabel    List Item - li   x000D                           jssSelectGroup    jssItem   x000D                           jsName    list-li-538   x000D                           jssLabel       x000D                           jssIcon    dashicons dashicons-editor-ul   x000D                           noChildren   false  x000D                           expanded   true  x000D                           children      x000D                               jssType    email   x000D                               jssSelectLabel    Email   x000D                               jssSelectGroup    jsTag   x000D                               jsName    email-842   x000D                               jssLabel    Email Address  required    x000D                               jsRequired   true  x000D                               jsTagOptions      x000D                                       jsOption       x000D                                       optionLabel    Default value   x000D                                       optionType    input  x000D                                     x000D                                    x000D                                       jsOption    placeholder   x000D                                       isChecked   false  x000D                                       optionLabel    Use this text as the placeholder of the field   x000D                                       optionType    checkbox  x000D                                     x000D                                    x000D                                       jsOption    akismet author email   x000D                                       isChecked   false  x000D                                       optionLabel    Akismet - this field requires author s email address   x000D                                       optionType    checkbox  x000D                                    x000D                                 x000D                               jsValues       x000D                               jsPlaceholder   false  x000D                               jsAkismetAuthorEmail   false  x000D                               jsIdAttribute       x000D                               jsClassAttribute       x000D                               jssIcon    typcn typcn-mail   x000D                               noChildren   true x000D                             x000D                         x000D                        x000D                           jssType    list-li   x000D                           jssSelectLabel    List Item - li   x000D                           jssSelectGroup    jssItem   x000D                           jsName    list-li-855   x000D                           jssLabel       x000D                           jssIcon    dashicons dashicons-editor-ul   x000D                           noChildren   false  x000D                           expanded   true  x000D                           children      x000D                               jssType    textarea   x000D                               jssSelectLabel    Textarea  long text    x000D                               jssSelectGroup    jsTag   x000D                               jsName    textarea-217   x000D                               jssLabel    Your Message   x000D                               jsRequired   false  x000D                               jsTagOptions      x000D                                       jsOption       x000D                                       optionLabel    Default value   x000D                                       optionType    input  x000D                                     x000D                                    x000D                                       jsOption    placeholder   x000D                                       isChecked   false  x000D                                       optionLabel    Use this text as the placeholder of the field   x000D                                       optionType    checkbox  x000D                                    x000D                                 x000D                               jsValues       x000D                               jsPlaceholder   false  x000D                               jsIdAttribute       x000D                               jsClassAttribute       x000D                               jssIcon    typcn typcn-document-text   x000D                               noChildren   true x000D                             x000D                        x000D                    x000D                 x000D                x000D                   jssType    paragraph   x000D                   jssSelectLabel    Paragraph - p   x000D                   jssSelectGroup    jssItem   x000D                   jsName    paragraph-993   x000D                   jssContent      Required   x000D                   jssIcon    dashicons dashicons-editor-paragraph   x000D                   noChildren   true x000D                x000D            x000D           x000D         x000D        x000D           jssType    submit   x000D           jssSelectLabel    Submit   x000D           jssSelectGroup    jsTag   x000D           jsName    submit-704   x000D           jssLabel    Send   x000D           jsValues       x000D           jsRequired   false  x000D           jsIdAttribute       x000D           jsClassAttribute       x000D           jssIcon    typcn typcn-mail   x000D           noChildren   true x000D         x000D       x000D     x000D   x000D   x000D   x000D   x000D   function findObjectByLabel obj  label    x000D         for var elements in obj   x000D             if  elements     label   x000D                  console log obj elements    x000D               x000D              if typeof obj elements       object    x000D              findObjectByLabel obj elements    jssType    x000D               x000D             x000D           x000D     x000D   x000D   findObjectByLabel treeData   jssType    x000D   x000D   x000D

User · Answer

var findObjectByLabel   function obj  label       var foundLabel null    if obj label     label           return obj        for var i in obj         if Array isArray obj i    true                for var j 0 j lt obj i  length j                          foundLabel   findObjectByLabel obj i   label                       else if typeof obj i        object                 if obj hasOwnProperty i                                    foundLabel   findObjectByLabel obj i   label                                    if foundLabel                  return foundLabel             return null      var x   findObjectByLabel cars   Sedan    alert JSON stringify x

User · Answer

To increase performance for further tree manipulation is good to transform tree view into line collection view  like  obj1  obj2  obj3   You can store parent-child object relations to easy navigate to parent child scope   Searching element inside collection is more efficient then find element inside tree  recursion  addition dynamic function creation  closure

User · Answer

The following code assumes no circular references  and assumes subs is always an array  and not null in leaf nodes    function find haystack  needle      if  haystack label     needle  return haystack    for  var i   0  i  lt  haystack subs length  i           var result   find haystack subs i   needle       if  result  return result        return null

User · Answer

modify from Peter Olson s answer  https   stackoverflow com a 8085118    can avoid string value  obj     typeof obj      string   can custom your key     var findObjectByKeyVal  function  obj  key  val      if   obj     typeof obj      string          return null       if  obj key      val        return obj        for  var i in obj        if  obj hasOwnProperty i           var found   findObjectByKeyVal obj i   key  val        if  found            return found                     return null

User · Answer

-           function forEachNested O  f  cur       O     O       ensure that f is called with the top-level object     while  O length     keep on processing the top item on the stack         if              f  cur   O pop      amp  amp     do not spider down if  f  returns true            cur instanceof Object  amp  amp     ensure cur is an object  but not null              Object  Array  includes cur constructor    limit search to    and              O push apply O  Object values cur      search all values deeper inside    To use the above function  pass the array as the first argument and the callback function as the second argument  The callback function will receive 1 argument when called  the current item being iterated   x000D   x000D   function    use strict    var cars     label   Autos   subs     label   SUVs   subs        label   Trucks   subs     label   2 Wheel Drive   subs        label   4 Wheel Drive   subs     label   Ford   subs        label   Chevrolet   subs            label   Sedan   subs          var lookForCar   prompt  enter the name of the car you are looking for  e g   Ford         Ford   lookForCar   lookForCar replace      w  g          incaseif the user put quotes or something around their input lookForCar   lookForCar toLowerCase     var foundObject   null  forEachNested cars  function currentValue       if currentValue constructor     Object  amp  amp        currentValue label toLowerCase       lookForCar            foundObject   currentValue            if  foundObject     null        console log  Found the object      JSON stringify foundObject  null    t       else       console log  Nothing found with a label of      lookForCar               function forEachNested O  f  cur       O     O       ensure that f is called with the top-level object     while  O length     keep on processing the top item on the stack         if              f  cur   O pop      amp  amp     do not spider down if  f  returns true            cur instanceof Object  amp  amp     ensure cur is an object  but not null              Object  Array  includes cur constructor    limit search to    and              O push apply O  Object values cur      search all values deeper inside          x000D   x000D   x000D   A  quot cheat quot  alternative might be to use JSON stringify to iterate  HOWEVER  JSON stringify will call the toString method of each object it passes over  which may produce undesirable results if you have your own special uses for the toString  function forEachNested O  f  v       typeof O      quot function quot    O v    JSON stringify O forEachNested bind 0 f        return v     so that JSON stringify keeps on recursing     x000D   x000D   function    use strict    var cars     label   Autos   subs     label   SUVs   subs        label   Trucks   subs     label   2 Wheel Drive   subs        label   4 Wheel Drive   subs     label   Ford   subs        label   Chevrolet   subs            label   Sedan   subs          var lookForCar   prompt  enter the name of the car you are looking for  e g   Ford         Ford   lookForCar   lookForCar replace      w  g          incaseif the user put quotes or something around their input lookForCar   lookForCar toLowerCase     var foundObject   null  forEachNested cars  function currentValue       if currentValue constructor     Object  amp  amp        currentValue label toLowerCase       lookForCar            foundObject   currentValue            if  foundObject     null      console log  Found the object      JSON stringify foundObject  null    t     else     console log  Nothing found with a label of      lookForCar             function forEachNested O  f  v       typeof O      function    O v    JSON stringify O forEachNested bind 0 f        return v     so that JSON stringify keeps on recursing         x000D   x000D   x000D   However  while the above method might be useful for demonstration purposes  Object values is not supported by Internet Explorer and there are many terribly illperformant places in the code   the code changes the value of input parameters  arguments   lines 2  amp  5   the code calls Array prototype push and Array prototype pop on every single item  lines 5  amp  8   the code only does a pointer-comparison for the constructor which does not work on out-of-window objects  line 7   the code duplicates the array returned from Object values  line 8   the code does not localize window Object or window Object values  line 9   and the code needlessly calls Object values on arrays  line 8    Below is a much much faster version that should be far faster than any other solution  The solution below fixes all of the performance problems listed above  However  it iterates in a much different way  it iterates all the arrays first  then iterates all the objects  It continues to iterate its present type until complete exhaustion including iteration subvalues inside the current list of the current flavor being iterated  Then  the function iterates all of the other type  By iterating until exhaustion before switching over  the iteration loop gets hotter than otherwise and iterates even faster  This method also comes with an added advantage  the callback which is called on each value gets passed a second parameter  This second parameter is the array returned from Object values called on the parent hash Object  or the parent Array itself  var getValues   Object values     localize var type toString   Object prototype toString  function forEachNested objectIn  functionOnEach        quot use strict quot       functionOnEach  objectIn                for iterating arbitrary objects      var allLists             if  type toString call  objectIn         object Object            allLists push  getValues objectIn         var allListsSize   allLists length 0     the length of allLists     var indexLists   0              for iterating arrays      var allArray             if  type toString call  objectIn         object Array            allArray push  objectIn        var allArraySize   allArray length 0     the length of allArray     var indexArray   0           do              keep cycling back and forth between objects and arrays                  for     indexArray  lt  allArraySize  indexArray indexArray 1 0                var currentArray   allArray indexArray               var currentLength   currentArray length              for  var curI 0  curI  lt  currentLength  curI curI 1 0                    var arrayItemInner   currentArray curI                   if  arrayItemInner     undefined  amp  amp                       currentArray hasOwnProperty arrayItemInner                         continue     the value at this position doesn t exist                                    functionOnEach arrayItemInner  currentArray                   if  typeof arrayItemInner      object                         var typeTag   type toString call  arrayItemInner                        if  typeTag       object Object                                 Array prototype push returns the new length                         allListsSize allLists push  getValues arrayItemInner                           else if  typeTag       object Array                              allArraySize allArray push  arrayItemInner                                                                      allArray indexArray    null     free up memory to reduce overhead                             for     indexLists  lt  allListsSize  indexLists indexLists 1 0                var currentList   allLists indexLists               var currentLength   currentList length              for  var curI 0  curI  lt  currentLength  curI curI 1 0                    var listItemInner   currentList curI                   functionOnEach listItemInner  currentList                   if  typeof listItemInner      object                         var typeTag   type toString call  listItemInner                        if  typeTag       object Object                                 Array prototype push returns the new length                         allListsSize allLists push  getValues listItemInner                           else if  typeTag       object Array                              allArraySize allArray push  listItemInner                                                                      allLists indexLists    null     free up memory to reduce overhead                 while  indexLists  lt  allListsSize    indexArray  lt  allArraySize       x000D   x000D   function    use strict    var cars     label   Autos   subs     label   SUVs   subs        label   Trucks   subs     label   2 Wheel Drive   subs        label   4 Wheel Drive   subs     label   Ford   subs        label   Chevrolet   subs            label   Sedan   subs          var lookForCar   prompt  enter the name of the car you are looking for  e g   Ford         Ford   lookForCar   lookForCar replace      w  g          incaseif the user put quotes or something around their input lookForCar   lookForCar toLowerCase         var getValues   Object values     localize var type toString   Object prototype toString  function forEachNested objectIn  functionOnEach       functionOnEach  objectIn                for iterating arbitrary objects      var allLists             if  type toString call  objectIn         object Object            allLists push  getValues objectIn         var allListsSize   allLists length 0     the length of allLists     var indexLists   0              for iterating arrays      var allArray             if  type toString call  objectIn         object Array            allArray push  objectIn        var allArraySize   allArray length 0     the length of allArray     var indexArray   0           do              keep cycling back and forth between objects and arrays                  for     indexArray  lt  allArraySize  indexArray indexArray 1 0                var currentArray   allArray indexArray               var currentLength   currentArray length              for  var curI 0  curI  lt  currentLength  curI curI 1 0                    var arrayItemInner   currentArray curI                   if  arrayItemInner     undefined  amp  amp                       currentArray hasOwnProperty arrayItemInner                         continue     the value at this position doesn t exist                                    functionOnEach arrayItemInner  currentArray                   if  typeof arrayItemInner      object                         var typeTag   type toString call  arrayItemInner                        if  typeTag       object Object                                 Array prototype push returns the new length                         allListsSize allLists push  getValues arrayItemInner                           else if  typeTag       object Array                              allArraySize allArray push  arrayItemInner                                                                      allArray indexArray    null     free up memory to reduce overhead                             for     indexLists  lt  allListsSize  indexLists indexLists 1 0                var currentList   allLists indexLists               var currentLength   currentList length              for  var curI 0  curI  lt  currentLength  curI curI 1 0                    var listItemInner   currentList curI                   functionOnEach listItemInner  currentList                   if  typeof listItemInner      object                         var typeTag   type toString call  listItemInner                        if  typeTag       object Object                                 Array prototype push returns the new length                         allListsSize allLists push  getValues listItemInner                           else if  typeTag       object Array                              allArraySize allArray push  listItemInner                                                                      allLists indexLists    null     free up memory to reduce overhead                 while  indexLists  lt  allListsSize    indexArray  lt  allArraySize         var foundObject   null  forEachNested cars  function currentValue       if currentValue constructor     Object  amp  amp        currentValue label toLowerCase       lookForCar            foundObject   currentValue            if  foundObject     null        console log  Found the object      JSON stringify foundObject  null    t       else       console log  Nothing found with a label of      lookForCar                     x000D   x000D   x000D   If you have a problem with circular references  e g  having object A s values being object A itself in such as that object A contains itself   or you just need the keys then the following slower solution is available  function forEachNested O  f       O   Object entries O       var cur      function applyToEach x  return cur 1  x 0       x 1        while  O length           cur   O pop            f cur 0   cur 1            if  typeof cur 1       object   amp  amp  cur 1  constructor     Object  amp  amp              O some applyToEach               O push apply O  Object entries cur 1               Because these methods do not use any recursion of any sort  these functions are well suited for areas where you might have thousands of levels of depth  The stack limit varies greatly from browser to browser  so recursion to an unknown depth is not very wise in Javascript

User · Answer

The following snippet will iterate over nested objects  Objects within the objects  Feel free to change it to meet your requirements  Like if you want to add array support make if-else and make a function that loop through arrays       x000D   x000D  var p     x000D       p1    value1   x000D       p2    value2   x000D       p3    value3   x000D       p4     x000D           p4    value 4  x000D        x000D     x000D   x000D   x000D   x000D      x000D      Printing a nested javascript object x000D     x000D  function jsonPrinter obj    x000D   x000D      for  let key in obj    x000D             checking if it s nested x000D          if  obj hasOwnProperty key   amp  amp   typeof obj key       object      x000D              jsonPrinter obj key   x000D            else   x000D                 printing the flat attributes x000D              console log key     - gt      obj key    x000D            x000D        x000D    x000D   x000D  jsonPrinter p   x000D   x000D   x000D

User · Answer

I made a pick method like lodash pick  It is not exactly good like lodash   pick  but you can pick any property event any nested property     You just have to pass your object as a first argument then an array of properties in which you want to get their value as a second argument    for example   let car     name   BMW   meta    model  2018  color   white    pick car   name   model       Output will be  name   BMW   model  2018    Code    const pick    object  props    gt      let newObject         if  isObjectEmpty object   return        Object keys object  length  lt   0     for  let i   0  i  lt  props length  i          Object keys object  forEach key   gt          if  key     props i   amp  amp  object hasOwnProperty props i              newObject key    object key           else if  typeof object key       object             Object assign newObject  pick object key    props i                            return newObject      function isObjectEmpty obj      for  let key in obj        if  obj hasOwnProperty key   return false        return true    export default pick    and here is the link to live example with unit tests

User · Answer

Here is a solution using object-scan  x000D   x000D     const objectScan   require  object-scan     const cars     label   Autos   subs      label   SUVs   subs          label   Trucks   subs      label   2 Wheel Drive   subs          label   4 Wheel Drive   subs      label   Ford   subs          label   Chevrolet   subs                  label   Sedan   subs             const find    haystack  label    gt  objectScan      label        filterFn     value      gt  value     label    rtn   parent     abort  true    haystack    console log find cars   Sedan          gt    label   Sedan   subs       console log find cars   SUVs          gt    label   SUVs   subs       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

You can create a recursive function like this to do a depth-first traversal of the cars object   var findObjectByLabel   function obj  label        if obj label     label    return obj        for var i in obj            if obj hasOwnProperty i                var foundLabel   findObjectByLabel obj i   label               if foundLabel    return foundLabel                        return null       which can be called like so  findObjectByLabel car   Chevrolet

[javascript] Iterate through Nested JavaScript Objects

Examples related to javascript

Examples related to iteration