Clash Royale CLAN TAG#URR8PPP

Dynamically update html content plain JS

So I have a script bound in my index.html, which literally has to fetch an array of jsons from an api, then dynamically update my page when get response.

But as a result I'm getting an as the only update of my page.

here is my script

fetch(url)
.then((resp) => resp.json())
.then((resp) =>
resp.results.forEach(item =>
fetch(item.url)
.then((response)=> response.json())
.then((response) => pokeArr.push(response))
.catch(console.log)
)
).catch(console.log)


const filler = () =>
if(!pokeArr) return 0
pokeArr.map((i,j)=>
return `<tr>$i.name</tr>`
)


const pokeindex = () =>
document.getElementById('a').appendChild(document.createElement(filler()))

pokeindex()


When I'm consoling it, I can see in the console all the responses I get, so I'm at least doing the fetching part right.

parberakan

pokeArr

document.createElement

document.createElement("div")

fetch

.ok

fetch

1 Answer
1

There are a number of issues here:

You have parberakan in one place but pokeArr in another; in a comment you've suggested they're meant to be the same thing.

parberakan

pokeArr

You don't declare parberakan/pokeArr anywhere in the quoted code.

parberakan

pokeArr

Nothing in the quoted code is waiting for the various fetch calls to complete (not even the first, and esp. not the series of them in one of its then handlers).

fetch

then

The fetch calls aren't checking .ok; see the post on my anemic little blog.

fetch

.ok

document.createElement doesn't accept HTML strings. It accepts the tag name of the single element to create (e.g., document.createElement("div")).

document.createElement

document.createElement("div")

filler doesn't return the result of map.

filler

map

Passing console.log directly to catch isn't 100% reliable.

console.log

catch

At a rough guess, I suspect you want to do something like this (see comments), but I do recommend stepping back from your current task and working through some basic tutorials:

// Create these functions first
const filler = (pokeArray) => // Accept the array as a parameter
if(!pokeArray) return null; // Recommend null instead of 0 if the other return is an array
return pokeArray.map((i,j)=> // Return the result of `map`
return `<tr>$i.name</tr>`;
);
;

const pokeindex = (pokeArray) => // Accept the array as a parameter
// I'm assuming the element with id="a" is a `table` or `tbody`
document.getElementById('a').insertAdjacentHTML( // This accepts HTML
"beforeend",
fillter(pokeArray)
);


fetch(url)
.then((resp) =>
// Check .ok
if (!resp.ok)
throw new Error("HTTP error " + resp.status);

return resp;
)
.then((resp) => resp.json())
.then((resp) => Promise.all(resp.results.map(item => // Wait for all these to complete;
// result is an array of the
// resolution values
return fetch(item.url)
.then((response) =>
// Check .ok
if (!response.ok)
throw new Error("HTTP error " + resp.status);

return response;
)
.then((response) => response.json());
)))
.then((pokeArray) =>
// Now we have the array and can do something
pokeindex(pokeArray);
)
.catch(error => console.log(error); ); // Passing `console.log` directly isn't reliable


I may not have caught every last little thing, though. This is just to help get you pointed the right way.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.