JavaScript: Создание таблицы HTML с вложенной 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 
    } 
] 

при подаче в эти функции

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

Вы забыли var на переменной cycles, что делает его случайным в глобальном масштабе. Внутренний вызов 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; 
}