使用JavaScript缺少JSON值

Question

我有一個正在填充json文件的html表。當你點擊一行時，如果該行有一個子行（一個子行），那麼當該行被點擊時，這些子行將被顯示（最初子行被隱藏）。

正如我所提到我有一個JSON文件但是對於這個例子中我將使用JavaScript陣列：

var data = [ 
{  

    "ID" : 2, 
    "FirstName" : "John", 
    "LastName" : "Test", 
    "DOB": "Test", 
    "Gender":"M", 
    "HeadNodeId":0 
    }, 

    { 
    "ID" : 3, 
    "FirstName" : "Test", 
    "LastName" : "Test", 
    "DOB": "Test", 
    "Gender":"M", 
    "HeadNodeId":2 
    }, 

    { 
    "ID" : 4, 
    "FirstName" : "Helen", 
    "LastName" : "Test", 
    "DOB": "03-12-1959", 
    "Gender":"M", 
    "HeadNodeId":0 
    } 

]; 

的2個元素在這裏被比較是「ID」和「HeadNodeId」。如果「HeadNodeId」與「ID」具有相同的編號，那麼它就是該行的子節點。我有JavaScript代碼來做到這一點，但只有正在顯示一個父行及其子行，不是沒有子行與其他行：

所以這是工作：

{ 
    "ID" : 2, 
"FirstName" : "John", 
"LastName" : "Test", 
"DOB": "Test", 
"Gender":"M", 
"HeadNode":0 
}, 

{ 
"ID" : 3, 
"FirstName" : "Test", 
"LastName" : "Test", 
"DOB": "Test", 
"Gender":"M", 
"HeadNode":2 
}, 

{ 
"ID" : 3, 
"FirstName" : "Test", 
"LastName" : "Test", 
"DOB": "Test", 
"Gender":"M", 
"HeadNode":2 
}, 

{ 
"ID" : 3, 
"FirstName" : "Test", 
"LastName" : "Test", 
"DOB": "Test", 
"Gender":"M", 
"HeadNode":2 
} 

父行並且它的子行正在工作，但是根本沒有顯示這些行。這些不是子行，所以他們應該始終顯示：

{ 
    "ID" : 4, 
    "FirstName" : "Helen", 
    "LastName" : "Test", 
    "DOB": "03-12-1959", 
    "Gender":"M", 
    "HeadNode":0 
    }, 

    { 
    "ID" : 5, 
    "FirstName" : "Helen", 
    "LastName" : "Test", 
    "DOB": "03-12-1959", 
    "Gender":"M", 
    "HeadNode":0 
    } 

這似乎是我的外循環只是迭代一次。下面是該代碼片段：

var i=0; 
var k=0; 
function populate(){ 

    var data = [ 
{  

    "ID" : 2, 
    "FirstName" : "John", 
    "LastName" : "Test", 
    "DOB": "Test", 
    "Gender":"M", 
    "HeadNode":0 
    }, 

    { 
    "ID" : 3, 
    "FirstName" : "Test", 
    "LastName" : "Test", 
    "DOB": "Test", 
    "Gender":"M", 
    "HeadNode":2 
    }, 

    { 
    "ID" : 3, 
    "FirstName" : "Test", 
    "LastName" : "Test", 
    "DOB": "Test", 
    "Gender":"M", 
    "HeadNode":2 
    }, 

    { 
    "ID" : 3, 
    "FirstName" : "Test", 
    "LastName" : "Test", 
    "DOB": "Test", 
    "Gender":"M", 
    "HeadNode":2 
    }, 

    { 
    "ID" : 4, 
    "FirstName" : "Helen", 
    "LastName" : "Test", 
    "DOB": "03-12-1959", 
    "Gender":"M", 
    "HeadNode":0 
    }, 

    { 
    "ID" : 5, 
    "FirstName" : "Helen", 
    "LastName" : "Test", 
    "DOB": "03-12-1959", 
    "Gender":"M", 
    "HeadNode":0 
    } 

]; 

    var tr, td; 
    var tbody = document.getElementById("data"); 

    // loop through data source 
    for (i; i < data.length; i++) { 
     if(data[i].ID == data[k].HeadNode){break;} 

     tr = tbody.insertRow(tbody.rows.length); 
     td = tr.insertCell(tr.cells.length); 
     td = tr.insertCell(tr.cells.length); 
     td.setAttribute("align", "center"); 
     td.innerHTML = data[i].ID; 
     td = tr.insertCell(tr.cells.length); 
     td.innerHTML = data[i].FirstName; 
     td = tr.insertCell(tr.cells.length); 
     td.innerHTML = data[i].LastName; 
     td = tr.insertCell(tr.cells.length); 
     td.innerHTML = data[i].DOB; 
     td = tr.insertCell(tr.cells.length); 
     td.innerHTML = data[i].Gender; 
     td = tr.insertCell(tr.cells.length); 
     td.innerHTML = data[i].HeadNode; 



     for (k; k < data.length; k++) { 
     if(data[i].ID == data[k].HeadNode){ 
     tr = tbody.insertRow(tbody.rows.length); 
     tr.className = "subnode"; 
     td = tr.insertCell(tr.cells.length); 
     td = tr.insertCell(tr.cells.length); 
     td.setAttribute("align", "center"); 
     td.innerHTML = data[k].ID; 
     td = tr.insertCell(tr.cells.length); 
     td.innerHTML = data[k].FirstName; 
     td = tr.insertCell(tr.cells.length); 
     td.innerHTML = data[k].LastName; 
     td = tr.insertCell(tr.cells.length); 
     td.innerHTML = data[k].DOB; 
     td = tr.insertCell(tr.cells.length); 
     td.innerHTML = data[k].Gender; 
     td = tr.insertCell(tr.cells.length); 
     td.innerHTML = data[k].HeadNode; 
     } 
    } 
    } 
} 

我覺得這是問題的一部分：

if(data[i].ID == data[k].HeadNode){break;} 

我怎樣才能解決這個使用純JavaScript（無庫）？任何幫助，將不勝感激

Answer 1

一般來說是這樣的：

for i { 
    if data[I].HeadNodeId !== 0) continue; 
    // Render "parent" 
    for k 
     if (data[k].HeadNodeId !== data[I].Id) { 
     // Render child 
    } 
} 

Answer 2

你應該改變你的整個方法。這是我的建議。

​​3210