Preserving order in the output of a recursive loop of objects in Javascript

Question

I'm trying to use a JSON file to populate a web page. I am recursively looping through the object, writing the [key, value] properties to a string and using the 'list' property to increase the nesting level. I need it to be in order.

This is the function I've written:

function recurOBJ(my_obj){
    let x, str
    str = ``
    for( x in my_obj ){
        str += x + `: ` + my_obj[x].copy
        console.log(x);
        if ( my_obj[x].hasOwnProperty('list') ){
            recurOBJ(my_obj[x].list)
        }
    }
    console.log(str);
    return str
}

And this is a sample object:

{
    "item_01": {
        "copy": ["Some text."]
    },
    "item_02": {
        "copy": ["More text."],
        "list": {
            "listItem01": {
                "copy": ["List text."],
                "list": {
                        "item_a": { "copy": ["A: Lorem ipsum dolor sit amet."]},
                        "item_b": { "copy": ["B: Lorem ipsum dolor sit amet."]},
                        "item_c": { "copy": ["C: Lorem ipsum dolor sit amet."]},
                        "item_d": { "copy": ["D: Lorem ipsum dolor sit amet."]}
                }
        }}
    }
}

The problem is that when I'm looking at the console.log(x) output everything shows up in the correct order, but when the string is returned, console.log(str), it shows the nested values first and then the higher level items, ie. item01 and item02, after.

Correct => console.log(x):

item_01
item_02
listItem01
item_a
item_b
item_c
item_d

Incorrect => console.log(str):

item_a: A: Lorem ipsum dolor sit amet.
item_b: B: Lorem ipsum dolor sit amet.
item_c: C: Lorem ipsum dolor sit amet.
item_d: D: Lorem ipsum dolor sit amet.
listItem01: List text.
item_01: Some text.
item_02: More text.

I'm at a loss for how to remedy this. I've tried converting the Object to a Map to preserve the order, but that didn't work either.

please add the wanted result as well, beside the wanted order. to have an ordered structure, you might use an array isntead of an object. — Nina Scholz, Aug 10 '18 at 19:08
@xmattx JSON stands for javascript object notation. It is a way to represent a javascript object as a string. What you are dealing with is a javascript object, not json. JSON object is a misnomer. — Marie, Aug 10 '18 at 19:09
You have recursion, and it builds on stack.. so I think `item_02: More text.` should be last, as it is `LIFO`. — Arup Rakshit, Aug 10 '18 at 19:11
https://stackoverflow.com/questions/25676961/understanding-how-recursive-functions-work — sertsedat, Aug 10 '18 at 19:19
@Marie, fair enough, I'll edit the question to be more clear. — xmattx, Aug 10 '18 at 21:08

score 1 · Accepted Answer · answered Aug 10 '18 at 19:21

So, you're doing everything right. Except that you should return the value of recursion too.

Change your code a little bit and it should work.

function recurOBJ(my_obj){
    let x, str
    str = ``
    for( x in my_obj ){
        str += x + ': ' + my_obj[x].copy + '\n'
        if ( my_obj[x].hasOwnProperty('list') ){
            str += recurOBJ(my_obj[x].list) + '\n'
        }
    }
    return str
}

output:

item_01: Some text.
item_02: More text.
listItem01: List text.
item_a: A: Lorem ipsum dolor sit amet.
item_b: B: Lorem ipsum dolor sit amet.
item_c: C: Lorem ipsum dolor sit amet.
item_d: D: Lorem ipsum dolor sit amet.

added new lines to have a better format. feel free to change or remove them — sertsedat, Aug 10 '18 at 19:23

score 0 · Answer 2 · answered Aug 10 '18 at 19:31

You could take a recursive approach by returning an array of strings and the children as well with list property or an empty object.

function getData(object) {
    return [].concat(
        ...Object
            .entries(object)
            .map(([k, v]) => [k + ': ' + v.copy[0], ...getData(v.list || {})])
    );
}

var data = { item_01: { copy: ["Some text."] }, item_02: { copy: ["More text."], list: { listItem01: { copy: ["List text."], list: { item_a: { copy: ["A: Lorem ipsum dolor sit amet."] }, item_b: { copy: ["B: Lorem ipsum dolor sit amet."] }, item_c: { copy: ["C: Lorem ipsum dolor sit amet."] }, item_d: { copy: ["D: Lorem ipsum dolor sit amet."] } } } } } };

console.log(getData(data));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Preserving order in the output of a recursive loop of objects in Javascript

2 Answers2