1

I dont know what I am doing wrong, but I cant push object to an existing object. I have boxes, and calculator, ... after click on box ".items"

...
<div data-itemid="2" data-itemprice="43.00" class="items" style="margin:5px;background:#f50;width:100px;height:100px; display:inline-block;"><div><p>Upton</p></div></div>
<div data-itemid="4" data-itemprice="44.00" class="items" style="margin:5px;background:#f50;width:100px;height:100px; display:inline-block;"><div><p>Marvin</p></div></div>
...

After define the amount

 <div>
    <div class="to_pay"></div>
    <hr>
        <div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">0</div>
<div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">1</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">2</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">3</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">4</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">5</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">6</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">7</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">8</div>

    <div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">9</div><div><button id="ok-order">OK</button><button id="cancel-order">Cancel</button></div><input type="text" id="actual-amount" name="actual-amount" <hr="">

        <div>
            <ul class="ordered-items"><li data-itemid="78">Fulton...8 x 48.00...384 <span class="itemslist-clear">X</span> </li><li data-itemid="92">Kyle...9 x 58.00...522 <span class="itemslist-clear">X</span> </li></ul>
        </div>
        <button id="send-order">ORDER</button>
    </div>

I create a list with the steps by clicking on the "ok" button ... the unoredered list works fine, ... but after clicking on the "order" button, the currentOrder object - items array have the same objects, I tried to use .length, then simple assign .. the same issue occurs. The steps are ... click on boxes = "items" class, click on number "calc-number" class, click on ok button "ok-order" id ... (do it random times), then click on order button "send-order" id.

$(document).ready(function() {

    var currentOrder = {
        orderid : 5,
        items: [],
        totalPrice : 0
    }

var activeItem = {
    itemId : 0,
    itemName: '',
    itemAmount : 0,
    itemPrice : 0
}

var desk = $('#front-desktop');
var item = desk.find('.items');
var orderItemList = desk.find('ul.ordered-items');


$(desk).on('click', '.items', function(){
    activeItem.itemId = 0;
    activeItem.itemAmount = 0;
    activeItem.itemPrice = 0;
    item.removeClass('selected-item');
    $(this).toggleClass('selected-item');

    activeItem.itemName = $(this).text();
    activeItem.itemId = $(this)[0].dataset.itemid;
    activeItem.itemPrice = $(this)[0].dataset.itemprice;

});

function addToOrderedItemsList(){
    var tmp_item = '<li data-itemid="'+activeItem.itemId+'">';
    tmp_item += activeItem.itemName+'...'+activeItem.itemAmount+' x '+activeItem.itemPrice+'...'+activeItem.itemAmount*activeItem.itemPrice;
    tmp_item += ' <span class="itemslist-clear">X</span> </li>';
    orderItemList.prepend(tmp_item);
}


$(desk).on('click','.calc-number',function(){
    activeItem.itemAmount = $(this).text();
});

$(desk).on('click','#ok-order',function(){
    currentOrder.items.push(activeItem);
    // currentOrder.items[currentOrder.items.length] = activeItem;
    addToOrderedItemsList();

});

    $(desk).on('click','#send-order',function(){    
        console.log(currentOrder.items);
    });
});

Does anybody have idea why does .push() doesnt inserts object each after, and why inserts the last object every time into every array position?

UPDATE: I update the function as mentioned @Pointy , I should create a copy of object.

$(desk).on('click','#ok-order',function(){
    var copiedObject = jQuery.extend({},activeItem);
    currentOrder.items.push(copiedObject);
    // currentOrder.items[currentOrder.items.length] = activeItem;
    addToOrderedItemsList();

});
jeugen
  • 344
  • 4
  • 23
  • Look at cloning it http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object – epascarello Apr 30 '14 at 18:40
  • Possible duplicate of [Push is overwriting previous data in array](https://stackoverflow.com/questions/19054997/push-is-overwriting-previous-data-in-array) – Heretic Monkey Aug 13 '19 at 13:13

2 Answers2

4

It's because there is only one object. You never update "activeItem" to reference a new object. Whenever you want to start on a new item, you need to start with a new object:

activeItem = {};
Pointy
  • 405,095
  • 59
  • 585
  • 614
1

Well actually its not inserting last one, its inserting the same item every time. The reason is the code - 

var activeItem = {
    itemId : 0,
    itemName: '',
    itemAmount : 0,
    itemPrice : 0
}

You see, this line creates and initialises the object activeItem. Nowhere else you have instantiated a new one. And thus every time you are modifying it, it is modifying the same item and inserting the same item. To fix, you should instantiate it inside the functions. Something like - 

<other codes>.....

var itemTemplate = function(){
    this.itemId = 0;
    this.itemName = '';
    this.itemAmount = 0;
    this.itemPrice = 0;
    return this;
};

activeItem = null;

$(desk).on('click', '.items', function(){

    activeItem = new itemTemplate();

    activeItem.itemId = 0;
    activeItem.itemAmount = 0;
    activeItem.itemPrice = 0;
    item.removeClass('selected-item');
    $(this).toggleClass('selected-item');

    activeItem.itemName = $(this).text();
    activeItem.itemId = $(this)[0].dataset.itemid;
    activeItem.itemPrice = $(this)[0].dataset.itemprice;

});

<other codes>....
brainless coder
  • 6,310
  • 1
  • 20
  • 36