Traverse all the Nodes of a JSON Object Tree with JavaScript

Question

I d like to traverse a JSON object tree  but cannot find any library for that  It doesn t seem difficult but it feels like reinventing the wheel   In XML there are so many tutorials showing how to traverse an XML tree with DOM

User · Answer

var localdata            Your json array               for  var j   0  j  lt  localdata length  j                       localdata  each function index item                                         tbl   append   lt tr gt  lt td gt     item FirstName    lt  td gt  lt  tr gt

User · Answer

function traverse o        for  var i in o            if    o i   amp  amp  typeof o i     object                 console log i  o i                traverse o i              else               console log i  o i

User · Answer

You can get all keys   values and preserve the hierarchy with this     get keys of an object or array function getkeys z     var out        for var i in z  out push i      return out        print all inside an object function allInternalObjs data  name      name   name     data     return getkeys data  reduce function olist  k       var v   data k       if typeof v      object     olist push apply olist  allInternalObjs v  name         k          else   olist push name         k           v         return olist                  run with this allInternalObjs   a     b   c     d    e  5     f    g   h      ob     This is a modification on  https   stackoverflow com a 25063574 1484447

User · Answer

x000D   x000D  var test     x000D      depth00    x000D          depth10   string  x000D            depth11  11 x000D            depth12    x000D              depth20  string  x000D                depth21 21 x000D            x000D            depth13    x000D                x000D                  depth22  2201  x000D                    depth23  2301  x000D                x000D                  x000D                  depth22  2202  x000D                    depth23  2302  x000D                x000D            x000D        x000D       depth01    x000D          depth10   string  x000D            depth11  11 x000D            depth12    x000D              depth20  string  x000D                depth21 21 x000D            x000D            depth13    x000D                x000D                  depth22  2201  x000D                    depth23  2301  x000D                x000D                  x000D                  depth22  2202  x000D                    depth23  2302  x000D                x000D            x000D        x000D        depth02   string  x000D        dpeth03  3 x000D     x000D   x000D   x000D  function traverse result  obj  preKey    x000D      if  obj  return     x000D      if  typeof obj     object     x000D          for var key in obj    x000D              traverse result  obj key    preKey           preKey          key         key   x000D            x000D        else   x000D          result push   x000D              key   preKey        x000D                val  obj x000D              x000D        x000D      return result  x000D    x000D   x000D  document getElementById  textarea   value   JSON stringify traverse     test   null  2   x000D   lt textarea style  width 100  height 600px   id  textarea  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

If you re traversing an actual JSON string then you can use a reviver function   function traverse  json  callback      JSON parse json  function  key  value        if  key                 callback call this  key  value            return value         traverse    a    b    c    d  1    e    f  2      function  key  value      console log arguments       When traversing an object   function traverse  obj  callback  trail      trail   trail          Object keys obj  forEach function  key        var value   obj key       if  Object getPrototypeOf value      Object prototype          traverse value  callback  trail concat key         else         callback call obj  key  value  trail                traverse  a   b   c   d  1    e   f  2     function  key  value  trail      console log arguments

User · Answer

A JSON object is simply a Javascript object   That s actually what JSON stands for  JavaScript Object Notation   So you d traverse a JSON object however you d choose to  traverse  a Javascript object in general   In ES2017 you would do   Object entries jsonObj  forEach   key  value     gt           do something with key and val       You can always write a function to recursively descend into the object   function traverse jsonObj        if  jsonObj     null  amp  amp  typeof jsonObj     object              Object entries jsonObj  forEach   key  value     gt                   key is either an array index or object key             traverse value                         else              jsonObj is a number or string           This should be a good starting point   I highly recommend using modern javascript methods for such things  since they make writing such code much easier

User · Answer

I wanted to use the perfect solution of  TheHippo in an anonymous function  without use of process and trigger functions  The following worked for me  sharing for novice programmers like myself     function traverse o        for  var i in o            console log  key       i      value      o i             if  o i      null  amp  amp  typeof o i     object                   going on step down in the object tree               traverse o i                            json

User · Answer

Depends on what you want to do  Here s an example of traversing a JavaScript object tree  printing keys and values as it goes   function js traverse o        var type   typeof o      if  type     object             for  var key in o                print  key     key              js traverse o key                   else           print o           js gt  foobar    foo   bar   baz   quux   zot   1  2  3   some   hash      object Object  js gt  js traverse foobar                   key   foo bar key   baz quux key   zot key   0 1 key   1 2 key   2 3 key   3 key   some hash

User · Answer

