JavaScript:从嵌套的JSON构建HTML表

I have a problem building a HTML table from the following JSON

我有一个问题，从以下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
  }
]

when fed into these functions

当输入这些函数时。

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

Everything works fine until I add the check for children and the corresponding recursive function call.

在添加子检查和相应的递归函数调用之前，一切正常。

Then the result are the first two objects and the children but the last one won't be in the table. Any ideas?

然后结果是前两个对象和子对象，但最后一个不会出现在表中。什么好主意吗?

1 个解决方案

#1

You have forgotten the var on the cycles variable, making it an accidental global. The inner call to getRowHTML overwrites the value of the global cycles in the outer call, making the outer loop end early.

您已经忘记了循环变量上的var，这使它成为一个偶然的全局变量。getRowHTML的内部调用覆盖外部调用中的全局循环的值，使外部循环提前结束。

Note you also have HTML-injection problems if any of the properties can contain HTML-special characters. You should HTML-escape any content being inserted into an HTML string. Or, to avoid having to think about that, use DOM methods to create the table instead. eg.

注意，如果任何属性都可以包含特定于html的字符，那么也存在html注入问题。您应该HTML-escape插入到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;
}