CODEWITHSUNDEEP
javascriptfetch
ivan milenkovic
ivan milenkovic

Reputation: 99

data.forEach is not a function when using API

This is the response from my API:

{count: 149, filters: {…}, competitions: Array(149)}
count: 149
filters: {}
competitions: Array(149)
[0 … 99]
[100 … 148]
100: {id: 2102, area: {…}, name: "Liga Panameña de Fútbol", code: null, emblemUrl: null, …}
101: {id: 2101, area: {…}, name: "Primera División", code: "PPD", emblemUrl: null, …}
102: {id: 2099, area: {…}, name: "Superpuchar Polski", code: null, emblemUrl: null, …}
103: {id: 2100, area: {…}, name: "Puchar Polski", code: null, emblemUrl: null, …}
104: {id: 2017, area: {…}, name: "Primeira Liga", code: "PPL", emblemUrl: null, …}
105: {id: 2096, area: {…}, name: "Liga2 Cabovisão", code: null, emblemUrl: null, …}

I want to have names of the competitions on my page but whatever I try I fail. This is the latest code:

const url = "http://api.football-data.org/v2/competitions";

async function getData() {
  const response = await fetch(url, {
    method: "GET",
    headers: {
      "X-Auth-Token": "ef72570ff371408f9668e414353b7b2e"
    }
  });
  const data = await response.json();
  console.log(data);

  let output = "";

  data.forEach(row => (output += `<p>${row.competitions[i].name}</p>`));

  document.getElementById('output').innerHTML = output;
}

getData();

How can I fix this?

Upvotes: 0

Views: 310

Answers (2)

Sydney Y
Sydney Y

Reputation: 3152

data is not an array, but data.competitions is, give that a try:

data.competitions.forEach(competition => {output += `<p>${competition.name}</p>`})

Upvotes: 2

brycelikesdogs
brycelikesdogs

Reputation: 151

forEach is used to iterate over values of an array, it can't be used on an object.

Maybe you mean to do data.competitions.forEach...

Upvotes: 1

Related Questions