api.js

var base_url = "https://api.football-data.org/";

var options={
  headers:{
    'X-Auth-Token' : 'b86150bba55f4b60b499005184cdab02'
  }
}

// Blok kode yang akan di panggil jika fetch berhasil
function status(response) {
  if (response.status !== 200) {
    console.log("Error : " + response.status);
    // Method reject() akan membuat blok catch terpanggil
    return Promise.reject(new Error(response.statusText));
  } else {
    // Mengubah suatu objek menjadi Promise agar bisa "di-then-kan"
    return Promise.resolve(response);
  }
}
// Blok kode untuk memparsing json menjadi array JavaScript
function json(response) {
  return response.json();
}
// Blok kode untuk meng-handle kesalahan di blok catch
function error(error) {
  // Parameter error berasal dari Promise.reject()
  console.log("Error : " + error);
}


// Blok kode untuk melakukan request data bundesliga json
function getArticles() {

  // untuk ambil cache dinamis

  if ("caches" in window) {
    caches.match(base_url + "v2/competitions/2002").then(function (response) {
        if (response) {
            response.json().then(function (data) {
              var articlesHTML = "";
        articlesHTML += `
          <a href="/pages/bundesliga.html">
              <div class="row" >
              <div class="col s12 ">
                <div class="card">
                  <div class="card-image" >
                    <img src="images/2002.png" style="height: 35vh;">
                  </div><hr>
                <div class="card-title truncate center-align purple-text text-darken-1">
                  <span >${data.name}</span>
                </div><hr>
                <div class="card-content">
                    <p>Wilayah   : ${data.area.name}</p>
                    <p>Mulai    : ${data.currentSeason.startDate}</p>
                    <p>Berakhir : ${data.currentSeason.endDate}</p>
                </div>
              </div>
              </div>
            </div>
          </a>
                  `;
      // Sisipkan komponen card ke dalam elemen dengan id #content
      document.getElementById("kompetisi").innerHTML = articlesHTML;
            })
        }
    })
  }


  fetch(base_url + "v2/competitions/2002", options)
    .then(status)
    .then(json)
    .then(function(data) {
      // Objek/array JavaScript dari response.json() masuk lewat data.
      // Menyusun komponen card artikel secara dinamis
      var articlesHTML = "";
        articlesHTML += `
          <a href="/pages/bundesliga.html">
              <div class="row" >
              <div class="col s12 ">
                <div class="card">
                  <div class="card-image" >
                    <img src="images/2002.png" style="height: 35vh;">
                  </div><hr>
                <div class="card-title truncate center-align purple-text text-darken-1">
                  <span >${data.name}</span>
                </div><hr>
                <div class="card-content">
                    <p>Wilayah   : ${data.area.name}</p>
                    <p>Mulai    : ${data.currentSeason.startDate}</p>
                    <p>Berakhir : ${data.currentSeason.endDate}</p>
                </div>
              </div>
              </div>
            </div>
          </a>
                  `;
      // Sisipkan komponen card ke dalam elemen dengan id #content
      document.getElementById("kompetisi").innerHTML = articlesHTML;
    })
}

//mengambil data kelasmen bundesliga

function getBundesliga() {

  if ("caches" in window) {
    caches.match(base_url + "v2/competitions/2002/standings").then(function (response) {
        if (response) {
            response.json().then(function (data) {
                console.log("Competition Data: " + data);
                var articlesHTML="";
      data.standings[0].table.forEach(function(data) {

        articlesHTML += `
            <tr>
            <td>${data.position}</td>
              <td>${data.team.name}</td>
              <td>${data.won}</td>
              <td>${data.draw}</td>
              <td>${data.lost}</td>
              <td>${data.goalDifference}</td>
            `;
      });
      // Sisipkan komponen card ke dalam elemen dengan id #content
      document.getElementById("namaklub").innerHTML = articlesHTML;
            })
        }
    })
}
  fetch(base_url + "v2/competitions/2002/standings", options)
    .then(status)
    .then(json)
    .then(function(data) {
      // Objek/array JavaScript dari response.json() masuk lewat data.
      // Menyusun komponen card artikel secara dinamis
      var articlesHTML="";
      data.standings[0].table.forEach(function(data) {

        articlesHTML += `
            <tr>
            <td>${data.position}</td>
              <td>${data.team.name}</td>
              <td>${data.won}</td>
              <td>${data.draw}</td>
              <td>${data.lost}</td>
              <td>${data.goalDifference}</td>
            `;
      });
      // Sisipkan komponen card ke dalam elemen dengan id #content
      document.getElementById("namaklub").innerHTML = articlesHTML;
    })
    .catch(error);
}