如何使用 JavaScript 將 JSON 顯示到 html 表中？

Question

我有這個 javascript 代碼，旨在將數據顯示到我的 html 表中。 我現在不知道應該如何將我的數據顯示到我的 html 中。 這是我的代碼片段：

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 = '';
});

我的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"}]

我的桌子看起來像這樣：

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

如何將我的書籍數組替換並顯示到上表中？

Answer 1

這是你想要做的嗎？

 // your demo data var books = [ {"id": 1, "book_name":"Harry Potter","description":"Harry Potter is a series of fantasy novels written by British author JK 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>

我在代碼上做了一些注釋，如果有不清楚的地方可以隨意評論。

希望能有所幫助並享受代碼！