I'm using a form to push objects to an array but they aren't displaying properly

Question

I'm creating a library app where users input data into a form and the values they enter are displayed in its own div.

I have this array

let myLibrary = [
  {
    title: "The Once and Future King",
    author: "White",
    pages: 654,
  },
  {
    title: "The Hobbit",
    author: "Tolkien",
    pages: 304,
  },
];

which is automatically displaying each object (for testing purposes) on my page thanks to this forEach()

myLibrary.forEach((book) => {
  const bookContent = document.getElementById("content");
  const addBook = document.createElement("div");
  addBook.className = "book";
  bookContent.appendChild(addBook);
  addBook.innerHTML = `
    <div class="title">
    <p class="bookTitle">
    <span>${book.title}</span>
    </p>
    </div>
    <div class="body">
    <p>
    Author: <span>${book.author}</span>
    </p>
    <p>
    Pages: <span>${book.pages}</span>
    </p>
    </div>`;
});

The forEach makes it so every object inside my array is displayed in its own 280x365 pixel div and the book title, author and page count is displayed in it's own p element. I'm also using flex for organization.

I also have a form which users can input a new book title, author and page number to add to their growing book collection.

const form = document.getElementById("form");

form.addEventListener("submit", updateLibrary);

function updateLibrary(event) {
  event.preventDefault();

  const title = document.getElementById("title").value;
  const author = document.getElementById("author").value;
  const pages = document.getElementById("pages").value;

  const book = {
    title: title,
    author: author,
    pages: parseInt(pages),
  };
  myLibrary.push(book);
  console.log(myLibrary);
}

When I fill the form out, everything appears to work perfectly. I have console.log in my updateLibrary function and I notice the object is being pushed into the array like I want it to. But every time I hit the submit button, a new div isn't being created for the new book. I'm guessing this has to do with my forEach not triggering the new object but I can't find a way to fix this.

How can I better write my code so a new div is also being created with the new object every time I submit the form?

What I've tried

I've tried rearranging my code so the forEach is below the array, so the updateLibrary function is above and below the forEach.

I've also tried putting the forEach inside the updateLibrary function. That did make it work but it gave me an even worse bug.

Thibault Henry · Accepted Answer · 2022-10-30 10:15:39Z

That is normal. The DOM (so the HTML within the page) is not automatically updated everytime that you change your array. If you want to work like this, I suggest you to look at ReactJS.

But to solve your problem, you must do 3 easy things here : create a function that will handle the display of your object in HTML, update your forEach to only call this new function, then, when a user create a new object, apply it this function :

const bookContent = document.getElementById("content");

function displayBook(book) {
    const addBook = document.createElement("div");
    addBook.className = "book";

    bookContent.appendChild(addBook);

    addBook.innerHTML = `
        <div class="title">
            <p class="bookTitle">
                <span>${book.title}</span>
            </p>
        </div>
        <div class="body">
            <p>
                Author: <span>${book.author}</span>
            </p>
            <p>
                Pages: <span>${book.pages}</span>
            </p>
        </div>`;
}

// Display your original object list
myLibrary.forEach((book) => {
  displayBook(book) 
});

// Handle your object creation
const form = document.getElementById("form");

form.addEventListener("submit", updateLibrary);

function updateLibrary(event) {
    event.preventDefault();

    const title = document.getElementById("title").value;
    const author = document.getElementById("author").value;
    const pages = document.getElementById("pages").value;

    const book = {
        title: title,
        author: author,
        pages: parseInt(pages),
    };

    myLibrary.push(book);

    // Then, ask to display your book
    displayBook(book)

    console.log(myLibrary);
}

It should work fine :)

kanvil · Accepted Answer · 2022-10-30 11:39:53Z

1

You can also use Proxy objects to update the DOM the moment you add a new book to the myLibrary array. For this, we will convert the myLibrary array into a new proxy object named libraryProxy and configure it.

const myLibrary = [{
    title: "The Once and Future King",
    author: "White",
    pages: 654,
  },
  {
    title: "The Hobbit",
    author: "Tolkien",
    pages: 304,
  },
];


const libraryProxy = new Proxy(myLibrary, {
  get(target, prop) {
    return target[prop];
  },
  // When you add a new element to the array, 
  // the set method will run and here we will update the DOM   
  // while adding the new element as newVal to the array.
  set(target, prop, newVal) {
    if (Number(prop)) {
      const book = newVal;
      // add new book to array
      target[prop] = book;
      // update the dom
      addBookToUI(book);
    };

    return true;
  }
})


const bookContent = document.getElementById("content");
const form = document.getElementById("form");

form.addEventListener("submit", submitHandler);

libraryProxy.forEach((book) => {
  addBookToUI(book);
})


function submitHandler(event) {
  event.preventDefault();

  const [title, author, pages] = document.querySelectorAll('form > input');

  // New book will be added to the array and the DOM will be updated
  libraryProxy.push({
    title: title.value,
    author: author.value,
    pages: parseInt(pages.value, 10)
  });
}

function addBookToUI(book) {
  const bookEl = document.createElement('div');
  bookEl.className = 'book';
  bookContent.appendChild(bookEl);

  bookEl.innerHTML += `
      <div class="title">
        <p class="bookTitle">
          <span>${book.title}</span>
        </p>
      </div>
      <div class="body">
        <p>
        Author: <span>${book.author}</span>
        </p>
        <p>
        Pages: <span>${book.pages}</span>
        </p>
      </div>
    `;
}

.book {
  border: 1px solid #000;
  margin: 5px 0;
  font-size: 14px;
}

<form id="form">
  <input type="text" id="title" placeholder="title" />
  <input type="text" id="author" placeholder="author" />
  <input type="text" id="pages" placeholder="pages" />

  <button type="submit">save</button>
</form>

<div id="content"></div>

answered Oct 30, 2022 at 11:39

kanvil

3462 silver badges7 bronze badges

2 Comments

Dagger Over a year ago

Thank you for this solution. I will go over it so I can better understand as I've never heard of Proxy before. One question I have pages: parseInt(pages.value, 10) What is the point of the 10? I've seen it before but could never fully grasp it.

kanvil Over a year ago

It is radix(the base in mathematical numeral systems). Check the documentation for details and examples about parseInt and radix.

Collectives™ on Stack Overflow

I'm using a form to push objects to an array but they aren't displaying properly

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related