时间戳

首页 > 解决方案 > 如何访问“我们的世界”数据 COVID-19 主疫苗 JSON 文件中的特定元素？

javascript - 如何访问“我们的世界”数据 COVID-19 主疫苗 JSON 文件中的特定元素？

问题描述

我对编码比较陌生，并且正在尝试访问由 Our World in Data 创建的 COVID 疫苗 JSON 文件中的特定元素，但是我很难使用我的代码语法/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 文件可以在这里找到，他们的 GitHub 可以在这里找到（文件名为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>

标签： javascriptjqueryjsonajaxapi-design

解决方案

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

解释

响应是一个arrayof objects，每个object都有一个键 of country。

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

这就是这条线正在做的事情。

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

USA本身是另一个object，其键data为arrayof objects。

因此，我对密钥等于“2021-04-07”的对象执行另一个操作，当它找到它时，我们立即链接.find到它。USA.datadate.people_vaccinated

就是这一行：

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

其余的应该对你有意义。

考虑查看如何访问和处理嵌套对象、数组或 JSON？就像评论中有人建议的那样。

推荐阅读