JavaScript: Construire une table HTML à partir d'un JSON imbriqué

Question

J'ai un problème construire une table HTML à partir du JSON suivant

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

lorsque introduit dans ces fonctions

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

Tout fonctionne bien jusqu'à ce que j'ajouter le contrôle des enfants et l'appel de fonction récursif correspondant.

Ensuite, le résultat est les deux premiers objets et les enfants, mais le dernier ne sera pas dans la table. Des idées?

Answer 1

Vous avez oublié le var sur la variable cycles, ce qui en fait un accident global. L'appel interne à getRowHTML écrase la valeur du cycles global dans l'appel externe, faisant la fin de la boucle externe tôt.

Notez que vous avez également des problèmes d'injection HTML si l'une des propriétés peut contenir des caractères spéciaux HTML. Vous devriez HTML-échapper tout contenu étant inséré dans une chaîne HTML. Ou, pour éviter d'avoir à y penser, utilisez des méthodes DOM pour créer la table à la place. par exemple.

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