tengo una búsqueda que devuelve un objeto json como este:
{ "id": "xxxxxxxxxxxxxxxxxxx2", "name": "name", "instant_invite": "link", "channels": [ { "id": "xxxxxxxxxxxxxxxxxxx2", "name": "Altri Giochi", "position": 8 }, { "id": "xxxxxxxxxxxxxxxxxxx2", "name": "Ascolto Musica", "position": 11 }, ], "members": [ { "id": "0", "username": "xxxxxxxxxxxxxx", "discriminator": "0000", "avatar": null, "status": "idle", "avatar_url": "https://url" }, ], "presence_count": 3}
ahora estoy tratando de mapear y mostrar todos estos elementos para hacer una lista desordenada para mi sitio web, pero no puedo mapear este objeto con this.myResponse.map... recibo el error "mapa no es una función".
Definitivamente estoy perdido aquí y necesito ayuda para hacer una lista desordenada que contenga el nombre de todos los miembros, el avatar y otras cosas.
alguien me puede ayudar con esto en vanilla js?
Puede recorrer el objeto usando Object.keys(). aquí hay un ejemplo
let data = { "id": "xxxxxxxxxxxxxxxxxxx2", "name": "name", "instant_invite": "link", "channels": [{ "id": "xxxxxxxxxxxxxxxxxxx2", "name": "Altri Giochi", "position": 8 }, { "id": "xxxxxxxxxxxxxxxxxxx2", "name": "Ascolto Musica", "position": 11 }, ], "members": [{ "id": "0", "username": "xxxxxxxxxxxxxx", "discriminator": "0000", "avatar": null, "status": "idle", "avatar_url": "https://url" }, { "id": "1", "username": "yyyyyyyyyyyyy", "discriminator": "0000", "avatar": null, "status": "idle", "avatar_url": "https://url" },], "presence_count": 3 } data.members.forEach(m => { // start the UL let ul = "<ul class='member'>"; // loop through using Object.keys(m) or preset array of keys ['username','avatar'].forEach(md => { ul += `<li>${md}: ${m[md]}</li>`; }) ul += "</ul>"; document.querySelector('#members').innerHTML += ul; }) <div id='members'></div>