如何访问 Our World in Data COVID-19 主疫苗接种 JSON 文件中的特定元素？

Question

我对编码比较陌生，正在尝试访问由我们的数据世界创建的 COVID 疫苗 JSON 文件中的特定元素，但我很难理解 code/the JSON 文件的结构。

我已经成功地使用了 JSON 文件中的数据（它出现在我的 HTML 页面的检查器中），但现在我希望能够调出特定的数据字段在我的 HTML.

中显示它

例如，我想要 2021 年 4 月 7 日在美国接种疫苗的总人数，并尝试使用下面的代码，但收到 Cannot read property 'United States of undefined 作为错误。此外，对于我的方法的上下文，我还没有学会如何使用其中一个框架，所以我正在做一些 DOM 操作以使数据显示在 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;
});

我也试过下面的，也是报错：

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;
});

这是我第一次为 GET API 调用编写代码，欢迎任何反馈！作为参考，原始 JSON 文件可以在 here and their GitHub can be found here 中找到（文件名为 vaccinations.json）。我的 HTML 也包含在下面以提供更多上下文。提前致谢！

<!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>

Answer 1

这应该显示在“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>

说明

响应是 objects 的 array，每个 object 都有一个 country 的键。

因此，当我执行 .find 时，它会遍历数组以查找键 country 等于“美国”的对象，并将其保存在变量 USA.

这行是干什么的。

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

USA 本身是另一个 object，它的键是 data，它是 objects 的 array。

所以我在 USA.data 上为具有等于“2021-04-07”的键 date 的对象执行另一个 .find，当它找到它时我们立即将 .people_vaccinated 链接到它。

也就是这一行：

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

剩下的你应该明白了。

考虑查看 How can I access and process nested objects, arrays, or JSON? 就像评论中有人建议的那样。

如何访问 Our World in Data COVID-19 主疫苗接种 JSON 文件中的特定元素？

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

javascript

jquery

json

ajax

api-design

说明