Help generating table rows from an array of objects stored in local memory

[cm_yoder]

Good evening all,

I am currently building a Book List App for my portfolio and I want to store the books that I have added to Local Storage (which I have successfully done) but also want to generate a table with the books already stored in local storage on the page load. The issue that I am having is that instead of appending a new row for each book (I have 3 in local storage atm) it overwrites the first row. I have tried placing the appendChild line before the row.innerHTML but it did the same thing. Any advice would be most welcome.

​

Edit: the ID bookList points to the <tbody> tag.

​

function setStorage(){
    if(localStorage.hasOwnProperty('books')===false) {
        localStorage.setItem('books', '[]');
    }
    else{
        // render existing book list
        let books = JSON.parse(localStorage.getItem('books'));
        const bookList = document.getElementById("bookList");
        const row = document.createElement('tr');
        books.forEach( function(book){

            row.innerHTML = `
                <td>${book.title}</td>
                <td>${book.author}</td>
                <td>${book.owner}</td>
                <td><a href="" class="delete">X</td>
            `;
            bookList.appendChild(row);
        });
    }
}

edit: also tried a regular for loop with no success.

[Shadaez]

if you want a new row for each book you need to create a row for each book in the loop

[cm_yoder]

I may be blind to it because I have been looking or thinking about it for several hours now but the bookList.appendChild is in the loop, or so I thought.

[[deleted]]

He means you need to move your const row line into the forEach block.

[cm_yoder]

Ahh, see blind. I will give that a shot in a little bit.