Fetch API with API key

JavaScript
1

I am making a lot of breaks in the process of trying to learn to code and I am generally not satisfied with how it is going for me. But this time I finally managed to get some data from APIs out there and thought it will be better this time. However, as soon as the API is more complex I am stuck.

Could anyone tell me what should I do with this code to get the data? I always get ‘TypeError: Failed to fetch’ in the console.

This is my code:

const url = "http://api.football-data.org/v2/matches";
fetch(url, {
  method: "GET",
  withCredentials: true,
  headers: {
    "X-Auth-Token": "ef72570ff371408f9668e414353b7b2e",
    "Content-Type": "application/json"
  }
})
  .then(resp => resp.json())
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  });
3

Thank you very much!

I hope it is not too much to ask for further help?

window.addEventListener("load", function() {
  const url = "https://api.football-data.org/v2/competitions/2014/standings";
  fetch(url, {
    method: "GET",
    headers: {
      "X-Auth-Token": "ef72570ff371408f9668e414353b7b2e"
    }
  })
    .then(resp => resp.json())
    .then(function(data) {
      console.log(data);

      let output = "";
      output += `<p>Started on ${data.season.startDate}, ending on ${data.season.endDate}</p>`;

      let overallTable = "";

      for (let i = 0; i < data.standings[0].table.length; i++) {
        overallTable += `${data.standings[0].table[i].team.name} 
        ${data.standings[0].table[i].points}`;
      }

      document.getElementById("output").innerHTML = output;
      document.getElementById("overallTable").innerHTML = overallTable;
    })
    .catch(function(error) {
      console.log(error);
    });
});

This is my new code and this is what I get : http://prntscr.com/pbiwec

So, I get correct data and data I wanted, but ideally I would like to loop with forEach (I have tried that as well, but couldn’t get it to work) and get this data as the real table. I know I should use document.createElement to create table rows and table data, so I could get for example
Real Madrid 14
Real Sociedad 13
Atletico 13 etc
but I can’t get it right, could you help me please?

5

Thanks and I am not looking at the code yet :slight_smile:

window.addEventListener("load", function() {
  const url = "https://api.football-data.org/v2/competitions/2014/standings";
  fetch(url, {
    method: "GET",
    headers: {
      "X-Auth-Token": "ef72570ff371408f9668e414353b7b2e"
    }
  })
    .then(resp => resp.json())
    .then(function(data) {
      console.log(data);

      let output = "";
      output += `<p>Started on ${data.season.startDate}, ending on ${data.season.endDate}</p>`;

      let table = document.createElement("table");
      let thead = document.createElement("thead");
      let trow = document.createElement("tr");

      for (let i = 0; i < data.standings[0].table.length; i++) {
        // overallTable += `${data.standings[0].table[i].team.name}
        // ${data.standings[0].table[i].points}`;

        let td = document.createElement("td");
        td.appendChild(document.createTextNode("testing"));
        // document.createTextNode(data.standings[0].table[i].team.name)

        trow.appendChild(td);
      }

      thead.appendChild(trow);
      table.appendChild(thead);

      document.getElementById("output").innerHTML = output;
      document.getElementById("overallTable").innerHTML = table;
    })
    .catch(function(error) {
      console.log(error);
    });
});

I am trying with something like this but now instead of getting data from the API I get this: http://prntscr.com/pbjo1d

I would have to sleep now and will try to fix this tomorrow, thanks for your help :slight_smile:

8

Thanks a lot, I understand what is going on now :slight_smile:


      let table = document.createElement("table");
      let thead = document.createElement("thead");
      let trow = document.createElement("tr");

      thead.appendChild(trow);
      table.appendChild(thead);

      for (let i = 0; i < data.standings[0].table.length; i++) {
        let trow = document.createElement("tr");
        // overallTable += `${data.standings[0].table[i].team.name}
        // ${data.standings[0].table[i].points}`;

        let td = document.createElement("td");
        td.appendChild(
          document.createTextNode(`${data.standings[0].table[i].team.name}`)
        );
        trow.appendChild(td);
        td = document.createElement("td");
        td.appendChild(
          document.createTextNode(`${data.standings[0].table[i].points}`)
        );
        trow.appendChild(td);
        table.appendChild(trow);
      }
      document.getElementById("output").innerHTML = output;
      document.getElementById("overallTable").appendChild(table);
    })

I commented out this overallTable +=… because it looks unnecessary, it works without that too… now this is what I have: http://prntscr.com/pbv1a0

Just for curiosity, is this possible with forEach as well?

Looked at your code too now and it looks very nice, I will type it out now to see how could I use it with API data instead of hardcoding it :slight_smile:

10

Hi Randell,

I modified your code and googled about reduce method but I don’t understand everything yet.

This is my modified code:

window.addEventListener("load", function() {
  const url = "https://api.football-data.org/v2/competitions/2014/standings";
  fetch(url, {
    method: "GET",
    headers: {
      "X-Auth-Token": "ef72570ff371408f9668e414353b7b2e"
    }
  })
    .then(resp => resp.json())
    .then(function(data) {
      console.log(data);

      const tableData = [
        {
          team: `${data.standings[0].table[8].team.name}`,
          points: `${data.standings[0].table[8].points}`
        }
      ];

      const rowDataHTML = tableData.reduce(
        (html, { team, points }) =>
          (html += `
      <tr>
        <td>${team}</td>
        <td>${points}</td>
        <br>
      </tr>
      `),
        ""
      );

      document.getElementById("table").innerHTML += rowDataHTML;
    });
});

If I place any number in square brackets, like for example data.standings[0].table[8].team.name I get correct team name, but when I place ‘i’ in [i] I obviously get the error ‘Uncaught (in promise) ReferenceError: i is not defined’
Where should I define the iterator here or there is no need for [i] at all?

12

Thank you very much, I will try to figure this out before looking at the code :slight_smile:

14

Why we don’t get the first object with this code? I don’t understand it…

16

Wow, strange :slight_smile: This is a real mystery for me, I really lose confidence that I will ever master JS…