Parcourir un tableau d'objets

bezzy
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Mon petit code

var listHTML
var students = [
  {
    name: 'ZOZO',
    track: 'Javascript fullstack',
    achievements: 5,
    points: 1552
  },

  {
    name: 'POPO',
    track: 'Javascript fullstack',
    achievements: 5,
    points: 1552
  },

  {
    name: 'OHO',
    track: 'Digital master painting',
    achievements: 2,
    points: 225
  },

  {
    name: 'POLO',
    track: 'master science of diets',
    achievements: 45,
    points: 55555555
  },

  {
    name: 'KUZO',
    track: 'Master of jobs coach',
    achievements: 4,
    points: 2255
  },

  {
    name: 'GEKO',
    track: 'Pedagology',
    achievements: 45,
    points: 454545
  }
]

function print (message) {
  document.write(message)
}

function printList (list) {
  listHTML = '<ul>'
  for (var i = 0; i < list.length; i++) {
    for (var student in list) {
      document.write(list[student])
    }
  }
  listHTML += '</ul>'
  document.write(listHTML)
}

printList(students)

Ce que je veux

Je cherche a parcourir et afficher sous forme de liste les elements d'un tableau d'objets en affichant sous cette forme:

  • key : value

    Ce que j'obtiens

    0: [object Object]
    1: [object Object]
    2: [object Object]
    3: [object Object]
    4: [object Object]
    5: [object Object]
    0: [object Object]
    1: [object Object]
    2: [object Object]
    3: [object Object]
    4: [object Object]
    5: [object Object]
    0: [object Object]
    1: [object Object]
    2: [object Object]
    3: [object Object]
    4: [object Object]
    5: [object Object]
    0: [object Object]
    1: [object Object]
    2: [object Object]
    3: [object Object]
    4: [object Object]
    5: [object Object]
    0: [object Object]
    1: [object Object]
    2: [object Object]
    3: [object Object]
    4: [object Object]
    5: [object Object]
    0: [object Object]
    1: [object Object]
    2: [object Object]
    3: [object Object]
    4: [object Object]
    5: [object Object]

    Pouvez m'aider a comprendre car pour moi cela semble juste.

    Merci

4 réponses

Amilor7
Réponse acceptée

Salut, si je comprends bien ce que tu souhaites c'est itérer sur les propriétés de chaque objet et de sortir la clef avec la valeur.
Il y a plusieurs solutions, j'ai utilisé Object.keys() avec un foreach, ce qui nécessite un polyfill, pour plus de doc, cf (Lien MDN)
Exemple : https://jsbin.com/tameko/edit?js,output

betaWeb

Salut,

function printList (list) {
  listHTML = '<ul>'
  for (var i = 0; i < list.length; i++) {
    for (var student in list) {
      document.write(list[student].name)
    }
  }
  listHTML += '</ul>'
  document.write(listHTML)
}
Amilor7

Désolé du double post, mais pour t'expliquer ce que tu obtiens c'est simplement un problème de boucle plus un problème pour accéder aux propriétés de l'objet.

function printList (list) {
  listHTML = '<ul>'
  for (var i = 0; i < list.length; i++) { // La tu fais une boucle sur le nombre d'objet que ton tableau contient
    for (var student in list) { // Ici nouvelle boucle sur chaque objet de la liste 
      // Ici tu as accès à l'objet donc tu peux afficher ses propriétés par exemple :
      // console.log(list[student].name) tu obtiens : ZOZO puis POPO puis OHO etc...
      document.write(list[student]) // Ceci renvoit object Object car tu ne précise aucune propriété de ton objet 
    }
    // Enfin le problème de boucle vient du for in dans la boucle for
    // Quand i vaut 0 ta boucle for in parcours tous les objets de ta liste
    // Quand i vaut 1 ta boucle for in parcours à nouveau tous les objets de ta liste et ainsi de suite jusqu'a ce que i soit égal au nombre d'élements de ta liste, en l'occurence 5, voilà pourquoi tu obtiens autant d'object Object
  }
  listHTML += '</ul>'
  document.write(listHTML)
}

printList(students) // Tu fais appel de ta fonction en lui passant ta liste

Désolé si c'est pas très clair

bezzy
Auteur

@Amilor7 je te remercie pour toutes ces explications. Tu m'a vraiment aidé :)