jQuery - How to recursively loop over an object's nested properties?

Question

Is there are a way to recursively loop over all the nested properties of a JS/jQuery object?

For example, given this object

var x = {
    'name': 'a',
    'level': 1,
    'children': [{
        'name': 'b',
        'level': 2,
        'children': [{
            'name': 'c',
            'level': 3,
            'children': [{
            ...
            }]
        }]},
        ...
    }]
}

how could I loop over the objects named 'a' and their children, 'b' and their children, 'c' and their children, ad infinitum?

What is your intend for this function? List all the child objects, count them? — KyorCode
– KyorCode, Commented Sep 6, 2012 at 8:03
check children.lenght if >0 , call your function recursively. — Yograj Gupta
– Yograj Gupta, Commented Sep 6, 2012 at 8:05
@KyorCode The purpose of the function is to do something on a property if it meets certain conditions. It could easily be done if the object structure is known beforehand but as it is, the object structure is variable. — developarvin
– developarvin, Commented Sep 6, 2012 at 8:06
@YograjGupta The 'children' property is just an example. I actually do not know which of the properties are object themselves. — developarvin
– developarvin, Commented Sep 6, 2012 at 8:07

Asciiom · Accepted Answer · 2012-09-06 08:20:17Z

19

A recursive approach seems best, something like this:

function recursiveIteration(object) {
    for (var property in object) {
        if (object.hasOwnProperty(property)) {
            if (typeof object[property] == "object"){
                recursiveIteration(object[property]);
            }else{
                //found a property which is not an object, check for your conditions here
            }
        }
    }
}

This is a working fiddle

edited Sep 6, 2012 at 8:20

answered Sep 6, 2012 at 8:14

Asciiom

9,9757 gold badges42 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fengd · Accepted Answer · 2012-09-06 08:22:27Z

1

function iterate(obj){
    for(var key in obj)
    {
        if(typeof(obj["key"]) == "object"){
            iterate(obj["key"]);
        }
        else{
            console.log(key + ": " + obj["key"];
        }
    }

}

answered Sep 6, 2012 at 8:22

fengd

7,5793 gold badges44 silver badges44 bronze badges

Comments

Ungureanu Liviu · Accepted Answer · 2012-09-06 08:47:12Z

1

Your JSON is not well formatted but you can "visit" each item as below:

<html>
<head>
    <title>test</title>
    <script type="text/javascript">
        var x = {
                "name": "a",
                "level": 1,
                "children": [
                    {
                        "name": "b",
                        "level": 2,
                        "children": [
                            {
                                "name": "c",
                                "level": 3,
                                "children": [
                                    {
                                        "sss": 23
                                    }
                                ]
                            }
                        ]
                    }
                ]
            };

         function visit(obj){
            for(var prop in obj){
                if(typeof(obj[prop]) == 'object'){
                    if(Object.prototype.toString.call(obj[prop]) == '[object Array]'){
                        for(var i = 0; i < obj[prop].length; i++){
                            document.write("<br />the element " + prop + " (array) was visited");
                            visit(obj[prop][i]);                                
                        }
                    }else{
                        document.write("<br />the element " + prop + " (object) was visited");
                        visit(obj[prop]);
                    }
                }else{
                    document.write("<br />the element " + prop + " = " + obj[prop] + " was visited");
                }
            }
        }

        visit(x);

    </script>
</head>
<body>

</body>

edited Sep 6, 2012 at 8:47

answered Sep 6, 2012 at 8:13

Ungureanu Liviu

4,1444 gold badges41 silver badges42 bronze badges

3 Comments

jfriend00 Over a year ago

typeof array === "object' so you can't test if it's an array that way.

Ungureanu Liviu Over a year ago

@jfriend00 you're right. This make my answer not so useful and I think I'll remove it.

jfriend00 Over a year ago

You don't have to remove it - just fix it: ajaxian.com/archives/…

Steve Veerman · Accepted Answer · 2014-02-07 03:29:56Z

I was originally looking for a way to search a javascript object recursively and I found this post very helpful, in particular Jeroen Moons's answer. I have tweaked it to provide a return object. Input is object to search and a {key:value} object (needle).

function searchObject(object, keyvalue){
    var found = false;
    for (var property in object){
        if (object.hasOwnProperty(property)){
            if (typeof object[property] == 'object'){
                found = searchObject(object[property], keyvalue);
                if (found)
                    return found;
            }else{
                key = Object.keys(keyvalue)[0];
                if (property == key && object[key] == keyvalue[key]){
                    console.log('searchObject ' + keyvalue[key] + ' found');
                    return object;
                }
            }
        }
    }
}

DesertEagle · Accepted Answer · 2012-09-06 08:19:46Z

var x = {
    'name': 'a',
    'level': 1,
    'children': [{
        'name': 'b',
        'level' : 2,
        'children' : [{
            'name': 'c',
            'level' : 3,
            'children' : [{
            }]
        }]
    }, {
        'name': 'b2',
        'level' : 2,
        'children' : [{
            'name': 'c2',
            'level' : 3,
            'children' : [{
            }]
        }]
    }]
}
var step = x;
do {
    if (step instanceof Array){
        for (i=0; i < step.length; i++) {
            callback(step[i]);
        }
    }
    else {
        callback(step);
    }
    step = step.children != undefined ? step.children : null;
} while (step);

function callback (element) {
    console.log(element);
}

as long as the structure does not change, you can go down like this.

Collectives™ on Stack Overflow

jQuery - How to recursively loop over an object's nested properties?

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related