Fetched with fetch(), but can't display it with DOM API

[Firmus]

I have an exam tomorrow, so if anyone could help me with this problem, I’d be very thankful.
The thing is I fetch the data with fetch() API, then inside .then I have a function to only select names and emails, create <li> elements, change some inner HTML, and then try to append the object which contains all <li> elements to <ul> element. But although the DocumentFragment object called “list” looks fine when I check it with console.log(), it just doesn’t seem to work.
Here is the code, it’s pretty straight-forward.
https://codepen.io/firmus/pen/abqxMBZ
When I do the same thing, but without the fetch API, “list” object looks the same to me, and it works. So I don’t understand where is the problem. This is the same code but without fetch():
https://codepen.io/firmus/pen/YzeMgpr
Thank you all in advance!

[colinthornton]

You’ve appended the list immediately after calling fetch. The list is still empty at that point because the request is asynchronous. You need to move the logic into the then block of the fetch.

---

Unrelated to your bug:

• map() is for mapping the contents of one array into the contents of another array of the same size. You’re not even saving the return value of map() to a variable or using it in any way, instead you’re creating side effects here by appending things to list. You should use forEach() for side effects.
• If you’re setting the text of an element, the textContent property (MDN) is more idiomatic than innerHTML.
• Lastly, I would just change the name of the parameter to author here:

.then((data) => {
  let authors = data;