How can I show object info and not get [object Object] output?

Question

I've checked so many variations of why the object Object appears and can't seem to find a solution. I need to fill in the form and then show the filled information in the empty space beside. But as I said, I've tried many things and can't seem to find my problem.

I would really appreciate some help.

Thanks.

const
  localStorageKey = 'storedbookShelf',
  myForm = document.getElementById('form'),
  showAll = document.getElementById('showall');

const retrieveBookShelf = localStorage.getItem(localStorageKey);
let bookShelf = retrieveBookShelf ? JSON.parse(retrieveBookShelf) : [];

function BookDetails(title, author, pages, pagesread, completed, recommend){
        this.title = title,
        this.author = author,
        this.pages = pages,
        this.pagesread = pagesread,
        this.completed = completed,
        this.recommended = recommended
    }

 var title = document.getElementById("booktitle").value;
    var author = document.getElementById("author").value;
    var pages =  document.getElementById("pages").value;
    var pagesread =  document.getElementById("pagesread").value;
    var completed = document.getElementById("completed").value;
    var recommended = document.getElementById("recommended").value;

    newBookAdd = new BookDetails(title, author, pages, pagesread, completed, recommended)
    bookShelf.push(newBookAdd)
    
    var storeBooks = JSON.stringify(bookShelf);
  
    window.localStorage.setItem("storedbookShelf", (storeBooks));

myForm.addEventListener('submit', e =>
  {
  e.preventDefault();

  showAll.textContent = bookShelf;
}
                        );

.container {display: grid;
grid-template-columns: 1fr 1fr;
padding-left: 20px;}

<div class="container">
  
   <div id="formcontainer" class="no-display">
  
  <form id="form">

                        <h2>Add a new book</h2>

                        <label for="booktitle">Book Title</label><br>
                        <input type="text" id="booktitle" name="booktitle"><br>
                        <label for="author">Author</label><br>
                        <input type="text" id="author" name="author"><br>
                        <label for="pages">Number of Pages</label><br>
                        <input type="text" id="pages" name="pages"><br>
                        <label for="pagesread">Amount of Pages Read</label><br>
                        <input type="text" id="pagesread" name="pagesread"><br>
                        <input type="checkbox" id="completed" name="completed" value="Completed">
                        <label for="completed">Have you completed this book?</label><br>
                        <input type="checkbox" id="recommended" name="recommended" value="Recommended">
                        <label for="recommended">Would you recommend this book?</label><br>
                        <input type="submit" id="submitform" value="Submit">
                        

                    </form>
     
  </div>
  
  <div id="showall"></div>
</div>

You can set `showAll.textContent` to `storeBooks`, which is a stringified version of your array, if you're fine with that format. And if not, create a string inside submit event listener, or override `BookDetails.prototype.toString`. — DallogFheir, Aug 13 '23 at 00:55

score 1 · Accepted Answer · answered Aug 13 '23 at 02:11

You can't directly display a JS Object in a DOM element.
You need to format his values in a HTML syntax.

I made this for you, by using an HTML table.

<!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">
  <title>Demo</title>
  <style>

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
#my-form, #showall {
  display : inline-block; 
  vertical-align: top;
  }
fieldset {
  margin : 2rem;
  width  : 16rem;
  }
legend {
  font-weight   : bold;
  font-size     : 1.4rem;
  margin-bottom : .2rem;
  }
label {
  display    : block;
  margin-top : 0.8em;
  font-size  : .9rem;
  }
input:not([type=checkbox]) {
  display    : block;
  }
button {
  margin-top   : 1rem;
  margin-right : 1rem;
  width        : 40%;
  }
table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : lightslategrey;
  }
th { background : lightsteelblue;  padding: .3em .6em; }
td { background : whitesmoke;      padding: .2em .5em; }
  </style>
</head>
<body>

<form id="my-form">
  <fieldset>
    <legend> Add a new book </legend>
    <label>
      Book Title
      <input name="booktitle" type="text" required>
    </label>
    <label>
      Author
      <input name="author" type="text" required>
    </label>
    <label>
      Number of Pages
      <input name="pages" type="number" value="1" required>
    </label>
    <label>
      Amount of Pages Read
      <input name="pagesread" type="number" value="1" required>
    </label>
    <label>
      <input name="completed" type="checkbox" value="completed">
      Have you completed this book?
    </label> 
    <label>
      <input name="recommended" type="checkbox" value="recommended">
      Would you recommend this book?
    </label> 
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </fieldset>
</form>

<table id="showall">
  <thead>
    <tr><th>title</th><th>author</th><th>pages</th><th>pagesread</th><th>completed</th><th>recommended</th></tr>
  </thead>
  <tbody></tbody>
</table>    

<script>
const
  localStorageKey = 'storedbookShelf'
, myForm    = document.querySelector('#my-form')
, showAll   = document.querySelector('#showall tbody')
, bookShelf = JSON.parse( localStorage.getItem(localStorageKey) || '[]' )
  ;
updateShowall()
  ;
myForm.addEventListener('submit', e =>
  {
  e.preventDefault();

  let book = Object.fromEntries(new FormData(myForm).entries());
  book.completed   ??= 'nope';
  book.recommended ??= 'nope';

  bookShelf.push(book);

  localStorage.setItem(localStorageKey, JSON.stringify( bookShelf ));
  myForm.reset();
  updateShowall();
  });
function updateShowall()
  {
  showAll.innerHTML = '';
  bookShelf.forEach( book =>
    {
    let xRow = showAll.insertRow();
    xRow.insertCell().textContent = book.booktitle;
    xRow.insertCell().textContent = book.author;
    xRow.insertCell().textContent = book.pages;
    xRow.insertCell().textContent = book.pagesread;
    xRow.insertCell().textContent = book.completed;
    xRow.insertCell().textContent = book.recommended;
    });
  }
</script>
</body>
</html>

How can I show object info and not get [object Object] output?

1 Answers1