I'm facing this error when I am trying to loop over an array. Now I know that forEach() only works with arrays, and in my code, I'm using it on .value which is an array. I'm using this website to fetch the data:https://www.icndb.com/api/

Example output when fetching multiple jokes:

{ "type": "success", "value": [ { "id": 1, "joke": "Joke 1" }, { "id": 5, "joke": "Joke 5" }, { "id": 9, "joke": "Joke 9" } ] }

As you can see in my code below, I'm trying to loop over response.value, which seems to me an array. What is it that I'm missing?

function getJokes(e) {
  const number = document.querySelector('input[type="number"]').value;

  const xhr = new XMLHttpRequest();
  xhr.open("GET", `http://api.icndb.com/jokes/random/${number}`, true);
  xhr.onload = function() {
    if(this.status === 200) {
      const response = JSON.parse(this.responseText);
      
      let output = '';

      if(response.type === 'success') {
        response.value.forEach(function(joke){
          output  = `<li>${joke.joke}</li>`;
        });
      } else {
        output  = '<li>Something went wrong</li>';
      }

      document.querySelector('.jokes').innerHTML = output;
    }
  }
  xhr.send();

  e.preventDefault();
}

CodePudding user response：

Please check whether the response.value type is array or not before the forEach() by using Array.isArray

if (Array.isArray(response.value)) {
  response.value.forEach(function(joke){
          output  = `<li>${joke.joke}</li>`;
        });
}

I think this.responseText having no data. So please try this way to make an empty array if that object not having data.

[...response.value].forEach(function(joke){
              output  = `<li>${joke.joke}</li>`;
            });

If the above one is working then you need to check the values or some other forEach()

CodePudding user response：

Your code itself executes fine on http and returns data.

https://api.icndb.com

Their https certificate is expired.

http://api.icndb.com/jokes/random/${number}

You are probably trying to fetch their http address from a https source, which does not work.

CodePudding user response：

I called the API in the browser and it works and I could get all jokes.

fetch('http://api.icndb.com/jokes/random/5')
  .then(response => response.json())
  .then(data => data.value.forEach(joke => console.log(joke.joke)));

So the problem is not with your forEach method or data. The problem is that your response object seems to be empty or undefined. You need to check your response object and make sure that it is not empty before executing code below.

const response = JSON.parse(this.responseText); <--- here