How can I access a specific element within the Our World in Data COVID-19 Master Vaccinations JSON File?

Question

I'm relatively new to coding and am trying to access a specific element within COVID Vaccine JSON file created by Our World in Data, but I'm having a hard time with the syntax of my code/the structure of the JSON file.

I've successfully consumed the data from the JSON file (it's appearing in my inspector of the HTML page), but now I want to be able to call out a specific data field to display it in my HTML.

For example, I wanted the total number of people vaccinated in the United States on 04-07-2021 and was trying to the code below, but received Cannot read property 'United States of undefined as an error. Also, for context on my approach, I haven't learned how to use one of the frameworks yet, so I'm doing some DOM manipulation to get the data to display in the HTML.

//110 is the total number of days that US vaccination data has been tracked, according to my math

var settings = {
    "url": "https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/vaccinations/vaccinations.json",
    "method": "GET",
    "timeout": 0,

$.ajax(settings).done(function (response) {
    JSON.parse(response);
    console.log(response);
    var content = response["country"]["United States"]["date"][110];
    document.getElementById("admin").innerHTML = response;
});

I also tried the following, which is also throwing errors:

var settings = {
    "url": "https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/vaccinations/vaccinations.json",
    "method": "GET",
    "timeout": 0,
};
$.ajax(settings).done(function (response) {
    JSON.parse(response);
    console.log(response);
    var content = response.country[264].data.date[110]"
    document.getElementById("admin").innerHTML = response;
});

This is my first time writing code for a GET API call, so any and all feedback are welcome! For reference, the raw JSON file can be found here and their GitHub can be found here (file is named vaccinations.json). My HTML is also included below for additional context. Thanks in advance!

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vaccine Visualization</title>
    <!--enabled with jQuery-->
    <<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
        </script>
        <script src="vaccines.js"></script>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=Staatliches&display=swap"
            rel="stylesheet">
        <link href="vaccines-stylesheet.css" rel="stylesheet">
        <style></style>
</head>

<body>
    <div class="triangle">
        <div class="content">
            <h1 class="header"> International COVID Vaccine Rollout </h1>
            <h2 class="subheader">PERCENT COMPLETE BY COUNTRY</h2>
        </div>
    </div>
    <div class="triangle2"></div>
    <div class="top-five-widget">
        <h2 class="top-five-title"> COVID Vaccine Distribution:<br>Top Five Countries</h2>
        <p>Total Vaccines Administered:</p>
        <span id="admin"></span>
    </div>
    <script src="vaccines.js"></script>

</body>

</html>

Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Heretic Monkey, Apr 08 '21 at 20:30
Funniest error message I've seen today `"Cannot read property 'United States of undefined"` — fortunee, Apr 08 '21 at 20:33
@HereticMonkey - I looked at that post before I posted this and ended up just confusing myself - so seeing the brackets notation and curly braces broken out more distinctly was really helpful. — Wyn Ponder, Apr 09 '21 at 01:36
@fortunee That worked - you're a hero! And initially, I felt the same way about that error, but once I saw it for the 50th time, it quickly became less funny. Could you please explain why the syntax should be like that? — Wyn Ponder, Apr 09 '21 at 01:38
I didn't see any errors when I looked through inspector - did you see one @lux? — Wyn Ponder, Apr 09 '21 at 01:39
@WynPonder, I'm glad it worked. Could you give it an upvote and accepted the answer? — fortunee, Apr 09 '21 at 01:57
@fortunee Could you give some more detail into why that's the correct syntax? I just looked up the JS Array Find Method on W3Schools, but still not following completely. Thanks! Also, I accepted your answer and upvoted — Wyn Ponder, Apr 09 '21 at 02:30
@WynPonder, I made an EDIT to my suggestion with an explanation. Check it out. Also, thanks for accepting the answer, could you give it an upvote as well, clicking on the up arrow? — fortunee, Apr 09 '21 at 16:49

fortunee · Accepted Answer · 2021-04-09T16:44:03.200

This should display the number of people vaccinated on '2021-04-07'

var settings = {
    "url": "https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/vaccinations/vaccinations.json",
    "method": "GET",
    "timeout": 0,
};

$.ajax(settings).done(function (response) {
  const USA = JSON.parse(response).find((data) => data.country === 'United States');
  const peopleVaccinated  = USA.data.find((d) => d.date === '2021-04-07').people_vaccinated;
  document.getElementById("admin").innerHTML = peopleVaccinated;
});

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vaccine Visualization</title>
    <!--enabled with jQuery-->
    <<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
        </script>
        <script src="vaccines.js"></script>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=Staatliches&display=swap"
            rel="stylesheet">
        <link href="vaccines-stylesheet.css" rel="stylesheet">
        <style></style>
</head>

<body>
    <div class="triangle">
        <div class="content">
            <h1 class="header"> International COVID Vaccine Rollout </h1>
            <h2 class="subheader">PERCENT COMPLETE BY COUNTRY</h2>
        </div>
    </div>
    <div class="triangle2"></div>
    <div class="top-five-widget">
        <h2 class="top-five-title"> COVID Vaccine Distribution:<br>Top Five Countries</h2>
        <p>Total Vaccines Administered:</p>
        <span id="admin"></span>
    </div>
    <script src="vaccines.js"></script>

</body>

Explanation

The response is an array of objects, each object has a key of country.

So when I do a .find, it loops through the array looking for an object with a key of country equal to "United States" and saves it in a variable USA.

Which is what this line is doing.

const USA = JSON.parse(response)
  .find((data) => data.country === 'United States');

USA itself is another object that has a key of data which is an array of objects.

So I do another .find on USA.data for the object with a key of date that is equal to '2021-04-07', and when it finds it we immediately chain .people_vaccinated to it.

That is this line:

const peopleVaccinated  = USA.data
  .find((d) => d.date === '2021-04-07').people_vaccinated;

The rest should make sense to you.

Consider checking out How can I access and process nested objects, arrays, or JSON? Like someone suggested in the comments.

How can I access a specific element within the Our World in Data COVID-19 Master Vaccinations JSON File?

1 Answers1

Explanation