Original Simplified Answer For a newer way to do it if you don t mind dropping IE and mainly supporting more current browsers  check kangax s es6 table for compatibility   You can use es2015 generators for this  I ve updated  TheHippo s answer accordingly  Of course if you really want IE support you can use the babel JavaScript transpiler   x000D   x000D     Implementation of Traverse function  traverse o  path           for  var i in o            const itemPath   path concat i           yield  i o i  itemPath o           if  o i      null  amp  amp  typeof o i     object                   going one step down in the object tree               yield  traverse o i   itemPath                         Traverse usage    that s all    no magic  no bloated framework for var  key  value  path  parent  of traverse        foo  bar       arr  1 2 3       subo            foo2  bar2                   do something here with each key and value   console log key  value  path  parent     x000D   x000D   x000D   If you want only own enumerable properties  basically non-prototype chain properties  you can change it to iterate using Object keys and a for   of loop instead   x000D   x000D  function  traverse o path           for  var i of Object keys o             const itemPath   path concat i           yield  i o i  itemPath o           if  o i      null  amp  amp  typeof o i     object                   going one step down in the object tree               yield  traverse o i  itemPath                        that s all    no magic  no bloated framework for var  key  value  path  parent  of traverse        foo  bar       arr  1 2 3       subo            foo2  bar2                   do something here with each key and value   console log key  value  path  parent     x000D   x000D   x000D   EDIT  This edited answer solves infinite looping traversals  Stopping Pesky Infinite Object Traversals This edited answer still provides one of the added benefits of my original answer which allows you to use the provided generator function in order to use a cleaner and simple iterable interface  think using for of loops as in for var a of b  where b is an iterable and a is an element of the iterable   By using the generator function along with being a simpler api it also helps with code reuse by making it so you don t have to repeat the iteration logic everywhere you want to iterate deeply on an object s properties and it also makes it possible to break out of the loop if you would like to stop iteration earlier  One thing that I notice that has not been addressed and that isn t in my original answer is that you should be careful traversing arbitrary  i e  any  quot random quot  set of  objects  because JavaScript objects can be self referencing  This creates the opportunity to have infinite looping traversals  Unmodified JSON data however cannot be self referencing  so if you are using this particular subset of JS objects you don t have to worry about infinite looping traversals and you can refer to my original answer or other answers  Here is an example of a non-ending traversal  note it is not a runnable piece of code  because otherwise it would crash your browser tab   Also in the generator object in my edited example I opted to use Object keys instead of for in which iterates only non-prototype keys on the object  You can swap this out yourself if you want the prototype keys included  See my original answer section below for both implementations with Object keys and for in  Worse - This will infinite loop on self-referential objects  function  traverse o  path           for  var i of Object keys o             const itemPath   path concat i           yield  i o i  itemPath  o            if  o i      null  amp  amp  typeof o i     quot object quot                   going one step down in the object tree               yield  traverse o i   itemPath                        your object var o          foo  quot bar quot       arr  1 2 3       subo            foo2  quot bar2 quot               this self-referential property assignment is the only real logical difference     from the above original example which ends up making this naive traversal     non-terminating  i e  it makes it infinite loop  o o   o     that s all    no magic  no bloated framework for var  key  value  path  parent  of traverse o          do something here with each key and value   console log key  value  path  parent      To save yourself from this you can add a set within a closure  so that when the function is first called it starts to build a memory of the objects it has seen and does not continue iteration once it comes across an already seen object  The below code snippet does that and thus handles infinite looping cases  Better - This will not infinite loop on self-referential objects   x000D   x000D  function  traverse o      const memory   new Set      function   innerTraversal  o  path           if memory has o              we ve seen this object before don t iterate it       return               add the new object to our memory      memory add o       for  var i of Object keys o           const itemPath   path concat i         yield  i o i  itemPath  o          if  o i      null  amp  amp  typeof o i     object               going one step down in the object tree           yield  innerTraversal o i   itemPath                       yield  innerTraversal o        your object var o        foo  bar     arr  1 2 3     subo        foo2  bar2              this self-referential property assignment is the only real logical difference     from the above original example which makes more naive traversals     non-terminating  i e  it makes it infinite loop  o o   o       console log o     that s all    no magic  no bloated framework for var  key  value  path  parent  of traverse o          do something here with each key and value   console log key  value  path  parent     x000D   x000D   x000D    EDIT  All above examples in this answer have been edited to include a new path variable yielded from the iterator as per  supersan s request  The path variable is an array of strings where each string in the array represents each key that was accessed to get to the resulting iterated value from the original source object  The path variable can be fed into lodash s get function method  Or you could write your own version of lodash s get which handles only arrays like so   x000D   x000D  function get  object  path      return path reduce  obj  pathItem    gt  obj   obj pathItem    undefined  object      const example    a   1 2 3   b  4  c    d    foo          these paths exist on the object console log get example    a    0      console log get example    c    d    0      console log get example    b         these paths do not exist on the object console log get example    e    f    g      console log get example    b    f    g      x000D   x000D   x000D   You could also make a set function like so   x000D   x000D  function set  object  path  value        const obj   path slice 0 -1  reduce  obj  pathItem    gt  obj   obj pathItem    undefined  object      if obj  amp  amp  obj path path length - 1              obj path path length - 1     value            return object     const example    a   1 2 3   b  4  c    d    foo          these paths exist on the object console log set example    a    0    2    console log set example    c    d    0     qux     console log set example    b    12       these paths do not exist on the object console log set example    e    f    g    false    console log set example    b    f    g    null    x000D   x000D   x000D   EDIT Sep  2020  I added a parent for quicker access of the previous object  This could allow you to more quickly build a reverse traverser  Also you could always modify the traversal algorithm to do breadth first search instead of depth first which is actually probably more predictable in fact here s a TypeScript version with Breadth First Search  Since this is a JavaScript question I ll put the JS version here   x000D   x000D  var TraverseFilter   function  TraverseFilter            prevents the children from being iterated         TraverseFilter  reject      reject      TraverseFilter     TraverseFilter         function  traverse o        const memory   new Set        function  innerTraversal root            const queue               queue push  root                while  queue length  gt  0                const  o  path    queue shift                if  memory has o                        we ve seen this object before don t iterate it                 continue                               add the new object to our memory              memory add o               for  var i of Object keys o                     const item   o i                   const itemPath   path concat  i                    const filter   yield  i  item  itemPath  o                   if  filter     TraverseFilter reject                      continue                  if  item     null  amp  amp  typeof item      object                           going one step down in the object tree                       queue push  item  itemPath                                                        yield  innerTraversal o       your object var o         foo   bar       arr   1  2  3       subo            foo2   bar2               this self-referential property assignment is the only real logical difference    from the above original example which makes more naive traversals    non-terminating  i e  it makes it infinite loop  o o   o    that s all    no magic  no bloated framework for  const  key  value  path  parent  of traverse o            do something here with each key and value     console log key  value  path  parent     x000D   x000D   x000D

