I want to create a counter where it would display the population of a country and go update with fetch API. An example of this is here, https://www.worldometers.info/. I am using rapidAPi, country population, https://rapidapi.com/aldair.sr99/api/world-population/, and I have set up a function do so, however it does not work.
This is my code, I have cut out RapidAPI Key for oblivious reason.
<table>
<tr>
<th>Canada Population</th>
</tr>
<tr>
<td id="canadaPopulation"></td>
</tr>
</table>
<script>
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': '',
'X-RapidAPI-Host': 'world-population.p.rapidapi.com'
}
};
fetch('https://world-population.p.rapidapi.com/population?country_name=Canada', options)
.then(response => response.json())
.then(response => {
document.getElementById("canadaPopulation").innerHTML = response.body.world_population;
})
.catch(err => console.error(err));
function updatePeople() {
document.getElementById("canadaPopulation").innerHTML = parseInt(document.getElementById("canadaPopulation").innerHTML) + 11
} setInterval(updatePeople, 100)
</script>