How can I use JSON file in html?

Question

The link is this: https://covid.ourworldindata.org/data/owid-covid-data.json I want to use the data, for example, to calculate the sum of total number of cases. The sum of the cases is then place in the html document. However in the file it shows a lot of case with different dates. I just want the most updated case(the last case). How can I do that?

Answer 1

Edit

I want to extract one of the data (such as the total number of infected case) from each area, and make a sum of it

From your comment. Can't help with the HTML part, but I can with the logical part.

let sum = 0;
Object.keys(data).forEach((key) => (sum += data[key].data[0].total_cases))
console.log(sum)

Original

I didn't quite understand what you're trying to achieve. I built a small algorithm that simplifies big JSON data, and here's the output for your data collection. I hope it'll help you manipulate it. I'll edit my answer as you clarify what data you need to extract.

{
  "AFG": {
    "continent": "Asia",
    "location": "Afghanistan",
    "population": 38928341,
    "population_density": 54.422,
    "median_age": 18.6,
    "aged_65_older": 2.581,
    "aged_70_older": 1.337,
    "gdp_per_capita": 1803.987,
    "cardiovasc_death_rate": 597.029,
    "diabetes_prevalence": 9.59,
    "handwashing_facilities": 37.746,
    "hospital_beds_per_thousand": 0.5,
    "life_expectancy": 64.83,
    "human_development_index": 0.498,
    "data": [
      {
        "date": "2020-02-24",
        "total_cases": 1,
        "new_cases": 1,
        "total_cases_per_million": 0.026,
        "new_cases_per_million": 0.026,
        "stringency_index": 8.33
      }
    ]
  }
}