Push Method overwrites the array

Question

I have an array and I want to simply push the item whenever a button clicked. But what happens is that the most recent pushed data overwrites the previous data of the array, I saw this when I am printing it. My primary requirements for the code is to implement the data structure of array while using objects/functions, thanks in advance for your help.

    let BookInfo = [];


    //create a storage for the book information
    let Book = 
    {
        Name: ' ' ,
        Author: ' ' ,
        Page: ' ',

        
        addItem : function()
        {
            Name = document.getElementById('bTitle').value;
            Author = document.getElementById('bAuthor').value;
            Page =  document.getElementById('bPages').value;

            this.Name = Name;
            this.Author = Author;
            this.Page = Page;

        

        BookInfo.push(Book);                            
        document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);
        
        }
    };

You only have _one_ `Book` object here, so you are pushing the same object to your array each time. — CBroe, Dec 22 '21 at 11:32
Does this answer your question? [Do objects pushed into an array in javascript deep or shallow copy?](https://stackoverflow.com/questions/8660901/do-objects-pushed-into-an-array-in-javascript-deep-or-shallow-copy) — aerial, Dec 22 '21 at 11:54

score 1 · Answer 1 · answered Dec 22 '21 at 11:35

1

push book into bookinfo after the end of book block

    let BookInfo = [];
    
    
        //create a storage for the book information
        let Book = 
        {
            Name: ' ' ,
            Author: ' ' ,
            Page: ' ',
    
            
            addItem : function()
            {
                Name = document.getElementById('bTitle').value;
                Author = document.getElementById('bAuthor').value;
                Page =  document.getElementById('bPages').value;
    
                this.Name = Name;
                this.Author = Author;
                this.Page = Page;
            
            }
        };
 BookInfo.push(Book);                            
            document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);

answered Dec 22 '21 at 11:35

HiddenOne1254

146
1
6

But Sir I want to push everytime the button was clicked (addItem is a button) – lokohinkita Dec 22 '21 at 11:39
so you need to make few changes – HiddenOne1254 Dec 22 '21 at 12:53
let BookInfo = []; //create a storage for the book information let Book = { Name: ' ' , Author: ' ' , Page: ' ', } – HiddenOne1254 Dec 22 '21 at 12:56
addItem : function() { Name = document.getElementById('bTitle').value; Author = document.getElementById('bAuthor').value; Page = document.getElementById('bPages').value; Book.Name = Name; Book.Author = Author; Book.Page = Page; BookInfo.push(Book); document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo); } – HiddenOne1254 Dec 22 '21 at 12:56

score 0 · Answer 2 · answered Dec 22 '21 at 11:55

Just clone the object to BookInfo:

let BookInfo = [];


//create a storage for the book information
let Book = {
  Name: ' ',
  Author: ' ',
  Page: ' ',


  addItem: function() {
    Name = document.getElementById('bTitle').value;
    Author = document.getElementById('bAuthor').value;
    Page = document.getElementById('bPages').value;

    this.Name = Name;
    this.Author = Author;
    this.Page = Page;


    BookInfo.push(JSON.parse(JSON.stringify(Book)));
    document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);

  }
};

<input type="text" id="bTitle" value="aa">
<input type="text" id="bAuthor" value="bb">
<input type="text" id="bPages" value="cc">

<button onclick="Book.addItem()">
Click
</button>

<div id="showArr">

</div>

Also another way:

let BookInfo = [];


//create a storage for the book information
let Book = {
  Name: ' ',
  Author: ' ',
  Page: ' ',


  addItem: function() {
    Name = document.getElementById('bTitle').value;
    Author = document.getElementById('bAuthor').value;
    Page = document.getElementById('bPages').value;

    this.Name = Name;
    this.Author = Author;
    this.Page = Page;


    BookInfo.push({
    Name: this.Name,
    Author: this.Author,
    Page: this.Page,
    addItem: this.addItem
    });
    document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);

  }
};

<input type="text" id="bTitle" value="aa">
<input type="text" id="bAuthor" value="bb">
<input type="text" id="bPages" value="cc">

<button onclick="Book.addItem()">
Click
</button>

<div id="showArr">

</div>

Push Method overwrites the array

2 Answers2