Извлечение данных из API с помощью Fetch API в HTML с помощью JavaScript

Эй, я изо всех сил пытаюсь получить API. У меня просто не получается.

<!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>

Я хотел бы использовать API выше и хотел бы получить данные, если это так. Однако все, что я пробовал до сих пор, не сработало.

Я пробовал много разных вещей, чтобы получить данные. Я никогда не работал с этим раньше, поэтому я не могу понять это.

и что значит "не работает"?

— 04.06.2023 19:34

data.webshops.forEach(...

— 04.06.2023 19:36

javascript html api fetch-api

04.06.2023 19:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы просто не так сосредоточены на своих данных. Вы должны повторить data.webshops и использовать разные имена полей в объекте интернет-магазина:

    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>

Я также не рекомендую добавлять элементы с DOM, это медленно, используйте чистый 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>

Спасибо за быстрый ответ! Это сработало, и я очень ценю вашу помощь!

— 04.06.2023 21:06

@ Джорди, пожалуйста, я добавил тебя в свой белый список, чтобы помочь тебе в будущем.

— 04.06.2023 21:11

У меня вопрос по вашему коду: между всеми строками в выводе стоит запятая. Можно ли избавиться от этих запятых?

— 04.06.2023 21:42

@ Джорди, извини, мой плохой! это потому, что я забыл Array::join('') соединить строки с пустой строкой. зафиксированный!

— 04.06.2023 21:46

04.06.2023 19:36

Проблема в том, что данные должны быть массивом, а вместо этого представляют собой Object {webshops: Array(694)}. Замените data.foreach(item => { на Object.values(item => {. Затем прокрутите каждый из массивов внутри объекта и соберите данные. Однако при этом я понял, что объекты принимают форму Object {category: "Gifts", name_short: "Sinterklaas-feestwinkel.nl", name_long: "Sinterklaas-feestwinkel.nl", description: "De Sinterklaas-feestwinkel.nl is er voor alle Sinterklaas inkopen, naast een grote assortiment Sinterklaas versiering en Sinterklaas en Zwarte pieten kostuums heeft deze winkel ook kado’s voor jong en oud. Hier vindt men alles voor een geslaagde Sinterklaas avond.", logo_120x60: "https://www.sponsorkliks.com/gfx/partners/sinterklaas-feestwinkel.png", …}, поэтому я думаю, что вы ошиблись, когда написали URL. Вместо URL я заменил его на «описание», как показано ниже:

<!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>Description</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');
        Object.values(data).forEach(item => {
          item.forEach((item) => {
            const row = document.createElement('tr');
            const nameCell = document.createElement('td');
            nameCell.textContent = item.name_short;
            row.appendChild(nameCell);
            const descriptionCell = document.createElement('td');
            const description = document.createElement('div');
            description.innerHTML = item.description;
            descriptionCell.appendChild(description);
            row.appendChild(descriptionCell);
            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));
  </script>
</body>
</html>

Однако будьте осторожны, так как я отключил экранирование скрипта, поэтому, если у API есть скрытый тег <script>, он запустится, и это приведет к атаке с внедрением кода.

Ой, я не знал, что URL-адрес был скрыт внутри объекта...

— 04.06.2023 20:03

Спасибо за быстрый ответ! Это сработало, и я очень ценю вашу помощь!

— 04.06.2023 21:06

04.06.2023 20:01