如何在JavaScript中操作API結果？

我正在學習使用 API，我需要一些幫助。

我選擇了yahoo Finance API，并試圖解釋結果。為此，我只想訪問一些資料并將其顯示在螢屏上。我真的不知道我該怎么做。什么是正確的方法？

var configuration = {
  method: "GET",
  headers: {
    "x-rapidapi-host": "yh-finance.p.rapidapi.com",
    "x-rapidapi-key": "9ac5b9a91dmshc51815b4efc8942p149234jsnb64a2f32b56d",
  },
};
var url =
  "https://yh-finance.p.rapidapi.com/stock/v2/get-chart?interval=1d&symbol=AMRN&range=1d&region=US";

var name = document.querySelector("stock-name");
var price = document.querySelector("stock-price");
var high = document.querySelector("stock-high");
var currency = document.querySelector("stock-currency");

fetch(url, configuration)
  .then(function (response) {
    if (response.status !== 200) {
      console.log(
        "Looks like there was a problem. Status Code: "   response.status
      );
      return;
    }

    // Examine the text in the response
    response.json().then(function (data) {
      console.log(data);
      displayData(data);
    });
  })
  .catch(function (err) {
    console.log("Fetch Error :-S", err);
  });

//displaying some data from API
function displayData(stockData) {
  name.innerHTML = "Stock name:"   Object.keys(stockData.meta.symbol);
  price.innetHTML = "Stock's price:"   stockData.priceHint;
  high.innerHTML = "Stock's high:"   stockData.indicators.quote[0].high[0];
  currency.innerHTML = "Stock's currecy:"   stockData.meta.currency;
}

 </div>
      <div><h3 id = "stock-name"></h3>
        <h3 id = "stock-price"></h3>
        <h3  id = "stock-high"></h3>
        <h3 id = "stock-currency"></h3>
      </div>

我不是 Jquery 的粉絲。

我嘗試從控制臺中的 API 訪問資料：

console.log(Object.keys(stockData.chart.result[0].meta));

console.log(Object.values(stockData.chart.result[0].meta));

看看我是否可以像這樣訪問它，但我不能訪問一個元素，比如 meta[x]，只能訪問整個陣列。

有誰知道我在哪里可以了解有關從 API 操作資料的更多資訊？沒找到好的資料。。。

uj5u.com熱心網友回復：

您可以簡單地在您的 JS 檔案中進行以下更改：

const configuration = {
    method: "GET",
    headers: {
      "x-rapidapi-host": "yh-finance.p.rapidapi.com",
      "x-rapidapi-key": "9ac5b9a91dmshc51815b4efc8942p149234jsnb64a2f32b56d",
    },
  };


const url =
  "https://yh-finance.p.rapidapi.com/stock/v2/get-chart?interval=1d&symbol=AMRN&range=1d&region=US";

const name = document.querySelector("#stock-name");
const price = document.querySelector("#stock-price");
const high = document.querySelector("#stock-high");
const currency = document.querySelector("#stock-currency");

fetch(url, configuration)
  .then(function (response) {
    if (response.status !== 200) {
      console.log(
        "Looks like there was a problem. Status Code: "   response.status
      );
      return;
    }

    // Examine the text in the response
    response.json().then(function (data) {
      console.log(data);
      displayData(data);
    });
  })
  .catch(function (err) {
    console.log("Fetch Error :-S", err);
  });

//displaying some data from API
function displayData(stockData) {
  let metadata = stockData.chart.result[0].meta;  
  let indicators =  stockData.chart.result[0].indicators;
  name.innerText = "Stock name:"   metadata.symbol;
  price.innerText = "Stock's price:"   metadata.priceHint;
  high.innerText = "Stock's high:"   indicators.quote[0].high[0];
  currency.innerText = "Stock's currecy:"   metadata.currency;
}

在這里您可以在innerHTML 和innerText 之間進行選擇，因為您只是想注入我使用過的innerText 的值。

uj5u.com熱心網友回復：

{
  "chart": {
    "result": [
      {
        "meta": {
          "currency": "USD",
          "symbol": "AMRN",
          "exchangeName": "NGM",
          "instrumentType": "EQUITY",
          "firstTradeDate": 733674600,
          "regularMarketTime": 1644440402,
          "gmtoffset": -18000,
          "timezone": "EST",
          "exchangeTimezoneName": "America/New_York",
          "regularMarketPrice": 3.69,
          "chartPreviousClose": 3.53,
          "priceHint": 4,
          "currentTradingPeriod": {
            "pre": {
              "timezone": "EST",
              "end": 1644503400,
              "start": 1644483600,
              "gmtoffset": -18000
            },
            "regular": {
              "timezone": "EST",
              "end": 1644526800,
              "start": 1644503400,
              "gmtoffset": -18000
            },
            "post": {
              "timezone": "EST",
              "end": 1644541200,
              "start": 1644526800,
              "gmtoffset": -18000
            }
          },
          "dataGranularity": "1d",
          "range": "1d",
          "validRanges": [
            "1d",
            "5d",
            "1mo",
            "3mo",
            "6mo",
            "1y",
            "2y",
            "5y",
            "10y",
            "ytd",
            "max"
          ]
        },
        "timestamp": [
          1644417000,
          1644440402
        ],
        "indicators": {
          "quote": [
            {
              "open": [
                3.559999942779541,
                3.559999942779541
              ],
              "close": [
                3.690000057220459,
                3.690000057220459
              ],
              "high": [
                3.740000009536743,
                3.740000009536743
              ],
              "volume": [
                2084300,
                2089304
              ],
              "low": [
                3.559999942779541,
                3.559999942779541
              ]
            }
          ],
          "adjclose": [
            {
              "adjclose": [
                3.690000057220459,
                3.690000057220459
              ]
            }
          ]
        }
      }
    ],
    "error": null
  }
}

示例回應我運行了你的代碼

const metaData = stockData.chart.result[0].meta

metaData.currency //'USD'
metaData.regularMarketPrice //3.69

如果您知道密鑰，則可以直接從中獲取值。

標籤：javascript api 拿来 雅虎财经

上一篇：節點中對crypto.com的API呼叫回傳無效的JSON回應

下一篇：使用C#呼叫Rest-API