User · Answer

The best solution for me was the following    simple and without using any framework      var doSomethingForAll   function  arg           if  arg    undefined  amp  amp  arg length  gt  0                arg map function  item                         do something for item                   doSomethingForAll  item subitem

User · Answer

Most Javascript engines do not optimize tail recursion  this might not be an issue if your JSON isn t deeply nested   but I usually err on the side of caution and do iteration instead  e g   function traverse o  fn        const stack    o       while  stack length            const obj   stack shift            Object keys obj  forEach  key    gt                fn key  obj key   obj              if  obj key  instanceof Object                    stack unshift obj key                   return                                   const o         name   Max       legal  false      other            name   Maxwell           nested                legal  true                    const fx    key  value  obj    gt  console log key  value  traverse o  fx

User · Answer

There s a new library for traversing JSON data with JavaScript that supports many different use cases   https   npmjs org package traverse  https   github com substack js-traverse  It works with all kinds of JavaScript objects  It even detects cycles   It provides the path of each node  too

User · Answer

We use object-scan for many data processing tasks  It s powerful once you wrap your head around it  Here is how you could do basic traversal  x000D   x000D     const objectScan   require  object-scan     const obj     foo   bar   arr   1  2  3   subo    foo2   bar2        objectScan             reverse  false    filterFn     key  value      gt        console log key  value          obj        gt     foo    bar      gt     arr   0   1      gt     arr   1   2      gt     arr   2   3      gt     arr      1  2  3        gt     subo    foo2    bar2      gt     subo      foo2   bar2    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

My Script       op needed       callback func   function val      var i  j  len    results         for  j   0  len   val length  j  lt  len  j          i   val j       if  i  children   length     0          call func i  children           else         op needed push i  rel path                 return op needed       Input JSON                    id   null            name    output               asset type assoc                 rel path    output            children                                    id   null                    name    output                       asset type assoc                         rel path    output f1                    children                                                    id   null                            name    v                             asset type assoc                                 rel path    output f1 ver                            children                                                                              Function Call   callback func inp json     Output as per my Need     output f1 ver

User · Answer

I ve created library to traverse and edit deep nested JS objects  Check out API here  https   github com dominik791  You can also play with the library interactively using demo app  https   dominik791 github io obj-traverse-demo   Examples of usage  You should always have root object which is the first parameter of each method   var rootObj       name   rootObject     children                 name    child1          children                               name    child2          children                         The second parameter is always the name of property that holds nested objects  In above case it would be  children    The third parameter is an object that you use to find object objects that you want to find modify delete  For example if you re looking for object with id equal to 1  then you will pass   id  1  as the third parameter   And you can    findFirst rootObj   children     id  1    to find first object     with id     1 findAll rootObj   children     id  1    to find all objects     with id     1 findAndDeleteFirst rootObj   children     id  1    to delete first matching object findAndDeleteAll rootObj   children     id  1    to delete all matching objects   replacementObj is used as the last parameter in two last methods    findAndModifyFirst rootObj   children     id  1      id  2  name   newObj    to change first found object with id     1 to the   id  2  name   newObj   findAndModifyAll rootObj   children     id  1      id  2  name   newObj    to change all objects with id     1 to the   id  2  name   newObj

User · Answer

If you think jQuery is kind of overkill for such a primitive task  you could do something like that     your object var o          foo  bar       arr  1 2 3       subo            foo2  bar2              called with every property and its value function process key value        console log key         value      function traverse o func        for  var i in o            func apply this  i o i               if  o i      null  amp  amp  typeof o i     object                   going one step down in the object tree               traverse o i  func                        that s all    no magic  no bloated framework traverse o process

[javascript] Traverse all the Nodes of a JSON Object Tree with JavaScript

Examples related to javascript

Examples related to json