How to print whole json data - node.js

Question

Why for loop is not working , but on individual data it works.
I'm trying to fetch 3 inputs from the api, book name , author name and subject.
<table class="table table-bordered">
<h1 align="center">List of Science Book Records</h1>
<thead>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Publish Date</th>
</tr>
</thead>
<tbody class="mypanel">
<script>
$.getJSON('https://openlibrary.org/subjects/science.json', function(data) {
for (var i=0;i<data.length;i++) {
console.log("hii");
var text = `<tr><td>${data.works[i].title}</td>
<td>${data.works[i].authors[i].name}</td>
<td>${data.name}</td></tr>`
$(".mypanel").html(text);
}
});
</script>
</tbody>
</table>

Answer 1

You should looping data.works instead. Check the following snippet.
I'm assuming that data.works[i].autors has only one position, if not, you can loop them as well.
Finally prepend to the div with class myPanel.
Hope it helps.
$.getJSON('https://openlibrary.org/subjects/science.json', function(data) {
for (var i=0;i<data.works.length;i++) {
var text = `<tr><td>${data.works[i].title}</td>
<td>${data.works[i].authors[0].name}</td>
<td>${data.name}</td></tr>`
$(".mypanel").append(text);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<h1 align="center">List of Science Book Records</h1>
<thead>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody class="mypanel">

Answer 2

Judging from JSON structure that you have, you're iterating over the length of an object data which is undefined.
In order to show the list of works you need to iterate over the length of works so your loop will look like this
for (var i = 0; i < data.works.length; i++) {
// do stuff with data.works[i]
}
And also you can use append in each iteration of the loop OR you can summarize all text, and then append it after the loop, by doing
text += `<tr><td>${data.works[i].title}</td>
<td>${data.works[i].authors[i].name}</td>
<td>${data.name}</td></tr>`;
But don't forget to define variable text before the loop.