Estoy tratando de crear una aplicación que obtenga todos los planetas de SWAPI y luego los muestre como cuadros en la página. Tengo el método _load() , que obtiene los datos, y el método _render() , que se supone que representa las cajas. El _render() tiene parámetros de nombre, terreno y población .
Aquí está parte de mi código:
const box = document.createElement("div"); box.classList.add("box"); box.innerHTML = this._render({ name: '', terrain: "placeholder", population: 0, }); document.body.querySelector(".main").appendChild(box); this.emit(Application.events.READY); }_load() donde busco los datos
async function getPlanets() { const urls = Array.from({ length: 7 }, (v, i) => `https://swapi.boom.dev/api/planets?page=${i + 1}`); const promises = urls.map(url => fetch(url) .then(res => res.json()) .then(data => data.results)); const planetData = (await Promise.all(promises)).flat(); console.log(`Results for ${planetData.length} planets downloaded...`); console.log('Results:', planetData); } getPlanets() _render({ name, terrain, population }) { return ` <article class="media"> <div class="media-left"> <figure class="image is-64x64"> <img src="${image}" alt="planet"> </figure> </div> <div class="media-content"> <div class="content"> <h4>${name}</h4> <p> <span class="tag">${terrain}</span> <span class="tag">${population}</span> <br> </p> </div> </div> </article> `; }Lo que debo hacer es obtener el valor de estos parámetros de los datos obtenidos .
Pastebin - https://pastebin.com/hbxfHC1U
Basado en su fragmento de pastebin, he hecho algunos ajustes.
Primero modifique su función _load para que devuelva el resultado de la solicitud SWAPI. Eliminé la función que define dentro de ella, porque parecía innecesaria y ya está dentro de un contexto async .
Use el valor devuelto de _load en su constructor y páselo a _create . (Sus comentarios indicaron que esta era su intención, de todos modos). Dentro _create loop sobre los datos, crea tu cuadro y llama al método _render pasando las propiedades que necesitas de cada elemento.
class Application { constructor() { this._startLoading() this._load() .then(data => this._create(data)) .then(() => this._stopLoading()) } async _load() { const urls = Array.from({ length: 7 }, (v, i) => `https://swapi.boom.dev/api/planets?page=${i + 1}`); const promises = urls.map(url => fetch(url) .then(res => res.json()) .then(data => data.results)); const planetData = await Promise.all(promises) return planetData.flat(); } //here should be moved the rendering of the boxes, I suppose by establishing a connection with _render() _create(data) { data.forEach(({ name, terrain, population }) => { const box = document.createElement("div"); box.classList.add("box"); box.innerHTML = this._render({ name, terrain, population, }); document.body.querySelector(".main").appendChild(box); }) } _render({ name, terrain, population, image = '' }) { return ` <article class="media"> <div class="media-left"> <figure class="image is-64x64"> <img src="${image}" alt="planet"> </figure> </div> <div class="media-content"> <div class="content"> <h4>${name}</h4> <p> <span class="tag">${terrain}</span> <span class="tag">${population}</span> <br> </p> </div> </div> </article> `; } // we can leave these two alone for now _startLoading() { console.log('loading'); } _stopLoading() { console.log('finished'); } } new Application(); <main class="main"></main>