How to fix a table using fetch in JavaScript?

Question

I want to fetch data from API and display in a html table using JavaScript. Anyone can help me for fixing my table? My table is not ok. I don't want a table (th) every row.

Page html, I use tableTeam for display the table:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CV 2021</title>
    <link rel="stylesheet" href="./css/style.css" media="screen" />
    <link rel="stylesheet" href="/css/fontawesome.css" />
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <script src="/js/all.js"></script>
    <style>
      img {
        width: 100px;
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
      }
  
      img.logo {
        width: 50px
      }
    </style>
  </head>

  <body>
    
   
    <main class="container">
      <section>
        <h1 id="title"></h1>
        <div id="tableTeam"></div>
      </section>
      
    </main>
    
    <script src="./js/bootstrap.bundle.js"></script>
    <script src="./js/testMicrojs.js"></script>
  </body>
</html>

Here, my code JavaScript:

(function() {
    let title = 'Hello JS';
    let nodeTitle = document.getElementById('title');
    let divTableTeam = document.getElementById('tableTeam');
    let teamsFiltered = null;
    // let animation = false
    const URL = 'http://localhost:5000/teams';

    function init() {
        nodeTitle.innerText = title;

        // divTableTeam.innerHTML = buildTeamTable();
        // teamsFiltered = URL;
        // console.log(teamsFiltered)
        fetchData();
    }

    function fetchData() {
      fetch(URL)
        .then(res => res.json())
        .then(data => {
          buildTeamTable();
          

      })
      .catch((err) => {
        divTableTeam.innerHTML +=
        'Erreur: impossible de charger les équipes';
        divTableTeam.classList.add('alert-danger');
      })
    }
    divTableTeam.innerHTML = '';
    divTableTeam.classList.remove('alert-danger');
    
    
    function buildTeamTable(data) {
      
      fetch('http://localhost:5000/teams')
      .then(res => res.json())
      .then(team => {

        if (team.length > 0) {
          let s = "";
        team.forEach((team, index) => {
          
          console.log(team)
          let header = '<tr><th>logo</th><th>name</th><th>country</th></tr>';
          s += '<table class = "table table-bordered table-striped">';
          s += header;
          
            s += '<tr>'
            s += '<td>';
            s += '<img class="logo" src="'+team.logo+'" alt="">';
            s += '</td>';
            s += '<td>';
            s += team.name;
            s += '</td>';
            s += '<td>';
            s += team.country;
            s += '</td>';
            s += '</tr>'
            s += '</table>'
          
         
          divTableTeam.innerHTML = s;
        })
        }
      });

       

    }
    

  
    

    
    
    init();
}) ()

Here, the data from nodejs :

let teams = [
  {
    id: 1,
    logo: 'http://www.logo-designer.co/wp-content/uploads/2017/01/2017-interbrand-logo-design-juventus-football.png',
    name: 'Juventus',
    country: 'Italie',
    stadium: 'Juventus Stadium',
    coach: 'Allegri',
    founded: 1897,
    nbCup: 5
  },
  {
    id: 2,
    name: 'PSG',
    logo: 'https://upload.wikimedia.org/wikipedia/fr/thumb/8/86/Paris_Saint-Germain_Logo.svg/768px-Paris_Saint-Germain_Logo.svg.png',
    country: 'France',
    stadium: 'Parc des Princes',
    coach: 'Emery',
    founded: 1970,
    nbCup: 2
  },
  {
    id: 3,
    logo: 'https://upload.wikimedia.org/wikipedia/fr/7/70/Racing_Club_de_Strasbourg_Alsace_%28RC_Strasbourg_-_RCS_-_RCSA%29_logo_officiel.svg',
    name: 'RC Strasbourg',
    country: 'France',
    stadium: 'La Meinau',
    coach: 'Laurent',
    founded: 1902,
    nbCup: 1
  },
  {
    id: 4,
    logo: 'https://upload.wikimedia.org/wikipedia/fr/c/c7/Logo_Real_Madrid.svg',
    name: 'Real Madrid',
    country: 'Espagne',
    stadium: 'Santiago Bernabeu',
    coach: 'Zidane',
    founded: 1912,
    nbCup: 6
  },
  {
    id: 5,
    logo: 'https://seeklogo.com/images/G/gomido-fc-logo-D7E9AE0963-seeklogo.com.gif',
    name: 'Gomido',
    country: 'Togo',
    stadium: 'Gomido Arena',
    coach: '',
    founded: 1974,
    nbCup: 2
  },
  {
    id: 6,
    logo: 'https://seeklogo.com/images/A/as-roma-60-s-logo-5422998DC3-seeklogo.com.png',
    name: 'AS Roma',
    country: 'Italie',
    stadium: 'Olimpico',
    coach: 'Di Francesco',
    founded: 1899,
    nbCup: 1
  },
];

Jayanika Chandrapriya · Accepted Answer

Your table should be started before forEach and closed after the loop. Please take a look into the below code and preview.

