javascript - 如何更改我的代码以从 JSON 中获取可用于 InnerHTML div 或作为图像 src 的特定数据？

Question

我有一个从 Nomics 获取的 JSON，我想用它来填充 html 页面中的内容。我对 JSON 没有太多经验，所以这可能是一件非常简单的事情，但到目前为止我还找不到答案。（从示例中删除的 api 密钥）

这是我的代码：

fetch("https://api.nomics.com/v1/currencies/ticker?key=my-api-key-here&ids=BTC,ETH,XRP&interval=1d,30d&convert=EUR&per-page=100&page=1")
  .then(response => response.json())
  .then(data => document.getElementById('ideir').innerHTML = JSON.stringify(data, null, 3)  ) 

这给了我完整的字符串化 json，我想从中提取特定信息——这就是我缺少一些知识的地方。

结果将如下所示：

[
   {
      "id": "BTC",
      "currency": "BTC",
      "symbol": "BTC",
      "name": "Bitcoin",
      "logo_url": "https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/btc.svg",
      "status": "active",
      "price": "50174.91449652",
      "price_date": "2021-03-20T00:00:00Z",
      "price_timestamp": "2021-03-20T15:10:00Z",
      "circulating_supply": "18659250",
      "max_supply": "21000000",
      "market_cap": "936226273319",
      "num_exchanges": "382",
      "num_pairs": "57333",
      "num_pairs_unmapped": "5071",
      "first_candle": "2011-08-18T00:00:00Z",
      "first_trade": "2011-08-18T00:00:00Z",
      "first_order_book": "2017-01-06T00:00:00Z",
      "rank": "1",
      "rank_delta": "0",
      "high": "50836.15190105",
      "high_timestamp": "2021-03-13T00:00:00Z",
      "1d": {
         "volume": "50068846599.04",
         "price_change": "604.20312263",
         "price_change_pct": "0.0122",
         "volume_change": "-6707649140.17",
         "volume_change_pct": "-0.1181",
         "market_cap_change": "11323250403.09",
         "market_cap_change_pct": "0.0122"
      },
      "30d": {
         "volume": "1794746211484.00",
         "price_change": "5265.06460419",
         "price_change_pct": "0.1172",
         "volume_change": "125914138620.24",
         "volume_change_pct": "0.0755",
         "market_cap_change": "99461459140.24",
         "market_cap_change_pct": "0.1189"
      }
   },

等等

问题是：如何更改我的代码以从 JSON 文件中获取特定属性以在我的 Html 中使用？例如使用 btc 的“id”、“logo_url”和“price”以及类似 1d 和 3d - “volume”的东西来增加趣味

标签： javascriptjsonfetch