检查列表中 json 对象内的数据答案

【问题标题】：Check for data within a json object in a list检查列表中 json 对象内的数据
【发布时间】：2022-01-02 00:21:47
【问题描述】：

我正在使用https://disease.sh/v3/covid-19/jhucsse 上的 JSON API。它将数据存储为 JSON 对象列表。我正在制作一个小型网站，允许用户滚动浏览列表，选择他们的国家和省份，并查看该国家/地区的数据。我正在为此使用 JQuery，这是我目前的代码：

const apiLink = "https://disease.sh/v3/covid-19/jhucsse"

jQuery(document).ready(function() {
    jQuery("#SubmitButton").click(function() {
        country_value = $('#country_picker').val() //Gets the value of the country_value select list in index.html


        $.get(apiLink, function(data,status){
          console.log(data[0]) // Placeholder code that prints the first JSON object in the list to the console
          // Other code here
        })
      
        document.getElementById('output').innerHTML = TestHTML; // Fills the 'output' div element with the output of the program
    });
});

我将如何解决这个问题？

【问题讨论】：

“我使用这个 JSON”、“我有这个代码”、“我该如何解决这个问题？” ...什么问题？
而 AJAX 是异步的，你应该在 AJAX 回调中构建 HTML inside。所以基本上将document.getElementById('output').innerHTML = TestHTML; 移入 $.get 函数体。

标签： javascript jquery json list api

【解决方案1】：

您不需要 jQuery。您可以使用Fetch API
以 JSON 格式获取数据
由于JSON数据是一个数组，使用原型.forEach()方法为每个国家对象提取数据
使用.reduce() 构造要附加到表的TBODY 的HTML 字符串
使用.addEventListener() 将"input" 事件附加到您的#search 输入元素
使用 String .includes() 方法检查是否有任何行具有搜索到的值，如果值不匹配，则将 hidden 属性设置为该 TR 元素

这是一个例子：

const EL = (sel, el) => (el || document).querySelector(sel);
const ELS = (sel, el) => (el || document).querySelectorAll(sel);

const EL_search = EL("#search");
const EL_table = EL("#table");
const EL_tbody = EL("tbody", EL_table);
let ELS_tr;

const apiLink = "https://disease.sh/v3/covid-19/jhucsse";

const row = (item) => `<tr>
  <td>${item.country}</td>
  <td>${item.province || ""}</td>
  <td>${item.county || ""}</td>
  <td>${item.stats.confirmed || "-"}</td>
  <td>${item.stats.deaths    || "-"}</td>
  <td>${item.stats.recovered || "-"}</td>
</tr>`;

const build = (data) => {
  EL_tbody.innerHTML = data.reduce((html, item) => html += row(item), "");
  ELS_tr = ELS("tr", EL_tbody);
  EL_search.addEventListener("input", search);
};

const search = () => {
  const value = EL_search.value.trim().toLowerCase();
  ELS_tr.forEach(EL_tr => {
    const content = EL_tr.textContent.toLowerCase();
    const match = content.includes(value);
    EL_tr.hidden = value && !match;
  });
};

fetch(apiLink).then(res => res.json()).then(build);

.sticky-thead {
  position: relative;
  max-height: 140px;
  overflow-y: auto;
}

.sticky-thead table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

.sticky-thead td,
.sticky-thead th {
  text-align: left;
  padding: 4px;
}

.sticky-thead thead th {
  position: sticky;
  top: 0;
  background: #fff;
}

<input id="search" type="search" placeholder="Search" autocomplete="off">
<div class="sticky-thead">
  <table id="table">
    <thead>
      <tr>
        <th>Country</th>
        <th>Province</th>
        <th>County</th>
        <th>Confirmed</th>
        <th>Deaths</th>
        <th>Recovered</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

【讨论】：

【解决方案2】：

如果要填充列表，只需执行 for 循环？ data 只是一个具有属性的对象数组。

for (let i = 0; i < data.length; i++) {
   data[i].country // access the country
   data[i].stats.deaths //access the deaths
}

【讨论】：