Как мне выбрать нужные мне данные из этого API?

#javascript #html #arrays #api #fetch

#javascript #HTML #массивы #API #выборка

Вопрос:

Я пытаюсь подключить этот общедоступный API к своему веб-сайту. Я заставил его работать, но он дает мне все данные «купить» и «продать». Когда на самом деле я хочу получить данные о покупке и продаже только синего доллара, официального доллара, доллара, подсчитанного с жидкостью, долларового мешка, доллара солидарности.

Используйте следующий код с выборкой:

 function fetchData() {
    fetch("https://www.dolarsi.com/api/api.php?type=valoresprincipales")

    .then(response => {
        return response.json();
    })
    .then(data => {
        console.log(data);
        const html = data
        .map(user => {
           
            return `
            <div class="user">
                <p>Compra: ${user.casa.compra}</p>
                <p>Venta: ${user.casa.ventas}</p>

          </div>
          `;
        })
        .join("");
        console.log(html);
        document
        .querySelector('#price')
        .insertAdjacentHTML("afterbegin", html); 

    });


}

fetchData();

Ответ №1:

Попробуйте так:

 function fetchData() {
    fetch("https://www.dolarsi.com/api/api.php?type=valoresprincipales")

    .then(response => {
        return response.json();
    })
    .then(data => {
        console.log(data);
        const html = data
        .map(user => {
           if(["Dolar Blue", "Dolar Oficial", "Dolar Contado con Liqui", "Dolar Bolsa"].indexOf(user.casa.nombre) !== -1) {
              return `
              <div class="user">
                  <p>Compra: ${user.casa.compra}</p>
                  <p>Venta: ${user.casa.venta}</p>

            </div>
            `
           } else {
            return '';
           };
        })
        .join("");
        console.log(html);
        document
        .querySelector('#price')
        .insertAdjacentHTML("afterbegin", html); 

    });
}

fetchData();

 <div id="price"></div>

Использование условия if внутри функции map позволит вам отфильтровать данные по тому, что вы ищете. Создавая массив интересующих вас имен, вы можете включать только те результаты, имена которых указаны вами.

1. Да! его работы! Знаете ли вы, как правильно добавить еще?

2. @FedericoAPPPEDIDO Извините, вы дали список. Я обновил ответ, чтобы показать вам, как это сделать. Пожалуйста, добавьте доллар Солидарности (я не вижу его в данных) 🙂

Ответ №2:

Это мое решение:

 function fetchData() {
  fetch("https://www.dolarsi.com/api/api.php?type=valoresprincipales")

    .then(response => {
      return response.json();
    })
    .then(data => {
      const filteredOutput = data.filter(item => {
        switch (item.casa.nombre) {
          case "Dolar Blue":
          case "Dolar Oficial":
            return item;
            break;
          default:
            return null;
        }
      })
      let html = "";
      filteredOutput.forEach(item => {
        html  = "<div class="user">";
        html  = "<p>" item.casa.compra   "</p>";
        html  = "<p>Venta:"   item.casa.venta   "</p>";
        html  = "</div>";
      })

      document
        .querySelector('#price')
        .insertAdjacentHTML("afterbegin", html);
    });
}

fetchData();

 <div id="price"></div>

Для другого значения nombre вы можете добавить больше фильтров в цикле переключения.