What is the proper way to run each function for many child nodes?

Question

I have an array and many objects in it. I want to be able to run an each function to change every files/a with files/and in every subpage > file nodes. How can i do this with a proper each or loop function? I think about that and it is the structure below in my mind and looks like terrible solution.

$.each(main, function( index, value ) {
    $.each(index.subpage, function( index, value ) {
        $.each(index.files, function( index, value ) {
             value.replace("files/a", "files/and");
        });
    });
});

The main object looks like below.

{
    "main": [
        {
            "title": "AAA",
            "hash": "a",
            "subpage": [
                {
                    "title": "b",
                    "hash": "b",
                    "subpage": [
                        {
                            "title": "c",
                            "hash": "c",
                            "subpage": [],
                            "files": [
                                {
                                    "files/a/b/c/01_clandestino_dev%20%282%29.jpg": {}
                                },
                                {
                                    "files/a/b/c/01_clandestino_dev%20%283%29.jpg": {}
                                }
                            ],
                            "content": "",
                            "layout": "standart"
                        }
                    ],
                    "files": [
                        {
                            "files/a/b/01_clandestino_dev%20%282%29.jpg": {}
                        },
                        {
                            "files/a/b/01_clandestino_dev%20%283%29.jpg": {}
                        }
                    ],
                    "content": "asd123",
                    "layout": "standart"
                }
            ],
            "files": [
                {
                    "files/a/01_clandestino_dev.jpg": {}
                },
                {
                    "files/a/01.Creative_Collective_Effect_Overview.jpg": {}
                },
                {
                    "files/a/01.Bor%C3%A5s_H%C3%B6gskola_Website_Narrow.jpg": {}
                }
            ],
            "content": "AAAb",
            "layout": "standart",
            "menuItem": "true"
        }
    ]
}

possible dupe http://stackoverflow.com/questions/2203958/jquery-recursive-iteration-over-objects — DLeh, Nov 21 '14 at 21:24
Data structure seems strange. You are attempting to modify value but all the file names are shown as object keys not values — charlietfl, Nov 21 '14 at 21:30
I think i have to delete the filename before adding renamed one. — fozuse, Nov 21 '14 at 21:37

Salman A · Accepted Answer · 2014-11-21T22:15:42.597

Recursion is the only solution. You need to write a function that processes a "page":

process each subpage inside the current page using recursion
process each file inside the current page

Each file is an object with one key; you need to add the new key and remove the old key using the delete operator.

var o = {
    "main": [{
        "title": "AAA",
        "hash": "a",
        "subpage": [{
            "title": "b",
            "hash": "b",
            "subpage": [{
                "title": "c",
                "hash": "c",
                "subpage": [],
                "files": [{
                    "files/a/b/c/01_clandestino_dev%20%282%29.jpg": {}
                }, {
                    "files/a/b/c/01_clandestino_dev%20%283%29.jpg": {}
                }],
                "content": "",
                "layout": "standart"
            }],
            "files": [{
                "files/a/b/01_clandestino_dev%20%282%29.jpg": {}
            }, {
                "files/a/b/01_clandestino_dev%20%283%29.jpg": {}
            }],
            "content": "asd123",
            "layout": "standart"
        }],
        "files": [{
            "files/a/01_clandestino_dev.jpg": {}
        }, {
            "files/a/01.Creative_Collective_Effect_Overview.jpg": {}
        }, {
            "files/a/01.Bor%C3%A5s_H%C3%B6gskola_Website_Narrow.jpg": {}
        }],
        "content": "AAAb",
        "layout": "standart",
        "menuItem": "true"
    }]
};

function process_page(page) {
    if (page.main || page.subpage) {
        $.each(page.main || page.subpage, function(i, subpage) {
            process_page(subpage);
        });
    }
    if (page.files) {
        $.each(page.files, function(i, file) {
            $.each(file, function(oldname, value) {
                var newname = oldname.replace("files/a", "files/and");
                console.log("old: " + oldname);
                console.log("new: " + newname);
                file[newname] = value;
                delete file[oldname];
            });
        });
    }
}
process_page(o);
console.log(o);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

What is the proper way to run each function for many child nodes?

1 Answers1