JSFiddle - React, Tailwind, and code Playground

HTML

<pre id="result">
</pre>

JavaScript

var arr = [
    {id:1, pid:0, name:"SYSTEM"},
    {id:2, pid:1, name:"aa"},
    {id:3, pid:2, name:"aaa"},
    {id:4, pid:2, name:"b"},
    {id:5, pid:0, name:"c"},
    {id:6, pid:5, name:"cc"}
];

function generateTree(arr) {
    var root = {text:null};
    if (arr.length > 0) {
        var objMap = {};
        root["expanded"] = true;
        root["items"] = [];
        arr.forEach(function(item){
            var node = {text: item.name};
            objMap[item.id] = node;
            if(item.pid === 0) {
                root["items"].push(node);
            } else {
                var parent = objMap[item.pid];
                parent["expanded"] = true;
                if (parent["items"]) {
                    parent["items"].push(node);
                } else {
                    parent["items"] = [];
                    parent["items"].push(node);
                }
            }
        });
    }
    return [root];
}

var json = JSON.stringify(generateTree(arr), null, 2);

document.getElementById("result").innerHTML = json;