How to manipulate API results in JavaScript?

Question

I am learning to use an API and I need some help.

I chose Yahoo Finance API and I'm trying to interpret the results. For this, I want to just access some of the data and display it on screen. I don't really know how I should do this. What is the correct method?

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>

I am not a fan of jQuery.

I tried accessing the data from API in the console with:

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

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

to see if I can access it like this, but I can't access one element, like meta[x], only the whole array.

Does anyone know where can I learn more about manipulating data from API? I couldn't find any good information...

Answer 1

you can simple make following changes in you JS file :

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;
}

here you can choose between innerHTML and innerText, as you just wanted to inject the values I have used the innerText.