Unable to load the array data into table on web page

Question

I am trying to dynamically load data into a table on web page using Javascript. Here is the code I've tried:

class UI{
    static displayBooks(){
        const storedBooks =[
        {
            title : 'matrix',
            author : 'john doe',
            isbn : '45565'
        },
        {
            title : 'book-two',
            author : 'john toe',
            isbn : '45566'
        }
    ];
        const books = storedBooks;
        books.forEach((book) => UI.addBookToList(book));
    }

    static addBookToList(book){
        const list = document.getElementById('book-list');
        const row = document.createElement('tr');
        row.innerHTML =`
        <td>${book.title}</td>
        <td>${book.author}</td>
        <td>${book.isbn}</td>
        <td><a href="#" class="btn btn-danger btn-sm" delete>x</td>`;
        list.appendChild.row;
    }
    
}

// Display Books
document.addEventListener('DOMContentLoaded',UI.displayBooks);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://bootswatch.com/5/yeti/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <title>My Book List</title>
</head>
<body>
    <div class="container mt-4">
        <h1 class="display-4 text-center">
            <i class="fa-solid fa-book-open text-primary"></i>
            My<span class="text-primary">Book</span>List
        </h1>
        <form id="book-form">
            <div class="form-group">
               <label for="title">Title</label>
                <input type="text" id="title" class="form-control">
            </div>
            <div class="form-group">
                <label for="author">Author</label>
                 <input type="text" id="author" class="form-control">
             </div>
             <div class="form-group">
                <label for="isbn">ISBN#</label>
                 <input type="text" id="isbn" class="form-control">
             </div>
             <input type="submit" value="Add Book" class="btn btn-primary w-100 mt-3">
        </form>    
        <table class="table table-striped mt-5">
        <thead>
            <tr>
              <th scope="col">Title</th>
              <th scope="col">Author</th>
              <th scope="col">ISBN#</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody id="book-list"></tbody>
        </table>
    </div>

    <script src="main.js"></script>
    
</body>
</html>

If you run the above code you can see the data is not loaded into the HTML table. The expected output is:

websites photo

I am not able to get the rows of arrays which I have entered. I am not able to understand what is wrong with the code. Can anyone help me out on how to console the arrays which have been stored in the storedBooks variable.

@DiegoD thank you. like i actually overlooked that thanks for your help. — Arun Agasti
– Arun Agasti, Commented Dec 16, 2022 at 4:46

André · Accepted Answer · 2022-12-16 09:07:27Z

1

Your code seems to be almost correct for what you are trying to do. However, in the very last line of your function there's list.appendChild.row;, you are trying to access an undefined property row of appendChild, but the method Node.appendChild() needs to take a child node as an argument.
In your case it should be:

list.appendChild(row);

answered Dec 16, 2022 at 9:07

André

2,06810 gold badges20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to load the array data into table on web page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related