如何选择要在html中显示的json数据[重复]

Question

我有这个 json 数据 URL，我只想选择法国数据以 html 显示，但我不知道该怎么做。请帮我这样做

https://coronavirus-19-api.herokuapp.com/countries

这是我的 JAVASCRIPT

// API Fetch Call
 const api_url = './src/india.json';
 async function getCcount() {
     const response = await fetch(api_url);
     const data = await response.json();
     const {
         cases,
         active,
         deaths,
         recovered
     } = data;

     document.getElementById('t-count').textContent = cases;
     document.getElementById('a-count').textContent = active;
     document.getElementById('d-count').textContent = deaths;
     document.getElementById('r-count').textContent = recovered;
 }

 getCcount();

如何仅选择法国数据以 HTML 格式显示。使用 fetch 函数。

Answer 1

您必须find() data 数组中具有 country 属性和值为 "France" 的对象，如下所示：

(async() => {
  try {
    const api_url = 'https://coronavirus-19-api.herokuapp.com/countries';
    const response = await fetch(api_url);
    if (response.status !== 200) {
      console.log(`Status Code: ${response.status}`);
      return;
    }
    const data = await response.json();
    const {
      cases,
      active,
      deaths,
      recovered
    } = data.find(covid => covid.country === 'France');

    document.getElementById('t-count').textContent = cases;
    document.getElementById('a-count').textContent = active;
    document.getElementById('d-count').textContent = deaths;
    document.getElementById('r-count').textContent = recovered;
  } catch (err) {
    console.log(`Fetch Error: ${err}`);
  }
})();

Cases: <span id='t-count'></span><br/> Active: <span id='a-count'></span><br/> Deaths: <span id='d-count'></span><br/> Recovered: <span id='r-count'></span><br/>

find() 方法返回提供的数组中满足提供的测试功能的第一个元素的值。