Search code examples
javascripthtmlcssbootstrap-5

How to apply Bootstrap Table

I am working on fetching data from an API into table format using JavaScript. I received the data perfectly but cannot apply Bootstrap onto the table header part.

async function Sports() {
  let Api = "https://inshortsapi.vercel.app/news?category=sports";
  let result = await (await fetch(Api)).json();

  document.write(`   <table class='table'>
                                <thead class='thead-dark'>
                                 <tr><th>SR NO</th>
                                     <th> AUTHOR NAME</th>
                                     <th>CONTENT</th>
                                     <th>DATE </th>
                                 </tr></thead>`);

  for (var i = 0; i < result.data.length; i++) {

    document.write(`<tbody><tr>
                                        <td>${i+1}</td>
                                        <td>${result.data[i]["author"]}</td>
                                        <td>${result.data[i]["content"]}</td>
                                        <td>${result.data[i]["date"]}</td>
                                    </tr></tbody>`)
  }
  document.write("</table>")
}
Sports();
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

I want to Table like this [Header like this]

I didn't get the result I wanted and got this type of table.

I got this type of table

Solution

  • When you use document.write, you override all the HTML you have, so it deletes your import of Bootstrap.

    You can use document.body.insertAdjacentHTML('afterbegin', "<table>...</table>") to append your element to what you already have.

    async function Sports() {
  let Api = "https://inshortsapi.vercel.app/news?category=sports";
  let result = await (await fetch(Api)).json();

  let html = `   <table class='table'>
                                <thead class='table-dark'>
                                 <tr><th>SR NO</th>
                                     <th> AUTHOR NAME</th>
                                     <th>CONTENT</th>
                                     <th>DATE </th>
                                 </tr></thead>`

  for (var i = 0; i < result.data.length; i++) {

    html += `<tbody><tr>
                                        <td>${i+1}</td>
                                        <td>${result.data[i]["author"]}</td>
                                        <td>${result.data[i]["content"]}</td>
                                        <td>${result.data[i]["date"]}</td>
                                    </tr></tbody>`
  }
  html += ("</table>")
  document.body.insertAdjacentHTML('afterbegin', html)
}
Sports();
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>