Javascript Project to Fetch & Display Countries Information inside Table Using REST Countries API in Browser

Welcome folks today in this blog post we will be fetching and displaying countries information inside the table using the rest countries api in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Country Information Table</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 5px;
    }
    img {
      height: 30px;
      width: auto;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Flag</th>
        <th>Population (million)</th>
        <th>Area (square meters)</th>
        <th>Calling Code</th>
        <th>Capital</th>
        <th>Languages</th>
      </tr>
    </thead>
    <tbody id="countries-table-body">
    </tbody>
  </table>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Country Information Table</title>

<style>

table {

border-collapse: collapse;

}

th, td {

border: 1px solid black;

padding: 5px;

}

img {

height: 30px;

width: auto;

}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>Population (million)</th>

<th>Area (square meters)</th>

<th>Calling Code</th>

<th>Capital</th>

<th>Languages</th>

</tr>

</thead>

</tbody>

</table>

</body>

</html>

As you can see we have a simple html5 table where we have different th for displaying the countries information. Now we need to populate the data coming from the rest countries api as shown below

script.js

<script>
    async function getCountriesData() {
      const response = await fetch('https://restcountries.com/v2/all');
      const countriesData = await response.json();
      return countriesData;
    }

    async function displayCountriesTable() {
      const countries = await getCountriesData();

      const countriesTableBody = document.getElementById('countries-table-body');

      for (let country of countries) {
        const row = document.createElement('tr');

        const nameCell = document.createElement('td');
        nameCell.textContent = country.name;
        row.appendChild(nameCell);

        const flagCell = document.createElement('td');
        const flagImg = document.createElement('img');
        flagImg.src = country.flag;
        flagCell.appendChild(flagImg);
        row.appendChild(flagCell);

        const populationCell = document.createElement('td');
        populationCell.textContent = (country.population / 1000000).toFixed(2); // convert to million
        row.appendChild(populationCell);

        const areaCell = document.createElement('td');
        areaCell.textContent = country.area;
        row.appendChild(areaCell);

        const callingCodeCell = document.createElement('td');
        callingCodeCell.textContent = '+' + country.callingCodes[0];
        row.appendChild(callingCodeCell);

        const capitalCell = document.createElement('td');
        capitalCell.textContent = country.capital;
        row.appendChild(capitalCell);

        const languagesCell = document.createElement('td');
        const languagesList = country.languages.map(language => language.name).join(', ');
        languagesCell.textContent = languagesList;
        row.appendChild(languagesCell);

        countriesTableBody.appendChild(row);
      }
    }

    displayCountriesTable();
  </script>

async function getCountriesData() {

const response = await fetch('https://restcountries.com/v2/all');

const countriesData = await response.json();

return countriesData;

}

async function displayCountriesTable() {

const countries = await getCountriesData();

const countriesTableBody = document.getElementById('countries-table-body');

for (let country of countries) {

const row = document.createElement('tr');

const nameCell = document.createElement('td');

nameCell.textContent = country.name;

row.appendChild(nameCell);

const flagCell = document.createElement('td');

const flagImg = document.createElement('img');

flagImg.src = country.flag;

flagCell.appendChild(flagImg);

row.appendChild(flagCell);

const populationCell = document.createElement('td');

populationCell.textContent = (country.population / 1000000).toFixed(2); // convert to million

row.appendChild(populationCell);

const areaCell = document.createElement('td');

areaCell.textContent = country.area;

row.appendChild(areaCell);

const callingCodeCell = document.createElement('td');

callingCodeCell.textContent = '+' + country.callingCodes[0];

row.appendChild(callingCodeCell);

const capitalCell = document.createElement('td');

capitalCell.textContent = country.capital;

row.appendChild(capitalCell);

const languagesCell = document.createElement('td');

const languagesList = country.languages.map(language => language.name).join(', ');

languagesCell.textContent = languagesList;

row.appendChild(languagesCell);

countriesTableBody.appendChild(row);

}

displayCountriesTable();

</script>

As you can see we are using async and await to make the fetch api call to the rest countries api as shown above. And then we are showing all the necessary information about each country and displaying it the table. For this we are using the arrays.