如何从这个 api 中选择我需要的数据？答案

【问题标题】：How do I select the data I need from this api?如何从这个 api 中选择我需要的数据？
【发布时间】：2021-03-01 12:04:47
【问题描述】：

我正在尝试将此公共 API 连接到我的网站。我让它工作了，但它给了我所有的“买”和“卖”数据。而在现实中我只想获取蓝元、官方元、流动性元、元袋、团结元的购销数据。

在 fetch 中使用以下代码：

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();

【问题讨论】：

标签： javascript html arrays api fetch

【解决方案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();

&lt;div id="price"&gt;&lt;/div&gt;

在 map 函数中使用 if 条件将允许您将数据过滤到您要查找的内容。通过创建您感兴趣的名称数组，您只能包含您列出的名称的结果。

【讨论】：

是的！其作品！你知道如何正确添加更多吗？
@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();

&lt;div id="price"&gt;&lt;/div&gt;

对于 nombre 的不同值，您可以在 switch-case 循环中添加更多过滤器。

【讨论】：

谢谢兄弟，你救了我！