Как получить данные из API ссылки

Question

Данные json файла выглядят так:

Хочу получить данные из этой API ссылки и вставить в выпадающий список input option только name по id. Я написал такой код, но данные из ссылки не выводятся

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
<h1>Select</h1>
    <div class="brands">
    <select id="select" class="brand">
      <option id="1"></option>
      <option id="2"></option>
      <option id="3"></option>
      <option id="4"></option>
      <option id="5"></option>
      <option id="6"></option>
    </select>
  </div>
  <script>
    const api_url = 'https://pcfy.redberryinternship.ge/api/brands';
    async function getBrand() {
      const response = await fetch(api_url);
      const data = await response.json();
      const { name } = data;

      document.getElementById('1').textContent = name;
      document.getElementById('2').textContent = name;
      document.getElementById('3').textContent = name;
      document.getElementById('4').textContent = name;
      document.getElementById('5').textContent = name;
      document.getElementById('6').textContent = name;
    }

    getBrand();
  </script>

С этим API все работает where is the iss

Раньше с API никогда не имел дела, поэтому мой вопрос покажется элементарным, но все равно прошу дать ответ.

Answer 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
<h1>Select</h1>
    <div class="brands">
    <select id="select" class="brand">
      
    </select>
  </div>
  <script>
    const api_url = 'https://pcfy.redberryinternship.ge/api/brands';
    async function getBrand() {
      const request = await fetch(api_url);
      const response = await request.json();
            
      const select = document.getElementById('select');
      
      response.data.forEach((item, i) => {
        const template = `
            <option id="_${i}">${item.name}</option>
        `
        select.insertAdjacentHTML('beforeend', template)
      })
    }

    getBrand();
  </script>

БЛОГ НА HUSL

Как получить данные из API ссылки

Ответы (1 шт):