How to fetch JSON array with dynamic data in Javascript?

Question

I'm currently working on university project, creating currency converter. I would like to implement history page, where I can use JSON from exchangeratesapi.io API response and display it in a table on PHP page.

For example: https://api.exchangeratesapi.io/history?start_at=2019-04-22&end_at=2019-04-25&base=EUR&symbols=USD

{"base":"EUR","rates":{"2019-04-23":{"USD":1.1245},"2019-04-24":{"USD":1.1209},"2019-04-25":{"USD":1.1123}},"end_at":"2019-04-25","start_at":"2019-04-22"}

The problem is that the desired values are stored in an "rates" array, in which all values are changed dynamically (date and exchange rate itself) and I can not fetch and display them through the document.getElementById("").innerHTML in Javascript.

How can I fetch data from such an array into a table in HTML?

Answer 1

You can loop through data and list items as below:

for (var key in data.rates) {
    console.log('Date: '+ key);
    console.log('Rate: '+ data.rates[key]['USD']);
}

Check sample code here: