JavaScript：从嵌套的JSON构建HTML表

从以下JSON构建HTML表时遇到问题

[ 
  { 
    "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
  }
]

当输入这些函数时

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;
}

函数getRowHTML（数据对象，类型）{ 周期=dataObject.length； var标记=“”； 对于（变量i=0；i 在我添加子项检查和相应的递归函数调用之前，一切正常

---

结果是前两个对象和子对象，但最后一个对象不在表中。有什么想法吗？

您忘记了

循环

变量上的

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;
}

函数填充行（行、项、属性）{
对于（var i=0，n=items.length；iThanks，我错过了全局。实际代码要复杂得多，JSON将来自一个安全的源代码。但也感谢您的提示。这比我之前破解的要好得多。我宁愿翻转X和Y数据，但对于我现在需要的，这是完美的。