如何从API获取新冠数据并在表格展示？求补全代码

问题描述 #

我正在制作一款新冠追踪网站，已通过JavaScript的fetch方法获取了https://api.covid19api.com/summary接口中的Countries数据，但无法将数据展示在HTML表格中，请求帮助补全代码以实现数据的表格渲染。

现有代码 #

JavaScript代码

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

HTML代码

<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>

补全后的完整代码 #

修改后的JavaScript代码 #

const getdata = async () => {
    try {
        const endpoint = 'https://api.covid19api.com/summary';
        const response = await fetch(endpoint);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const { Countries } = await response.json();
        const tbody = document.getElementById('tbody');
        
        // 清空tbody原有内容，防止重复加载数据
        tbody.innerHTML = '';
        
        Countries.forEach(country => {
            // 解构当前国家的所有需要字段
            const { Country, NewConfirmed, TotalConfirmed, NewDeaths, TotalDeaths, NewRecovered, TotalRecovered } = country;
            
            // 创建表格行
            const row = document.createElement('tr');
            
            // 创建并填充每个单元格
            const countryCell = document.createElement('td');
            countryCell.textContent = Country;
            
            const newConfirmedCell = document.createElement('td');
            newConfirmedCell.textContent = NewConfirmed;
            
            const totalConfirmedCell = document.createElement('td');
            totalConfirmedCell.textContent = TotalConfirmed;
            
            const newDeathsCell = document.createElement('td');
            newDeathsCell.textContent = NewDeaths;
            
            const totalDeathsCell = document.createElement('td');
            totalDeathsCell.textContent = TotalDeaths;
            
            const newRecoveredCell = document.createElement('td');
            newRecoveredCell.textContent = NewRecovered;
            
            const totalRecoveredCell = document.createElement('td');
            totalRecoveredCell.textContent = TotalRecovered;
            
            // 将单元格添加到行中
            row.append(countryCell, newConfirmedCell, totalConfirmedCell, newDeathsCell, totalDeathsCell, newRecoveredCell, totalRecoveredCell);
            
            // 将行添加到tbody
            tbody.appendChild(row);
        });
    } catch (error) {
        console.error('获取数据或渲染表格失败:', error);
        // 在页面显示错误提示
        const tbody = document.getElementById('tbody');
        tbody.innerHTML = '<tr><td colspan="7">加载数据失败，请稍后重试</td></tr>';
    }
};

// 调用函数加载数据
getdata();

HTML代码（无需修改，保持原结构即可） #

<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">
            <!-- 数据将通过JS动态渲染到这里 -->
        </tbody>
    </table>
</div>

关键修改说明 #

• 修正解构逻辑：原代码错误尝试解构Countries数组，改为解构循环中的单个国家对象，正确获取每个字段的值。
• 动态创建DOM元素：通过createElement生成表格行和单元格，填充数据后添加到tbody，实现数据渲染。
• 错误处理：添加try/catch捕获网络请求或渲染错误，同时在页面显示友好提示，提升体验。
• 修复语法问题：移除无用的abc参数，修正getdata().then的不完整语法，直接调用函数加载数据。

内容的提问来源于stack exchange，提问作者Akash Das