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

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>

Solution

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.