How do I display object values on html table

Twist 0
Viewed 48

I am trying to display object values on a new table row but i get "undefined" instead.

the user inputs information of a book in a form on the html and my aim is to display it using a button on-click "displayBooks()"

here's the JavaScript with the "displayBooks()" function i'm having trouble with

//array to store the books
let books = [];

//book constructor
class Book {
    constructor(title, author, genre, review) {
        this.title = title;
        this.author = author;
        this.genre = genre;
        this.review = review;
    }
}

//creates new object from values input in html
function createBook() {

    let book = new Book(
        document.getElementById("title").value,
        document.getElementById("author").value,
        document.getElementById("genre").value,
        document.getElementById("review").value
    )
    console.log(book);
    books.push(book);
    localStorage.setItem("Books", JSON.stringify(books));
    displayBooks();
    
}

function displayBooks() {
   //getting the object from local storage
      let books = JSON.parse(localStorage.getItem("Books")); console.log(books);

       let table = document.getElementById("table");
    
       var newRow = table.insertRow(table.length),
       cell1 = newRow.insertCell(0),
       cell2 = newRow.insertCell(1),
       cell3 = newRow.insertCell(2),
       cell4 = newRow.insertCell(3)
       title = books.title,
       author = books.author,
       genre = books.genre,
       review = books.review;
    
    cell1.innerHTML = title;
    cell2.innerHTML = author;
    cell3.innerHTML = genre;
    cell4.innerHTML = review;
    }
javascript
1 Answers

First of all I simplifed your "class Book":

//array to store the books
let books = [];

function Book (title, author, genre, review)
{
    this.title = title;
    this.author = author;
    this.genre = genre;
    this.review = review;
}

You can refer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects. This site also describe how you can add extra functions for your object "Book".

    //Untouched  
    function createBook() {
        let book = new Book(
            document.getElementById("title").value
            document.getElementById("author").value,
            document.getElementById("genre").value,
            document.getElementById("review").value
        )
        console.log(book);
        books.push(book);
        localStorage.setItem("Books", JSON.stringify(books));
    }

Based on https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell here a proper way to add new table row(s)

//Modifed  
    function displayBooks() {
       //getting the object from local storage
        let books = JSON.parse(localStorage.getItem("Books")); console.log(books);
    
        let table = document.getElementById("table");
        
        /*Due to the fact you stored an array into localstorage, 
          you have to iterate throug this */
        for(i = 0; i < books.length;i++)
        {
            var newRow = table.insertRow(-1);
            cell1 = newRow.insertCell(0);
            cell2 = newRow.insertCell(1);
            cell3 = newRow.insertCell(2);
            cell4 = newRow.insertCell(3);
            
            cell1.appendChild(document.createTextNode(books[i].title));
            cell2.appendChild(document.createTextNode(books[i].author));
            cell3.appendChild(document.createTextNode(books[i].genre));
            cell4.appendChild(document.createTextNode(books[i].review));
        }
    }

As in the comments mentioned, one big mistake was you wanted to acces on an Array. An array is a list. You habe to access on each element with an index, even it contains only one element.

Reporter0
Related