Fetching data from an API using the Fetch API in HTML with JavaScript

Hey I am struggling to fetch an API. I just don't get it to work.

<!DOCTYPE html>
<html>
<head>
  <title>Sponsorkliks API Table</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table id="api-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>URL</th>
        <th>Logo</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
      .then(response => response.json())
      .then(data => {
        const tableBody = document.querySelector('#api-table tbody');
        data.forEach(item => {
          const row = document.createElement('tr');
          const nameCell = document.createElement('td');
          nameCell.textContent = item.name;
          row.appendChild(nameCell);
          const urlCell = document.createElement('td');
          const urlLink = document.createElement('a');
          urlLink.href = item.url;
          urlLink.textContent = item.url;
          urlCell.appendChild(urlLink);
          row.appendChild(urlCell);
          const logoCell = document.createElement('td');
          const logoImg = document.createElement('img');
          logoImg.src = item.logo;
          logoImg.alt = item.name;
          logoImg.style.maxWidth = '100px'; // adjust size if needed
          logoCell.appendChild(logoImg);
          row.appendChild(logoCell);
          tableBody.appendChild(row);
        });
      })
      .catch(error => console.error(error));
  </script>
</body>
</html>

I would like to use the API above and would like to take data out if it. However, everything I tried so far did not work.

I tried a lot of different things to fetch the data. I have nevert worked with this before, so I can not figure it out.

Solution

You're just not so focused on your data. You should iterate data.webshops and use different field names in a webshop object:

    fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
      .then(response => response.json())
      .then(({webshops}) => {
        const tableBody = document.querySelector('#api-table tbody');
        webshops.forEach(item => {
          const row = document.createElement('tr');
          const nameCell = document.createElement('td');
          nameCell.textContent = item.name_short;
          row.appendChild(nameCell);
          const urlCell = document.createElement('td');
          const urlLink = document.createElement('a');
          urlLink.href = item.link;
          urlLink.textContent = item.orig_url;
          urlCell.appendChild(urlLink);
          row.appendChild(urlCell);
          const logoCell = document.createElement('td');
          const logoImg = document.createElement('img');
          logoImg.src = item.logo_120x60;
          logoImg.alt = item.name_short;
          logoImg.style.maxWidth = '100px'; // adjust size if needed
          logoCell.appendChild(logoImg);
          row.appendChild(logoCell);
          tableBody.appendChild(row);
        });
      })
      .catch(error => console.error(error));

    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }

  <table id="api-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>URL</th>
        <th>Logo</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

I also don't recommend adding elements with DOM, it's slow, use pure html:

fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
      .then(response => response.json())
      .then(({webshops}) => {
        document.querySelector('#api-table tbody').innerHTML = 
          webshops.map(item => 
          `<tr>
            <td>${item.name_short}</td>
            <td><a href="${item.link}">${item.orig_url}</td>
            <td>
              <img src="${item.logo_120x60}" 
                style="max-width:100px"
                alt="${item.name_short}">
            </td>
          </tr>`
          ).join('')
      })
      .catch(error => console.error(error));

table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }

<table id="api-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>URL</th>
        <th>Logo</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>