如何從 api 獲取數據並將其顯示在表格中？

Question

我正在嘗試制作一個 covid 跟蹤器網站，但我無法以表格格式顯示獲取的數據，請你們幫我在表格中顯示數據。 幫我完成代碼

 const getdata = async (abc) => { const endpoint = 'https://api.covid19api.com/summary' const response = await fetch(endpoint) const { Countries } = await response.json() console.log(Countries) Countries.map(({Country}) => { console.log(Country) // const { Country, NewConfirmed, TotalConfirmed, NewDeaths, TotalDeaths, NewRecovered, TotalRecovered } = Countries }) } getdata().then

 <div class="container"> <table class="table"> <thead> <tr> <th scope="col">Country</th> <th scope="col">NewConfirmed</th> <th scope="col">TotalConfirmed</th> <th scope="col">NewDeaths</th> <th scope="col">TotalDeaths</th> <th scope="col">NewRecovered</th> <th scope="col">TotalRecovered</th> </tr> </thead> <tbody id ="tbody"> <!-- <tr > <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>@mdo</td> </tr> --> </tbody> </table> </div>

我正在嘗試制作一個 covid 跟蹤器網站，但我無法以表格格式顯示獲取的數據，請你們幫我在表格中顯示數據。 幫我完成代碼

Answer 1

也許通過獲取數據並從中構建標題和行以編程方式進行，而不是最初對 HTML 標記進行硬編碼。 此示例使用一系列函數從數據集中創建標題、行和單元格，以逐步從模板字符串構建表格。

 // Get the data const getdata = async(abc) => { const endpoint = 'https://api.covid19api.com/summary'; const response = await fetch(endpoint); const { Countries } = await response.json(); return Countries; } // Accepts the first object from the data and // returns a string of HTML from its keys function buildHeadings(obj) { const keys = Object.keys(obj); return keys.map(key => `<th>${key}</th>`).join(''); } // Accepts a value data and // returns an HTML table cell function buildCell(cell) { return `<td>${cell}</td>`; } // Accepts an object and // returns a string of row HTML by mapping // over the object values and, for each, calling // `buildCell` function buildRow(obj) { const values = Object.values(obj); return `<tr>${values.map(buildCell).join('')}</tr>`; } // Accepts the data and // returns a string of row HTML calling // `buildRow` for each object in the dataset function buildRows(data) { return data.map(buildRow).join(''); } // `buildTable` puts it all together and returns // the final table markup as an HTML string function buildTable(data) { return ` <table> <thead>${buildHeadings(data[0])}</thead> <tbody>${buildRows(data)}</tbody> </table> `; } // Returns only the data for each object // that is required for the table function getSubset(data) { return data.map(obj => { const { ID, CountryCode, Slug, Date, Premium, ...rest } = obj; return {...rest }; }); } // Cache the container const container = document.querySelector('.container'); // Get a subset of the returned data, and build the table // adding the HTML string returned from `buildTable` to the // container's innerHTML async function main() { const data = getSubset(await getdata()); const table = buildTable(data); container.innerHTML = table; } main();

 table { border-collapse: collapse; } thead { text-align: left; } thead { background-color: lightgreen; } th, td { padding: 0.25em 0.4em; border: 1px solid #dfdfdf; } tr:nth-child(even) { background-color: #efefef; }

 <div class="container"></div>

附加文件

• map

• join

• Object.keys

• Object.values

• 解構賦值

• Rest參數

Answer 2

你可以通過這種方式實現

 const tbody = document.querySelector('#tbody'); const getdata = async () => { const endpoint = "https://api.covid19api.com/summary", response = await fetch(endpoint), data = await response.json(), Countries = data.Countries; Countries.forEach(countryObj => { let {Country, NewConfirmed, TotalConfirmed, NewDeaths, TotalDeaths, NewRecovered, TotalRecovered} = countryObj; tbody.innerHTML += `<tr> <td>${Country}</td> <td>${NewConfirmed}</td> <td>${TotalConfirmed}</td> <td>${NewDeaths}</td> <td>${TotalDeaths}</td> <td>${NewRecovered}</td> <td>${TotalRecovered}</td> </tr>`; }); } getdata();

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" integrity="sha512-Ez0cGzNzHR1tYAv56860NLspgUGuQw16GiOOp/I2LuTmpSK9xDXlgJz3XN4cnpXWDmkNBKXR/VDMTCnAaEooxA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <table class="table"> <thead> <tr> <th scope="col">Country</th> <th scope="col">NewConfirmed</th> <th scope="col">TotalConfirmed</th> <th scope="col">NewDeaths</th> <th scope="col">TotalDeaths</th> <th scope="col">NewRecovered</th> <th scope="col">TotalRecovered</th> </tr> </thead> <tbody id="tbody"> </tbody> </table>

Answer 3

循環使用 forEach() 方法收集的所有數據，並使用 innerHTML 將代碼直接放置到 html 文件中。