I'm trying to make an application that gets all the planets from SWAPI and then displays them as boxes on the page. I have _load() method, which fetches the data, and _render() method, which is supposed to render the boxes. The _render() has name, terrain, population parameters.
Here is part of my code:
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() where I fetch the data
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>
`;
}
What I need to do is get the value for these parameters from the fetched data.
Pastebin - https://pastebin.com/hbxfHC1U
Based on your pastebin snippet I've made some adjustments.
First modify your _load function so that it returns the result the result from the SWAPI request. I've removed the function that you define within it, because it seemed unnesseccary and you're already inside of an async context.
Use the returned value of _load in your constructor and pass it to _create. (Your comments stated that this was your intention, anyway). Within _create loop over the data, create your box and call the _render method by passing the properties that you need from each item.
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>