coronavirus-tracker-api | fast API for tracking the global coronavirus | REST library

Like this

Use addEventListener on select and change the values to the numbers.

I added a "Please Select"

and changed the ID from cars to window.addEventListener("load",function() { document.getElementById("countrySel").addEventListener("change",getCovidStats); document.getElementById("countrySel").value="169"; getCovidStats() }) function getCovidStats() { const cc = document.getElementById("countrySel").value; if (cc==="") return; fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/'+cc) .then(function(resp) { return resp.json() }) .then(function(data) { let population = data.location.country_population; let update = data.location.last_updated; let confirmedCases = data.location.latest.confirmed; let deaths = data.location.latest.deaths; document.getElementById('population').innerHTML = population.toLocaleString('en'); document.getElementById('update').innerHTML = update.substr(0, 10); document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en'); document.getElementById('deaths').innerHTML = deaths.toLocaleString('en'); document.getElementById('percent').innerHTML = ((Number(deaths) / Number(confirmedCases)) * 100).toLocaleString("en", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + "%"; }) .catch(function() { console.log("error"); }) setInterval(getCovidStats, 43200000) // update every 12 hours } * { margin: 0; padding: 0; } html { height: 100%; width: 100%; } h1, h2 { font-family: 'Roboto', sans-serif; font-weight: 300; text-align: center; padding-bottom: 20px; font-size: 250%; } .title { background: linear-gradient(to right, #feb47b, #ff7e5f); padding: 20px; } .subtitle { padding: 20px; font-size: 150%; } div { padding: 20px; } .stats-container { text-align: center; float: right; display: inline-block; } .location-container { display: inline-block; } .data-container { border: 2px solid #feb47b; margin-right: 30%; margin-left: 30%; } h4 { font-size: 85%; color: gray; font-family: 'Roboto', sans-serif; font-weight: 300; text-align: center; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 5px; } .footer { font-family: 'Roboto', sans-serif; bottom: 0; font-size: 75%; padding: 5px; } Name Coronavirus Stats. Subtitle Tested positive Deaths Death percentage Country Country: Please select Netherlands Germany France Spain Italy Russia South-Korea USA

You're currently doing a v-for on coordinates. It should be on locations.

If locations don't have all the required props a MglMarker needs, transform them in the forEach but that's all you should do in that forEach (if you need it at all). Don't use it to populate this.country, this.cases or this.coordinates. You only want to set those when a marker is clicked (if, and only if, you have any functionality listening to changes on those Vue instance properties).

There might be more details which need to be fixed but, without a minimal reproducible example it's very difficult to spot them. Note: you'll need to create a mapbox public token with readonly permissions for your example to work.

To summarize: Move the functionality from your forEach into a function called showMarker or activateMarker. Call that function whenever a marker is clicked or, if that's what you want, call it on one of the locations to make it the currently active one.
What your code does now is: it makes all markers the currently active one, therefore only the last one iterated will be currently active.

Here's what your MglMarker iterator might look like:

The problem is that the endpoint https://coronavirus-tracker-api.herokuapp.com/v2/latest does not return locations. This is the response I get by calling it: