Javascript la condition de coupure pour la fonction récursive itérant sur JSON

Question

Je ne suis pas sûr comment j'examinerais et créerais la condition de coupure pour cette fonction récursive. Au moment où la fonction gèle le navigateur (semble boucle indéfiniment). Je tente de générer une série de listes non ordonnées imbriquées en fonction des données fournies dans l'objet liste.

Voici le violon: https://jsfiddle.net/mzckoc7s/

var list = { 
    "primary": [{ 
     "item": "item 1" 
    }, { 
     "item": "item 2", 
     "secondary": [{ 
      "item": "item secondary 1" 
     }, { 
      "item": "item secondary 2" 
     }, { 
      "item": "item secondary 3", 
      "secondary": [{ 
       "item": "item inner secondary 1" 
      }] 
     }] 
    }, { 
     "item": "item 3" 
    }] 
} 

function items(obj) { 
    var output = '<ul>'; 
    for (i = 0; i < obj.length; i++) { 
     output += '<li>' + obj[i].item + '</li>'; 
     if (typeof obj[i].secondary != 'undefined') { 
      items(obj[i].secondary); 
      break; 
     } 
    } 
    output += '</ul>'; 
    return output; 
} 

Le résultat final est censé être le suivant:

<ul> 
<li>item 1</li> 
    <li>item 2 
     <ul> 
      <li>item secondary 1</li> 
      <li>item secondary 2</li> 
      <li>item secondary 3 
       <ul> 
        <li>item inner secondary 1</li> 
       </ul> 
      </li> 
     </ul> 
     </li> 
    <li>item 3</li> 
</ul> 

Answer 1

Vous pouvez utiliser une approche imbriquée être itérer les clés de l'objet et les tableaux possisble . Ensuite, construisez la sortie et respectez les enfants non donnés.

function getItems(object) { 
 
    var output = ''; 
 
    object && typeof object === 'object' && Object.keys(object).forEach(function (k) { 
 
     if (k === 'item' || !object[k]) { 
 
      return; 
 
     } 
 
     output = output || '<ul>'; 
 
     output += (Array.isArray(object[k]) ? object[k] : [object[k]]).map(function (a) { 
 
      return '<li>' + a.item + getItems(a) + '</li>'; 
 
     }).join(''); 
 
    }); 
 
    output += output && '</ul>'; 
 
    return output; 
 
} 
 

 
var list = { primary: [{ item: "item 1" }, { item: "item 2", secondary: [{ item: "item secondary 1" }, { item: "item secondary 2" }, { item: "item secondary 3", secondary: { item: "item inner secondary 1" } }] }, { item: "item 3" }] }, 
 
    result = getItems(list); 
 

 
document.body.innerHTML = result;

.as-console-wrapper { max-height: 100% !important; top: 0; }