Converting an object of nested objects / arrays into something array like in javascript

Question

First off, I don't have an array of objects, or just one object with no depth. I have the following structure, basically a tree of folders and files.

    {
    "C:": {
        "files": [],
        "DataStore": {
            "files": ["Continuous_2016-02-26_15.08.11.dat",
                        "Continuous_2016-02-26_15.38.10.dat",
                        "Continuous_2016-02-26_16.08.09.dat",],
            "c4": {
                "160226": {
                    "files": [
                        "Continuous231.dat",
                        "Continuous_2016-02-26_16.21.58.dat",
                        "Continuous_2016-02-26_16.31.58.dat",
                        "Continuous_2016-02-26_16.41.58.dat",
                        "Continuous_2016-02-26_16.51.58.dat",
                        "Continuous_2016-02-26_17.01.58.dat",
                        "Continuous_2016-02-26_17.11.57.dat",
                        "Continuous_2016-02-26_17.21.57.dat",
                        "Continuous_2016-02-26_17.31.57.dat",
                        "Continuous_2016-02-26_17.41.57.dat"
                    ]
                },
                "files": []
            }
        }
    }
}

I'd like to get this into an array so I can build a template in Angular to show these files/folders.

Something like :

[{
    "name": "c:",
    "files": ["test.dat"],
    "directories": [{
        "name": "DataStore",
        "files": [],
        "directories": [{
            "name": "c4",
            "files": [{
                "name": "filename.dat"
            }, {
                "name": "filename.dat"
            }, {
                "name": "filename.dat"
            }, {
                "name": "filename.dat"
            }, {
                "name": "filename.dat"
            }],
            "directories": []
        }]
    }]

}]

I'd obviously rather have the server return me a workable array like object, but thats a no go right now.

Answer 1

You should try a recursive function to iterate over your directories. Yo create a node for each directory and you call the same function for it's child directories.

 function constructDirecory(directory, name) { // create list of files var files = []; if (directory.files) { directory.files.forEach(function(fileName) { files.push({ name: fileName }); }); } // loop list directories var directories = []; for (var childDirectoryName in directory) { if (directory.hasOwnProperty(childDirectoryName)) { if (childDirectoryName !== 'files') { // it's a directory, see what's inside var childDirectoryData = directory[childDirectoryName]; var directoryData = constructDirecory(childDirectoryData, childDirectoryName); directories.push(directoryData); } } } return { name: name || 'root', files: files, directories: directories }; } var data = { "C:": { "files": [], "DataStore": { "files": ["Continuous_2016-02-26_15.08.11.dat", "Continuous_2016-02-26_15.38.10.dat", "Continuous_2016-02-26_16.08.09.dat", ], "c4": { "160226": { "files": [ "Continuous231.dat", "Continuous_2016-02-26_16.21.58.dat", "Continuous_2016-02-26_16.31.58.dat", "Continuous_2016-02-26_16.41.58.dat", "Continuous_2016-02-26_16.51.58.dat", "Continuous_2016-02-26_17.01.58.dat", "Continuous_2016-02-26_17.11.57.dat", "Continuous_2016-02-26_17.21.57.dat", "Continuous_2016-02-26_17.31.57.dat", "Continuous_2016-02-26_17.41.57.dat" ] }, "files": [] } } } }; var result = constructDirecory(data); $('#result').text(JSON.stringify(result, null, 2)) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre id='result'></pre> 

And here is a demo fiddle .