的JavaScript：從嵌套的JSON

Question

建立一個HTML表我有以下JSON

[ 
    { 
    "size" : 167, 
    "price" : 453400, 
    "type" : "Neubau", 
    "children" : false 
    }, 
    { 
    "size" : 167, 
    "price" : 453400, 
    "type" : "Neubau", 
    "children" : false 
    }, 
    { 
    "size" : 167, 
    "price" : 453400, 
    "type" : "Neubau", 
    "children":[ 
     { 
     "size" : 167, 
     "price" : 453400, 
     "type" : "Neubau", 
     "children" : false 
     }, 
     { 
     "size" : 167, 
     "price" : 453400, 
     "type" : "Neubau", 
     "children" : false 
     } 
    ] 
    }, 
    { 
    "size" : 167, 
    "price" : 453400, 
    "type" : "Neubau", 
    "children" : false 
    } 
] 

建立一個HTML表中的問題時送入這些功能

function getRowHTML(dataObject, type) { 
    cycles = dataObject.length; 
    var markup = ''; 
    for (var i=0; i < cycles; i++) { 
    // different markup for each line 
    switch (type) { 
     case 'size': 
     markup += ' <td>' + dataObject[i].size + '</td>'; 
     break; 
     case 'price': 
     markup += ' <td>' + addDots(dataObject[i].price) + '&euro; </td>'; 
     break; 
     case 'type': 
     markup += ' <td>' + dataObject[i].type + '</td>'; 
     break; 
    } 

    // Check if an object has children and insert children HTML as well 
    if (dataObject[i].children) { 
     markup += getRowHTML(dataObject[i].children,type); 
    } 
    } 
    return markup; 
} 

function getHTML(data) { 
    var markup = '<table>'; 

    markup += '<tr class="odd">' + getRowHTML(data,'size') + '</tr>'; 
    markup += '<tr class="even">' + getRowHTML(data,'price') + '</tr>'; 
    markup += '<tr class="odd">' + getRowHTML(data,'type') + '</tr>'; 


    markup += '</table>'; 

    return markup; 
} 

一切工作正常，直到我添加兒童檢查和相應的遞歸函數調用。

然後結果是前兩個對象和孩子，但最後一個不會在表中。有任何想法嗎？

Answer 1

您忘記了cycles變量的var，使其成爲意外的全局變量。對getRowHTML的內部呼叫會覆蓋外部呼叫中的全局呼叫cycles的值，從而使外部循環儘早結束。

請注意，如果任何屬性都可以包含HTML特殊字符，那麼您還有HTML注入問題。您應該HTML轉義任何內容被插入到HTML字符串中。或者，爲了避免必須考慮這個問題，可以使用DOM方法來創建表。例如。

function fillRow(row, items, property) { 
    for (var i= 0, n= items.length; i<n; i++) { 
     var item= items[i]; 
     var s= item[property]; 
     if (property==='price') 
      s= addDots(s)+'\u20Ac'; // € 
     row.insertCell(-1).appendChild(document.createTextNode(s)); 
     if (item.children) 
      fillRow(row, item.children, property); 
    } 
} 

function makeTable(data) { 
    var table= document.createElement('table'); 
    var properties= ['size', 'price', 'type']; 
    for (var i= 0, n= properties.length; i<n; i++) { 
     var row= table.insertRow(-1); 
     row.className= i%2===0? 'odd' : 'even'; 
     fillRow(row, data, properties[i]); 
    } 
    return table; 
}