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 []
I didn't get the result I wanted and got this type of table.
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>