Question

对不起，英语不好，我现在有一个问题，我正在尝试学习react js，并尝试在我的本地主机中创建有关covid 19的网站，我想从该网站提取有关covid 19的数据或信息=> https： //disease.sh/v3/covid-19/countries，但是有数组没有变量，就像我之前尝试过的其他站点不一样=> https://covid19.th-stat.com/api/open/timeline我不知道如何拉动js而不是我的主要代码谢谢您的回答和帮助。

constructor(props) {
    super(props);
    this.state = {
      dataTimeline: [],
      dataTimeline15: [],
      data_text: {
        country: '',
        cases: '',
        todayCases: '',
        deaths: '',
        todayDeaths: '',
        recovered: '',
        active: '',
        critical: '',
        casesPerOneMillion: '',
        deathsPerOneMillion: '',
        updated: '',
        
      },
      data_pie: [{}],
    };
  }

  componentDidMount() {
    this.callAPI();
  }

  callAPI() {
    axios.get('https://corona.lmao.ninja/v3/covid-19/countries')
    .then(response => {
        console.log(response.data);
        const data = response.data[''];
        const lastData = data.slice(-1)[0];
        this.setState({
          dataTimeline: data,
          dataTimeline15: data.slice(1).slice(-15),
          data_text: {
            source: response.data['Source'],
            country: lastData['Country'],
            cases: lastData['Cases'],
            todayCases: lastData['TodayCases'],
            deaths: lastData['Deaths'],
            todayDeaths: lastData['TodayDeaths'],
            recovered: lastData['Recovered'],
            active: lastData['Active'],
            critical: lastData['Critical'],
            casesPerOneMillion: lastData['CasesPerOneMillion'],
            deathsPerOneMillion: lastData['DeathsPerOneMillion'],
            updated: lastData['Date'],
       
          },
          data_pie: [
            { name: 'country', value: lastData['Country'] },
            { name: 'cases', value: lastData['Cases'] },
          ]
        });
        
    })
    .catch(function (error) {
        console.log(error);
    })
  }

Answer 1

let box = document.getElementById("data");
let loading = document.getElementById("loading");
let responseData;
fetch("https://disease.sh/v3/covid-19/countries").then(res => res.json())
.then(data => {
   loading.style.setProperty("display", "none");
   render(data);
   responseData = data;
})

function sortRecover() {
   box.innerHTML = "";
   let data = responseData.sort((a,b) => b.recovered - a.recovered);
   render(data);
}

function sortDeaths() {
   box.innerHTML = "";
   let data = responseData.sort((a,b) => b.deaths - a.deaths);
   render(data);
}

function sortCases() {
   box.innerHTML = "";
   let data = responseData.sort((a,b) => b.cases - a.cases);
   render(data);
}

function sortCountry() {
   box.innerHTML = "";
   let data = responseData.sort((a,b) => a.country.toLowerCase().localeCompare(b.country.toLowerCase()));
   render(data);
}

function render(data) {
   
   data.forEach(({country, cases, deaths, recovered}) => {
      box.insertAdjacentHTML("beforeend", `
      <div class="info">
         <p>${country}</p>
         <p>${cases}</p>
         <p>${deaths}</p>
         <p>${recovered}</p>
      </div>
      `);
   })
}

.info {
   display: flex;
}
.info p{
   width: 200px;
}
.title {
   display: flex;
}
.title p {
   padding: 10px;
   width: 170px;
   background: green;
   color: white;
   cursor: pointer;
}
.title p:hover {
   background: darkgreen;
}

<p>Click on title to sort</p>
<div class="title">
  <p onclick="sortCountry()">Country</p>
  <p onclick="sortCases()">Cases</p>
  <p onclick="sortDeaths()">deaths</p>
  <p onclick="sortRecover()">recovered</p>
</div>
<div id="data">
<div id="loading">
Loading data...
</div>
</div>

如何从网站上获取有关covid统计信息的api数组

1 个答案: