JSFiddle - React, Tailwind, and code Playground

by Liu David

HTML

<body id='result'>

</body>

JavaScript

var categories = [
    {id: 'animals', 'parent': null},
    {id: 'mammals', 'parent': 'animals'},
    {id: 'cats', 'parent': 'mammals'},
    {id: 'dogs', 'parent': 'mammals'},
    {id: 'tom', 'parent': 'cats'},
    {id: 'wangcai', 'parent': 'dogs'},
    {id: 'lily', 'parent': 'cats'},
];

let makeTree = (categories, parent) => {
    var node = {};
    categories.filter((data)=> {
        return data['parent'] == parent;
    }).forEach(data => {
        node[data.id] = makeTree(categories, data.id);
    });

    return node;
}

var str = JSON.stringify(
    makeTree(categories, null), null, 2);
document.getElementById("result").innerHTML = str;

alert(str);