Js обход json дерева

Traverse all the Nodes of a JSON Object Tree with JavaScript

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 🙁

Made iterator IIFE github.com/eltomjan/ETEhomeTools/blob/master/HTM_HTA/… it has predefined (basic) DepthFirst & BreadthFirst next and ability to move inside JSON structure without recursion.

17 Answers 17

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 && 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); 

@ParchedSquid No. If you look at the API docs for apply() the first parameter is the this value in the target function, whereas o should be the first parameter to the function. Setting it to this (which would be the traverse function) is a bit odd though, but it’s not like process uses the this reference anyway. It could just as well have been null.

For jshint in strict mode though you may need to add /*jshint validthis: true */ above func.apply(this,[i,o[i]]); to avoid the error W040: Possible strict violation. caused by the use of this

@jasdeepkhalsa: That true. But at the time of the writing of the answer jshint wasn’t even started as a project for one and a half year.

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.

Object.entries(jsonObj).forEach((Js обход json дерева) => < // do something with key and val >); 

You can always write a function to recursively descend into the object:

function traverse(jsonObj) < if( jsonObj !== null && typeof jsonObj == "object" ) < Object.entries(jsonObj).forEach((Js обход json дерева) =>< // 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.

Avoid traverse(v) where v==null, because (typeof null == «object») === true. function traverse(jsonObj) < if(jsonObj && typeof jsonObj == "object" ) < .

I hate to sound pedantic, but I think there is already a lot of confusion about this, so just for the sake of clarity I say the following. JSON and JavaScript Objects are not the same thing. JSON is based on the formatting of JavaScript objects, but JSON is just the notation; it is a string of characters representing an object. All JSON can be «parsed» into a JS object, but not all JS objects can be «stringified» into JSON. For example self referential JS objects can’t be stringified.

If the method is meant to do anything other than log you should check for null, null is still an object.

There’s a new library for traversing JSON data with JavaScript that supports many different use cases.

It works with all kinds of JavaScript objects. It even detects cycles.

It provides the path of each node, too.

Yes. It’s just called traverse there. And they have a lovely web page! Updating my answer to include it.

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.

// 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 && 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 Js обход json дерева 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); >

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:

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 && 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 Js обход json дерева 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); >

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 «random» 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 && typeof(o[i])=="object") < //going one step down in the object tree!! yield* traverse(o[i], itemPath); >> > //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 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 Js обход json дерева 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:

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 && 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 Js обход json дерева of traverse(o)) < // do something here with each key and value console.log(key, value, path, parent); >

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:

function get (object, path) < return path.reduce((obj, pathItem) =>obj ? obj[pathItem] : undefined, object); > const example = >; // 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"]));

You could also make a set function like so:

function set (object, path, value) < const obj = path.slice(0,-1).reduce((obj, pathItem) =>obj ? obj[pathItem] : undefined, object) if(obj && obj[path[path.length - 1]]) < obj[path[path.length - 1]] = value; >return object; > const example = >; // 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));

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:

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 >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 && 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 Js обход json дерева of traverse(o)) < // do something here with each key and value console.log(key, value, path, parent); >

Источник

How to Recursively Traverse JSON Objects

Curated backend podcasts, videos and articles. All free.

If you’re looking to become a backend developer, or just stay up-to-date with the latest backend technologies and trends, you found the right place. Subscribe below to get a copy of our newsletter, The Boot.dev Beat, each month in your inbox. No spam, no sponsors, totally free.

I’ve found that it’s pretty rare that I need recursion in application code, but every once in a while I need to write a function that operates on a tree of unknown depth, such as a JSON object, and that’s often best solved recursively. Even though recursion is rare, it is important to recognize when a problem is best solved recursively so that we can implement a good solution when the time comes.

🔗 What is Recursion?

Function recursion is a process in computer science that occurs when a function calls itself.

  In the code above, printArrayRecursive prints one element from the list, then calls itself again with the next index. Each successive call to itself prints the next element, and so on. The recursion continues until the base case is reached. In our example, the base case is when the index is equal to the array’s length.

The same function looks quite a bit different in the iterative world, which you are probably more familiar with:

In the case of simply printing the items of a list, the iterative approach is better for a number of reasons:

• Easier to read and understand
• Less memory utilization — Recursive functions keep all calls on the stack until the base case is reached
• Faster compute time — Recursive functions come with the overhead of an entire function call for each step
• If there is a bug in the recursion, the program is likely to enter an infinite loop

🔗 Why Use Recursion?

Iterative programs can be written using recursion, and all recursive programs can be written using iteration. Both systems are, unless limited by the implementation, Turing complete.

The primary reason to choose recursion over iteration is simplicity.

Many years ago the majority of compilers and interpreters didn’t support the syntax for iteration. For-loops simply didn’t exist. This is primarily because it’s much simpler to write an interpreter that can handle recursion than it is to write one that supports loops.

Even if a compiler supports loops, some problems are easier to solve with a recursive function. A good example is tree traversal. I often write recursive functions to find every property of any JSON object, or to search every file in a folder that may have an infinite number of nested subfolders.

🔗 Examples

Recursively print all properties of a JSON object:

 Recursively print all the filenames of a folder, and its subfolders, and their subfolders, ad infinitum.

 When trying to figure out how to write a function recursively, think:

What is my base case? What should stop the recursion from continuing?

Once that’s hammered out, the rest of the function just needs to answer the questions,

What do I want to do with my current value?

How do I call myself to get to the next value?

Recursion is an important principle to understand for any programmer, and I hope this helps you be just a little better! If you’re interested in learning more about recursion and functional programming principles, take a look at our functional programming course.

Источник