使用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