如何使用来自 URL 的 JSON 数据集填充 HTML 表

Question

我是 Javascript 和 JQuery 初学者，我想集成一个表，该表由来自网站外部服务器的 JSON 数据集填充。

JSON 数据集位于此处：

https://restcountries.eu/rest/v2/all

我的代码如下，它不起作用：

 $.getJSON("https://restcountries.eu/rest/v2/all", function(data) { data.forEach(sub_data => { var text = `<tr> <td>${sub_data.name}</td> <td>${sub_data.topLevelDomain}</td> <td>${sub_data.alpha2Code}</td> <td>${sub_data.alpha3Code}</td> <td>${sub_data.callingCodes}</td> <td>${sub_data.capital}</td> <td>${sub_data.altSpellings}</td> <td>${sub_data.region}</td> <td>${sub_data.subregion}</td> <td>${sub_data.population}</td> <td>${sub_data.latlng}</td> <td>${sub_data.demonym}</td> <td>${sub_data.area}</td> <td>${sub_data.gini}</td> <td>${sub_data.timezones}</td> <td>${sub_data.borders}</td> <td>${sub_data.nativeName}</td> <td>${sub_data.numericCode}</td> <td>${sub_data.currencies}</td> <td>${sub_data.languages}</td> <td>${sub_data.translations}</td> <td>${sub_data.flag}</td> <td>${sub_data.regionalBlocs}</td> <td>${sub_data.cioc}</td> </tr>`; $("#table").html(text); }); });

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Second assignment</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" /> <link rel="stylesheet" href="style.css" /> <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> </head> <div id="header"> <header> LES PAYS DU MONDE </header> </div> <br> <br> <br> <br> <br> <section> <table id="table"> <tr> <th>Nom</th> <th>Nom de domaine</th> <th>Alpha2Code</th> <th>Alpha3Code</th> <th>Indicatif téléphonique</th> <th>Capitale</th> <th>Orthographes alternatifs</th> <th>Région</th> <th>Sous-région</th> <th>Population</th> <th>Latitude/Longitude</th> <th>Gentilé</th> <th>Zone</th> <th>Coefficient de Gini</th> <th>Fuseau horaire</th> <th>Frontières</th> <th>Nom d'origine</th> <th>Code numérique</th> <th>Monnaie</th> <th>Langage(s)</th> <th>Traductions</th> <th>Drapeau</th> <th>Bloc régional</th> <th>CIOC</th> </tr> </table> </section> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="main.js"></script> </body> </html>

我发现这个网站做得很完美，但我很难做同样的事情

我不知道从哪里开始，希望得到一些帮助：)

Answer 1

尝试这个：

$.getJSON("https://restcountries.eu/rest/v2/all", function(data) {
  data.forEach(sub_data => {
    var text = 
        
        `<tr>
            <td>${sub_data.name}</td>
            <td>${sub_data.topLevelDomain}</td>
            <td>${sub_data.alpha2Code}</td>
            <td>${sub_data.alpha3Code}</td>
            <td>${sub_data.callingCodes}</td>
            <td>${sub_data.capital}</td>
            <td>${sub_data.altSpellings}</td>
            <td>${sub_data.region}</td>
            <td>${sub_data.subregion}</td>
            <td>${sub_data.population}</td>
            <td>${sub_data.latlng}</td>
            <td>${sub_data.demonym}</td>
            <td>${sub_data.area}</td>
            <td>${sub_data.gini}</td>
            <td>${sub_data.timezones}</td>
            <td>${sub_data.borders}</td>
            <td>${sub_data.nativeName}</td>
            <td>${sub_data.numericCode}</td>
            <td>${sub_data.currencies}</td>
            <td>${sub_data.languages}</td>
            <td>${sub_data.translations}</td>
            <td>${sub_data.flag}</td>
            <td>${sub_data.regionalBlocs}</td>
            <td>${sub_data.cioc}</td>
        </tr>`;

    $("#table").append(text);
  });
});

如何使用来自 URL 的 JSON 数据集填充 HTML 表

问题描述

1 个解决方案

解决方案1
1 2020-10-18 08:52:11

如何使用来自 URL 的 JSON 数据集填充 HTML 表

问题描述

1 个解决方案

解决方案1 1 2020-10-18 08:52:11

解决方案1
1 2020-10-18 08:52:11