REST API Fetch - JSON to HTML : Check my Code

Hello everyone.

I’ve been following a few JSON to HTML tutorials and can’t figure out what’s causing ‘undefined’ to display in my HTML results even when I replace ‘response’ with ‘element’. No errors are logged in the console. Would someone be kind enough to have a look at my code and give me some feedback?

Code:

h1 Results /h1
div id=“result” /div

const result = document.getElementById(‘result’);
let url = ‘https://jsonplaceholder.typicode.com/users’;
fetch(url)
.then(response => response.json())
.then((response) => {
console.log(response);
response.forEach( response => {
var result = document.getElementById(‘result’);
var html = “div” + response.occupation + “/div” + “br br”;
result.innerHTML += html;
})
});

*** Removed tags to prevent HTML interpretation ***

I don’t know if I can help you, but I’ll try.
I have a few questions for you:

  • why sometimes do you wrap the parameter of arrow function declaration between brackets and sometimes you don’t?
  • why do you define variable result two times? Once as a constant and another time as var?
  • why do you use innerHTML instead of textContent?

Cheers

@usernamegiapreso
Thank you for pointing that out to me. That was a mistake I made. I’ll fix it now.

I chose to use innerHTML so that the browser would be able to interpret any HTML references. It was a poor attempt to render HTML Divs with sample data from an API on a web page.

Alright, let me know, after you fix those, if you are still having problems, I just finished the JS course and if I can help you I’ll do it gladly.

You mentioned you finished with the JS course. I am as well BUT there is one last thing I would like to complete and I have spent days trying to figure it out. Did you do the very last extra assignment on the Wanderlust project…with the venue pictures?