How to display a JSON into an html table using JavaScript?

Question

I have this javascript code that aims to display data into my html table. I am now stuck as to how should i display my data into my html. Here is my code snippet:

document.getElementById('save-book').addEventListener('click', (e) =>{
    books = '';
    if(document.getElementById('books').value){
        books = document.getElementById('books').value;
    }

    book_name = document.getElementById('book_name').value;
    description = document.getElementById('description').value;

    if(book_name && description){
        books = books.replace("[","").replace("]","");
        let book_object = {"id": 0, "book_name": book_name, "description": description};
        book_object = JSON.stringify(book_object);

        books = "["+books+", "+book_object+"]";

        for (var i = JSON.parse(books).length - 1; i >= 0; i--) {
            console.log(JSON.parse(books)[i].id);
            //replace the current rows from a table by this object books.
        }

    }

    document.getElementById('book_name').value = '';
    document.getElementById('description').value = '';
});

where my books tag holds a data that looks like

[{"id": 1, "book_name":"Harry Potter","description":"Harry Potter is a series of fantasy novels written by British author J. K. Rowling"},{"id" : 2, "book_name":"Wizard of Oz","description":"The description here"}]

and my table looks like this:

<table id="book_table" class="display">
    <thead>
        <tr>
            <th class="hide">Id</th>
            <th>Book Name</th>
            <th>Description</th>
            <th class="right-align">Action</th>
        </tr>
    </thead>
    <tbody>
        @if($books->count() > 0)
        @foreach ($books as $book)
        <tr>
            <td class="hide">{{ $book->id }}</td>
            <td>{{ $book->book_name }}</td>
            <td>{{ $book->description }}</td>
            <td></td>
        </tr>
        @endforeach 
        @endif
    </tbody>
</table>

How can i replace and show my books array into the above table?

thats my blade notation from php. But i want to replace the data the moment user create a new one prior to saving it to the database. — Anirudh Lou, Nov 13 '19 at 10:39
use XMLhttprequest and parse the Data or use JavaScript fetch. — Ace, Nov 13 '19 at 10:39
Does this answer your question? [Convert json data to a html table](https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table) — A. Meshu, Nov 13 '19 at 10:43
@A.Meshu I already have my existing table in my html i just want to replace it's rows using the ```books``` from my JavaScript. — Anirudh Lou, Nov 13 '19 at 10:46

score 1 · Answer 1 · answered Nov 14 '19 at 10:35

Is this what you're trying to do?

// your demo data
var books = [
{"id": 1, "book_name":"Harry Potter","description":"Harry Potter is a series of fantasy novels written by British author J. K. Rowling"},
{"id": 2, "book_name":"Wizard of Oz","description":"The description here"}
];
// this will be the place to hold the data
var booksTable = document.querySelector('#book_table tbody');
// itterate through the records
for (var i=0; i < books.length; i++) { 
// now create elements to hold the data
  var tr = document.createElement('tr'); 
  var tdID = document.createElement('td');
  tdID.textContent = books[i].id
  var tdName = document.createElement('td');
  tdName.textContent = books[i].book_name;
  var tdDesc = document.createElement('td');
  tdDesc.textContent = books[i].description;
  var tdAction = document.createElement('td');
  var tdActionBTN = document.createElement('button');
  tdActionBTN.addEventListener('click', actionFunc);
  tdActionBTN.textContent = 'Click';
// appending the elements inside the loop
  tdAction.appendChild(tdActionBTN);
  tr.appendChild(tdID);
  tr.appendChild(tdName);
  tr.appendChild(tdDesc);
  tr.appendChild(tdAction);
  booksTable.appendChild(tr);
}
function actionFunc() {
// demo function
    alert(this.parentNode.parentNode.innerHTML);
}

table {width: 100%}

<table id="book_table" class="display">
  <thead>
    <tr>
      <th class="hide">Id</th>
      <th>Book Name</th>
      <th>Description</th>
      <th class="right-align">Action</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

I put some notes on the code, fell free to comment in case something is not clear.

Hope that helps and enjoy code!

How to display a JSON into an html table using JavaScript?

1 Answers1