How to display data from jquery api call for stock price-CodePudding

I am trying to display the end of day (eod) stock price for a share (Lloyds Bank) for a school project.

I have an account with marketstack.com who provide the API. The URL request works well, but I would really love some help helping me display this on a page.

The URL is: https://api.marketstack.com/v1/tickers/LLOY.XLON/eod/latest?access_key=YOUR_API_KEY

(I've removed my API key).

This returns the following:

{"open":42.4,"high":43.575,"low":42.195,"close":43.395,"volume":139808684.0,"adj_high":null,"adj_low":null,"adj_close":43.395,"adj_open":null,"adj_volume":null,"split_factor":1.0,"dividend":0.0,"symbol":"LLOY.XLON","exchange":"XLON","date":"2022-06-24T00:00:00 0000"}

Marketstack have provided the following example Jqeury code as a demo.

<script>
$.ajax({
  url: 'https://api.marketstack.com/v1/tickers/aapl/eod',
  data: {
    access_key: 'YOUR_ACCESS_KEY'
  },
  dataType: 'json',
  success: function(apiResponse) {
    if (Array.isArray(apiResponse['data'])) {
      apiResponse['data'].forEach(stockData => {
            console.log(`Ticker ${stockData['symbol']}`,
                `has a day high of ${stockData['high']},
                `on ${stockData['date']}`);
      });
    }
  }
});
</script>

How do I make the API call, get the 'close' value and get it as a var object so I can display in on my page?

Thank you for your help - I hope to help others with their code someday!

Updated code below:

<script>
$.ajax({
  url: 'https://api.marketstack.com/v1/tickers/NWG.XLON/eod/latest',
  data: {
  access_key: 'b391c31dfc8a648bd50b9b0befc8bec7'},
  dataType: 'json',
  success: function(apiResponse)
  {if (Array.isArray(apiResponse['data'])) {
  apiResponse['data'].forEach(stockData => {
   console.log(`Ticker ${stockData.symbol}, has a day high of ${stockData.high}, on ${stockData.date}`);
  });
}
}
});
</script>

Removed the {if (Array.isArray block

<script>
$.ajax({
  url: 'https://api.marketstack.com/v1/tickers/NWG.XLON/eod/latest',
  data: {
  access_key: 'b391c31dfc8a648bd50b9b0befc8bec7'},
  dataType: 'json',
  success: function(apiResponse)
});
</script>

CodePudding user response：

Your logic is correct. The issue you have is that your syntax around the template literal is incorrect. You have used too many ` characters. It's clearer to see this if you keep the literal on a single line.

// mock response:
let apiResponse = {"pagination":{"limit":100,"offset":0,"count":1,"total":1},"data":[{"open":42.4,"high":43.575,"low":42.195,"close":43.395,"volume":139808684.0,"adj_high":null,"adj_low":null,"adj_close":43.395,"adj_open":null,"adj_volume":null,"split_factor":1.0,"dividend":0.0,"symbol":"LLOY.XLON","exchange":"XLON","date":"2022-06-24T00:00:00 0000"}]}

// inside AJAX succes handler:
if (Array.isArray(apiResponse['data'])) {
  apiResponse['data'].forEach(stockData => {
    console.log(`Ticker ${stockData.symbol}, has a day high of ${stockData.high}, on ${stockData.date}`);
  });
}