Affichage de la liste des objets JavaScript en tant qu'éléments de liste HTML

Lorsque je tente cela, la page HMTL affiche uniquement le dernier objet, au lieu de tous les objets.

Voici mon fichier JavaScript

var family = { aaron: { name: 'Aaron', age: 30 }, megan: { name: 'Megan', age: 40 }, aaliyah: { name: 'Aaliyah', age: 2 } } var list = function(family) { for (var prop in family) { var elList = document.getElementById('aaron-family').innerHTML = prop; } } list(family);

Et voici mon fichier HTML

 <html> <head> <title>Aaron's Test With Objects</title> </head> <li id="aaron-family">Hey, this is where it goes</li> <footer> <script src="objects.js"></script> </footer> </html>

Eh bien, vous avez quelques problèmes là-bas ( <li> tag sans parent <ol> ou <ul> , entre autres) … mais je dirais que l'erreur principale est que vous remplacez chaque sortie suivante avec Chaque affectation à innerHTML .

Solution: affectez un tableau compilé à innerHTML (en utilisant join pour inclure des espaces entre les valeurs)

 var list = function(family) { var names = []; for (var prop in family) { names.push(prop.name); } document.getElementById('aaron-family').innerHTML = names.join(' '); } list(family);

Supprimez elList parce qu'il n'y a aucun intérêt à l'avoir …

Ensuite, changez

 document.getElementById('aaron-family').innerHTML = prop;

 document.getElementById('aaron-family').innerHTML += prop;

De cette façon, vous ne définissez pas constamment l' innherHTML à prop . Aussi, vous pourriez trouver mieux de changer la fonction à la suivante afin d'éviter de constamment obtenir l'élément.

 function list(family) { var elList = document.getElementById('aaron-family'); for (var prop in family) { elList.innerHTML += prop; } }

J'espère que cela t'aides:)

Merci les gars! Voici la solution finale avec laquelle j'ai rencontré:

 var family = { aaron: { name: 'Aaron', age: 30 }, megan: { name: 'Megan', age: 40 }, aaliyah: { name: 'Aaliyah', age: 2 } } var list = function(family) { for (var prop in family) { document.getElementById('aaron-family').innerHTML += '<li>' + prop + '</li>'; console.log(prop); } }

HTML

 <html> <head> <title>Aaron's Test With Objects</title> </head> <ul id="aaron-family"> </ul> <footer> <script src="objects.js"></script> </footer> </html>

Je suis sûr que cela peut être refacturé, mais cela fonctionne, visuellement.