0

次のデータ構造を持つ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 を提案するでしょうが、私はそれらをうまく実装できませんでした。

4

1 に答える 1

3

真夜中です。疲れていますが、この挑戦​​を断ることはできません。これは最速のソリューションではないかもしれませんが、結果は良好です ( 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);
于 2012-08-24T03:56:21.120 に答える