let s = '<table class = "table table-bordered table-striped">'; 
URL.forEach((team, index) => {
  //console.log(team);
  s += '<tr><th>logo</th><th>name</th><th>country</th></tr>';
  s += '<tr>';
  s += '<td>';
  s += '<img class="logo" src="' + team.logo + '" alt="">';
  s += '</td>';
  s += '<td>';
  s += team.name;
  s += '</td>';
  s += '<td>';
  s += team.country;
  s += '</td>';
  s += '</tr>';
  divTableTeam.innerHTML = s;
});
s += '</table>';

(function () {
  let title = 'Hello JS';
  let nodeTitle = document.getElementById('title');
  let divTableTeam = document.getElementById('tableTeam');
  let teamsFiltered = null;
  // let animation = false

  let teams = [
    {
      id: 1,
      logo: 'http://www.logo-designer.co/wp-content/uploads/2017/01/2017-interbrand-logo-design-juventus-football.png',
      name: 'Juventus',
      country: 'Italie',
      stadium: 'Juventus Stadium',
      coach: 'Allegri',
      founded: 1897,
      nbCup: 5,
    },
    {
      id: 2,
      name: 'PSG',
      logo: 'https://upload.wikimedia.org/wikipedia/fr/thumb/8/86/Paris_Saint-Germain_Logo.svg/768px-Paris_Saint-Germain_Logo.svg.png',
      country: 'France',
      stadium: 'Parc des Princes',
      coach: 'Emery',
      founded: 1970,
      nbCup: 2,
    },
    {
      id: 3,
      logo: 'https://upload.wikimedia.org/wikipedia/fr/7/70/Racing_Club_de_Strasbourg_Alsace_%28RC_Strasbourg_-_RCS_-_RCSA%29_logo_officiel.svg',
      name: 'RC Strasbourg',
      country: 'France',
      stadium: 'La Meinau',
      coach: 'Laurent',
      founded: 1902,
      nbCup: 1,
    },
    {
      id: 4,
      logo: 'https://upload.wikimedia.org/wikipedia/fr/c/c7/Logo_Real_Madrid.svg',
      name: 'Real Madrid',
      country: 'Espagne',
      stadium: 'Santiago Bernabeu',
      coach: 'Zidane',
      founded: 1912,
      nbCup: 6,
    },
    {
      id: 5,
      logo: 'https://seeklogo.com/images/G/gomido-fc-logo-D7E9AE0963-seeklogo.com.gif',
      name: 'Gomido',
      country: 'Togo',
      stadium: 'Gomido Arena',
      coach: '',
      founded: 1974,
      nbCup: 2,
    },
    {
      id: 6,
      logo: 'https://seeklogo.com/images/A/as-roma-60-s-logo-5422998DC3-seeklogo.com.png',
      name: 'AS Roma',
      country: 'Italie',
      stadium: 'Olimpico',
      coach: 'Di Francesco',
      founded: 1899,
      nbCup: 1,
    },
  ];

  const URL = teams;

  function init() {
    nodeTitle.innerText = title;

    // divTableTeam.innerHTML = buildTeamTable();
    // teamsFiltered = URL;
    // console.log(teamsFiltered)
    fetchData();
  }

  function fetchData() {
    fetch(URL)
      .then((res) => res.json())
      .then((data) => {
        buildTeamTable();
      })
      .catch((err) => {
        divTableTeam.innerHTML += 'Erreur: impossible de charger les équipes';
        divTableTeam.classList.add('alert-danger');
      });
  }
  divTableTeam.innerHTML = '';
  divTableTeam.classList.remove('alert-danger');


        if (URL.length > 0) {
          let s = '<table class = "table table-bordered table-striped">';
          URL.forEach((team, index) => {
            // console.log(team);
            s += '<tr><th>logo</th><th>name</th><th>country</th></tr>';

            s += '<tr>';
            s += '<td>';
            s += '<img class="logo" src="' + team.logo + '" alt="">';
            s += '</td>';
            s += '<td>';
            s += team.name;
            s += '</td>';
            s += '<td>';
            s += team.country;
            s += '</td>';
            s += '</tr>';
            divTableTeam.innerHTML = s;
          });
          s += '</table>';
        }
       

  init();
})();

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CV 2021</title>
    <script src="./index.js" defer></script>
    <style>
      img {
        width: 100px;
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
      }

      img.logo {
        width: 50px;
      }
    </style>
  </head>

  <body>
    <main class="container">
      <section>
        <h1 id="title"></h1>
        <div id="tableTeam"></div>
      </section>
    </main>

   
  </body>
</html>

How to fix a table using fetch in JavaScript?

Tags:

javascript

fetch-api

Dlyf75

1 Answers

Jayanika Chandrapriya

Recent Activity

Donate For Us

How to fix a table using fetch in JavaScript?

Tags:

javascript

fetch-api

Dlyf75

1 Answers

Jayanika Chandrapriya

Related questions

Recent Activity

Donate For Us