In my JavaScript code, I keep getting the error message:

Uncaught (in promise) TypeError: data.forEach is not a function

HTML:

<p class="text3"><span class="status"></span></p>
<p class="text"><span class="players"></span></p>

JS:

Working

<script>
  let url = '';
  const playersDiv = document.querySelector('.players');
  fetch(url)
    .then((res) => res.json())
    .then((players) => {
      console.log(players);
      generateHtml(players)
    })
  const generateHtml = (data) => {
    var html = ``;
    data.forEach(player => {
      html += `<div class="name" style="position: relative; font-size: 20px;display: block;width: 100%;"><center>${player.name}</center>`;
    })
    playersDiv.insertAdjacentHTML('afterBegin', html)
  }

</script>

Not working

<script>
  let url1 = '';
  const onlinernDiv = document.querySelector('.status');
  fetch(url1)
    .then((res) => res.json())
    .then((status) => {
      console.log(status);
      generateHtmls(status)
    })
  const generateHtmls = (data) => {
    var html = ``;
    data.forEach(status => {
      html += `<div class="name" style="position: relative; font-size: 20px;display: block;width: 100%;"><center>${status.players}</center>`;
    })
    onlinernDiv.insertAdjacentHTML('afterBegin', html)
  }

</script>

The first script works, but the second one doesn't. Why am I getting the error in the second script?

In my JavaScript code, I keep getting the error message:

Uncaught (in promise) TypeError: data.forEach is not a function

HTML:

<p class="text3"><span class="status"></span></p>
<p class="text"><span class="players"></span></p>

JS:

Working

<script>
  let url = 'https://api.rust-servers.info/players/3450';
  const playersDiv = document.querySelector('.players');
  fetch(url)
    .then((res) => res.json())
    .then((players) => {
      console.log(players);
      generateHtml(players)
    })
  const generateHtml = (data) => {
    var html = ``;
    data.forEach(player => {
      html += `<div class="name" style="position: relative; font-size: 20px;display: block;width: 100%;"><center>${player.name}</center>`;
    })
    playersDiv.insertAdjacentHTML('afterBegin', html)
  }

</script>

Not working

<script>
  let url1 = 'https://api.rust-servers.info/status/3450';
  const onlinernDiv = document.querySelector('.status');
  fetch(url1)
    .then((res) => res.json())
    .then((status) => {
      console.log(status);
      generateHtmls(status)
    })
  const generateHtmls = (data) => {
    var html = ``;
    data.forEach(status => {
      html += `<div class="name" style="position: relative; font-size: 20px;display: block;width: 100%;"><center>${status.players}</center>`;
    })
    onlinernDiv.insertAdjacentHTML('afterBegin', html)
  }

</script>

The first script works, but the second one doesn't. Why am I getting the error in the second script?

• javascript
• html

Share Improve this question Follow edited May 13, 2020 at 19:45 Kukeltje 12.3k44 gold badges2626 silver badges4747 bronze badges asked Mar 10, 2020 at 20:51 ImbigtrollerImbigtroller 3111 silver badge22 bronze badges 3

• What's the error? Edit... I'm stupid, generally the error should be in the body though. – Phix Commented Mar 10, 2020 at 20:54
• @Phix There error is in the title. I don't think anyone can help you unless you tell us what data is. Is it an array? I bet it's not. – mwilson Commented Mar 10, 2020 at 20:55
• developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Marvin Commented Mar 10, 2020 at 21:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The second part (https://api.rust-servers.info/status/3450) causes the issue.

The server returns:

{
  "name": "Sharons Server",
  "status": "Online",
  "last_seen": "1583873401",
  "players": "19",
  "players_max": "200",
  "fps": "222",
  "uptime": "3 days, 13 hrs"
}

Which is an object, not an array. So you cannot use .forEach() on it.

I ran into this the other day debugging our frontend. The forEach would break when an Object was returned, so we needed something else to iterate over the response.

Turns out sometimes my promise returns a Object, sometimes it returned an array. If there was a lot of results to sort thru and the promise took longer I always got an object back.

So this works for both an array and an Object with rows.

if (Object.keys(players).length > 0) {
  for (const key in players) {
    html += '<div>' + players[key].status + '</div>';
  }
}