How to create a tree-like structure from a JavaScript Object

Question

This is the Object sample I'm given:

Input :

{ "People": [ { "id": "12", "parentId": "0", "text": "Man", "level": "1", "children": null }, { "id": "6", "parentId": "12", "text": "Boy", "level": "2", "children": null }, { "id": "7", "parentId": "12", "text": "Other", "level": "2", "children": null }, { "id": "9", "parentId": "0", "text": "Woman", "level": "1", "children": null }, { "id": "11", "parentId": "9", "text": "Girl", "level": "2", "children": null } ] }

I want to transform it to a JSON format like this:

{
    "People": [
        {
            "id": "12",
            "parentId": "0",
            "text": "Man",
            "level": "1",
            "children": [
                {
                    "id": "6",
                    "parentId": "12",
                    "text": "Boy",
                    "level": "2",
                    "children": null
                },
                {
                    "id": "7",
                    "parentId": "12",
                    "text": "Other",
                    "level": "2",
                    "children": null
                }   
            ]
        }
}

Any Ideas/Help would be appreciated

I tried implementing the solution of this question: https://stackoverflow.com/questions/18017869/build-tree-array-from-flat-array-in-javascript but didn't work after editing :/ @SpoonMeiser — Omar Al-Ashi, Nov 16 '18 at 12:12
I think that the first example is the best approach you can use. It's the more efficient way of representing the tree. — Patrik Valkovič, Nov 16 '18 at 12:13
@PatrikValkovič I agree but from a visual perspective, the second example is better — Omar Al-Ashi, Nov 16 '18 at 12:19
@Hussler take a look at my answer, I spent an awful half an hour to make the solution (tired in the end of the day) — Nurbol Alpysbayev, Nov 16 '18 at 12:26

score 1 · Accepted Answer · answered Nov 16 '18 at 12:22

You could use an object for the reference to either child or parent and collect the children and parents to get only the person for the root.

var data = { John: "James", Samar: "Michel", Albert: "Michel", Michel: "James", James: "Sarah" },
    parents = new Set,
    children = new Set,
    references = {},
    result;

Object
    .entries(data)
    .forEach(([child, parent]) => {
        references[child] = references[child] || [];
        references[parent] = references[parent] || [];
        references[parent].push({ [child]: references[child] });
        parents.add(parent);
        children.add(child);
    });

result = [...parents]
    .filter(p => !children.has(p))
    .map(p => ({ [p]: references[p] }));

console.log(result);

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

Nurbol Alpysbayev · Answer 2 · 2018-11-16T13:30:23.303

OMG this seemingly simple stuff took so long

const users = {
        "John": "James",
        "Samar": "Michel",
        "Albert": "Michel",
        "Michel": "James",
        "James": "Sarah"
    }
    
    const findRoots = () => Object.keys(users).filter(k => !(users[k] in users)).map(k => users[k])
    
    const findSubordinates = (boss) => Object.keys(users).filter(k => users[k] === boss)
    
    const traverseBoss = (boss) => {
        let subs = findSubordinates(boss)
    
        let subsCollection = []
    
        subs.forEach(s => {
            subsCollection.push({
                [s]: traverseBoss(s)
            })
        })
    
        return subsCollection
    }
    
    
    const result = {}
    findRoots().forEach(root => result[root] = traverseBoss(root))
    
    console.log(result)

@NurbolAlpysbayev I'm sorry but I have a new account and I cannot upvote :/ — Omar Al-Ashi, Nov 16 '18 at 13:50

How to create a tree-like structure from a JavaScript Object

2 Answers2