Array.forEach() method not working with an array containing text elements

Question

I'm in the process of learning how to make fetch api calls and return an array with a list of certain usernames. In the below code that I've written, the array that I was looking for seems to have been generated fine. However, when I try using .forEach() method on the array, it just does not seem to work. If I change the array contents to simple numbers like 1,2,3 etc, the .forEach() method seems to work as expected. Please let me know what am I missing out here? Thanks!

function getUsers() {
  let returnArray = [];
  fetch("https://api.github.com/users")
    .then((data) => data.json())
    .then((data) => {
      data.forEach((item) => {
        returnArray.push(item.login);
      });
    });

  return returnArray;
}

function createListItem(text) {
  let li = document.createElement("li");
  li.textConent = text;
  return li;
}

function addUsersToDOM() {
  let body = document.getElementById("my-body");

  namesArray = getUsers();
  console.log(namesArray); //Getting an array with the text elements

  namesArray.forEach((item) => {
    console.log(item); // Console log of individual text elements not working
  });
}

addUsersToDOM();

If I change the array contents to simple numbers like 1,2,3 etc, the .forEach() method seems to work as expected.

Did you use the debugger? You can see what data actually contains before you loop through it to see if it matches your expectations. — infinitezero, Dec 02 '22 at 06:14
The issue is likely because the `getUsers()` function is asynchronous, meaning that it does not return the `returnArray` array immediately. Instead, the `returnArray` is only available after the fetch call has completed. — Andrew Shearer, Dec 02 '22 at 06:16

Carsten Massmann · Answer 1 · 2022-12-02T06:38:47.393

You need to turn your addUsersToDOM() function into an async function:

function getUsers(){
  return fetch("https://api.github.com/users")
    .then(data => data.json())
    .then(data => data.map(item=>item.login));
}

async function addUsersToDOM() {
  namesArray = await getUsers();
  console.log(namesArray);
}

addUsersToDOM();

I also changed the inner .forEach() loop into a .map(). This makes it easier to generate an array of login names.

Alternatively you can of course also work with the .then() method:

function getUsers(){
  return fetch("https://api.github.com/users")
    .then(data => data.json())
    .then(data => data.map(item=>item.login));
}

function addUsersToDOM() {
  getUsers().then(console.log);
}

addUsersToDOM();

In either case you need to acknowledge that getUsers() returns a promise and not a direct result.

score 0 · Answer 2 · answered Dec 02 '22 at 06:28

namesArray = getUsers();

It get result of getUsers before getting data of users. And you have empty array. You have to wait response by API and then put it in namesArray

You can achieve this in the following way

function getUsers() {
  let returnArray = [];
  // return Promise
  return fetch("https://api.github.com/users")
    .then((data) => data.json())
    .then((data) => {
      data.forEach((item) => {
        returnArray.push(item.login);
      });
      // return result by API
      return returnArray;
    });


}

function createListItem(text) {
  let li = document.createElement("li");
  li.textConent = text;
  return li;
}

// async before function
async function addUsersToDOM() {
  let body = document.getElementById("my-body");

  // await for waiting result
  namesArray = await getUsers();
  console.log('namesArray', namesArray); //Getting an array with the text elements

  namesArray.forEach((item) => {
    console.log(item); // Console log of individual text elements not working
  });
}

addUsersToDOM();

Array.forEach() method not working with an array containing text elements

2 Answers2