使用Javascript和JSON構建樹

Question

我有一個JSON數組具有以下數據結構

"Jobs":
        [
            { "id": "1", "JobTitle": "Engineer", "PID": "null" },
            { "id": "2", "JobTitle": "Project Manager", "PID": "null" },
            { "id": "5", "JobTitle": "Auditing Manager", "PID": "2" },
            { "id": "7", "JobTitle": "Auditor", "PID": "5" },
            { "id": "6", "JobTitle": "QA Manager", "PID": "5" },
            { "id": "3", "JobTitle": "QA", "PID": "6" },
            { "id": "4", "JobTitle": "Business Analyst", "PID": "2" }
        ]

我想用Jquery和Knockoutjs（可選）編寫一個Java腳本，用javascript和html建立一個團隊結構（組織），我有1000條記錄，我已經嘗試了許多遞歸循環來處理它，但都沒有成功。

輸出應該是這樣的

<ul id="root">
<li>Engineer</li> //since their pid is null, then they are root nodes ( yeah not only root)
<li>Project Manager</li>
   <ul>
   <li>Auditing Manager</li>
   <li>Business Analyst</li>
   </ul>

依此類推，它應該處理多個級別（深度），有人會建議使用DFS或BFS，但我無法成功實現它們。

Answer 1

現在是午夜，我很累，但是我不能拒絕這個挑戰。 它可能不是最快的解決方案，但效果很好（ http://jsfiddle.net/NbRzB/1/ ）：

function printNode(jobs, tree, id)
{
    var html = '<li>' + jobs[id]['JobTitle'] + '</li>';

    if(tree[id] instanceof Array)
    {
        html += '<li><ul>';

        for(var i=0; i<tree[id].length; i++)
        {
            html += printNode(jobs, tree, tree[id][i]);
        }

        html += '</ul></li>';
    }

    return html;
}

var jobs =
[
    { 'id': '1', 'JobTitle': 'Engineer', 'PID': 'null' },
    { 'id': '2', 'JobTitle': 'Project Manager', 'PID': 'null' },
    { 'id': '5', 'JobTitle': 'Auditing Manager', 'PID': '2' },
    { 'id': '7', 'JobTitle': 'Auditor', 'PID': '5' },
    { 'id': '6', 'JobTitle': 'QA Manager', 'PID': '5' },
    { 'id': '3', 'JobTitle': 'QA', 'PID': '6' },
    { 'id': '4', 'JobTitle': 'Business Analyst', 'PID': '2' }
];

// tmp is used to build a better structure id => { attributes }
var tmp = {};

for(var i=0; i<jobs.length; i++)
{
    tmp[jobs[i]['id']] =
    {
        'JobTitle' : jobs[i]['JobTitle'],
        'PID' : jobs[i]['PID']
    }
}

jobs = tmp;
// end - build better structure

// id => { child_id, child_id, ...}
var tree = {};
// { root_id, root_id, ...}
var root = [];

for(var id in tmp)
{
    // no pid ? it is a root
    if(jobs[id]['PID'] == 'null')
    {
        root.push(id);
    }
    else
    {
        // Add "id" to "jobs[id]['PID']"'s children
        if(tree[jobs[id]['PID']] instanceof Array)
        {
            tree[jobs[id]['PID']].push(id);
        }
        else
        {
            tree[jobs[id]['PID']] = [ id ];
        }
    }
}

// recursive way
var html = '<ul id="root">';

for(var i=0; i<root.length; i++)
{
    html += printNode(jobs, tree, root[i]);
}

html += '</ul>';

// output
$('body').append(html);