'How to fix a table using fetch in javascript?

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. sorry for my poor english, I hope it's understanding. thank you !

page html, I use tableTeam for display the table :




<!-- language: lang-html -->

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

<!-- end snippet -->

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
  },
];

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to fix a table using fetch in javascript?

Sources

Related Questions