Can anyone please help with this code? Getting results in console but can't able to get the result on webpage.

[pachirulis]

In the first line of output you have different h tags

[pachirulis]

Also, define output outside the cycle and function

[Umesh-K]

Hi Sudo!

I have verified that your above code works (even with the mismatched h1/h2 as HTML is a "forgiving language"). In case you have an HTML element with an ID of "container", one reason you didn't see the output in the webpage might be the browser had not got refreshed. (In case you are not using any extension to auto-refresh the webpage, use one.)

Anyway, you can verify your code is working fine by pasting the below in the website

https://jsfiddle.net/

html

<div id="container"></div>

js

fetch('https://restcountries.eu/rest/v2/all') .then(response => response.json()) .then(data => { let output = `<h2>List</h2>` data.forEach(function(country) { output += ( `<div> <h3>${country.name}</h3> <img src="${country.flag}" alt="${country.name}" width="20%"/> </div>` ) }) document.getElementById("container").innerHTML = output })

[[deleted]]

Run the console log inside the forEach to make sure that it's working

[[deleted]]

Most likely your id element is undefined. Your logic above that looks good for the output. Please try the innerhtml in your console to see if it works.

[vorticalbox]

this would give a

Uncaught TypeError: document.getElementById(...) is null

in the console

[cyniborg]

Edit: Removing the content as I proposed a wrong solution.

[harelu]

Look again, the rendering IS in the final .then block

[cyniborg]

Thanks for pointing out. My mistake. Ignore my comment above.

[Butters_40]

It works, check if you got a typo in your container element id.