How to populate a HTML table using a JSON dataset from an URL

Question

i'm a Javascript and JQuery beginner and I would like to integrate a table populated from a JSON dataset from an external server on a website.

The JSON dataset is located here :

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

My code is as follows and it doesn't work :

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

I found this website which does it perfectly but I'm having a hard time doing the same

I don't know where to start and a bit of help would be appreciated :)

Does this answer your question? [Convert json data to a html table](https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table) — tevemadar, Oct 18 '20 at 08:48

Nothehi · Answer 1 · 2020-10-18T10:13:43.430

try this:

$.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);
  });
});

I tried but now my columns are gone and there is just "undefined" written. — Raphael09040, Oct 18 '20 at 08:57
in the `...` section write other fields. there are too many fields, I'm so lazy. :-D — Nothehi, Oct 18 '20 at 09:06
Well it didn't quite work either, so I edited my post to provide more information — Raphael09040, Oct 18 '20 at 09:46

How to populate a HTML table using a JSON dataset from an URL

1 Answers1