Javascript array not displayed in HTML table-CodePudding

I am trying to loop through arrays of data which then displayed in the html table. I am able to create a new object and pass the data in the object to an empty array. However, the problem that I am facing right now is that the arrays data is not showing in the table. At the same time, there are no errors shown in the console. I checked all info in the function addToHTML() and it supposed to be correct.I have no idea what I did wrong ? The following are the javascript and html code :

// Main Book object model
function Book(title, author, pages, read) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = read;  
}

// Library object model
function Library() {
    this.myLibrary = [];
    
    this.addToLibrary = function(myLibrary) {
        this.myLibrary.push(myLibrary);
    }
}

// Create new book object
let book1 = new Book('Awaken the Giant Within', 'Tony Robbins', '351', 'already read');
let book2 = new Book('Think and Grow Rich', 'Napoleon Hill', '271', 'currently reading');
let book3 = new Book('Rich Dad Poor Dad', 'Robert T. Kiyosaki', '289', 'finish read');

// Create new library object
let library = new Library();

// Add books to the empty array
library.addToLibrary(book1);
library.addToLibrary(book2);
library.addToLibrary(book3);

// Function to add main Book to HTML content
function addToHTML() {
    for (let i=0; i < library.myLibrary.length ; i   ) {

        let dataContainer = document.querySelector('#dataContainer');

        let titleColumn = document.getElementById('title');
        let authorColumn = document.getElementById('author');
        let pagesColumn = document.getElementById('pages');
        let readColumn = document.getElementById('read');

        let book_title = library.myLibrary[i].titleColumn;
        let book_author = library.myLibrary[i].authorColumn;
        let book_pages = library.myLibrary[i].pagesColumn;
        let book_read = library.myLibrary[i].readColumn;
        
        titleColumn.textContent = book_title;
        authorColumn.textContent = book_author;
        pagesColumn.textContent = book_pages;
        readColumn.textContent = book_read;

        dataContainer.appendChild(titleColumn);
        dataContainer.appendChild(authorColumn);
        dataContainer.appendChild(pagesColumn);
        dataContainer.appendChild(readColumn);
    }
}

console.log(library.myLibrary);
addToHTML();

<!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="style.css">
    <title>Book Object</title>
</head>

<body>
    <h1>Book template</h1>

    <form>
        <table id="book-table">
            <thead>
                <tr>
                    <th> Title </th>
                    <th> Author </th>
                    <th> Pages </th>
                    <th> Read </th>
                </tr>
            </thead>

            <tbody>
                <tr id="dataContainer">
                    <td id="title"></td>
                    <td id="author"></td>
                    <td id="pages"></td>
                    <td id="read"></td>
                </tr>
            </tbody>
        </table>
    </form>

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

CodePudding user response：

Needed to change the HTML js code

// Main Book object model
function Book(title, author, pages, read) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = read;  
}

// Library object model
function Library() {
    this.myLibrary = [];
    
    this.addToLibrary = function(myLibrary) {
        this.myLibrary.push(myLibrary);
    }
}

// Create new book object
let book1 = new Book('Awaken the Giant Within', 'Tony Robbins', '351', 'already read');
let book2 = new Book('Think and Grow Rich', 'Napoleon Hill', '271', 'currently reading');
let book3 = new Book('Rich Dad Poor Dad', 'Robert T. Kiyosaki', '289', 'finish read');

// Create new library object
let library = new Library();

// Add books to the empty array
library.addToLibrary(book1);
library.addToLibrary(book2);
library.addToLibrary(book3);

// Function to add main Book to HTML content
function addToHTML() {
    for (let i=0; i < library.myLibrary.length ; i   ) {
    
    
    console.log(library.myLibrary)

        let tbody = document.querySelector('#tbdy');

     
        let content = `
                    <tr>
                    <td id="title">${library.myLibrary[i].title}</td>
                    <td id="author">${library.myLibrary[i].author}</td>
                    <td id="pages">${library.myLibrary[i].pages}</td>
                    <td id="read">${library.myLibrary[i].read}</td>
                </tr>`
                
                tbody.innerHTML  = content;

      
    }
}

console.log(library.myLibrary);
addToHTML();

<!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="style.css">
    <title>Book Object</title>
</head>

<body>
    <h1>Book template</h1>

    <form>
        <table id="book-table">
            <thead>
                <tr>
                    <th> Title </th>
                    <th> Author </th>
                    <th> Pages </th>
                    <th> Read </th>
                </tr>
            </thead>

            <tbody id="tbdy">
                <tr id="dataContainer">
                    <td id="title"></td>
                    <td id="author"></td>
                    <td id="pages"></td>
                    <td id="read"></td>
                </tr>
            </tbody>
        </table>
    </form>

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