array.push() repeats same value

Question

This is an object I tried to create to manage a list, but somethings wrong somewhere, whenever I used the list.addItem(); for the second or third time, all the values(array) in the list.list; changes to the finally added value(array).

var list = {
  list : [],
  eligible: function(item){
    var status = true;
    var dw = (item.w*item.h*item.l)/169;
    if(dw > item.m){
      status = true;
    }else{
      status = false;
    }
    return status;
  },
  addItem : function(item){
    if(this.eligible(item)){
      this.list.push(item);
      console.log(this.list);
      this.refresh();
      alertify.success('Item Added to List');
    }else{
      alertify.warning('Item not eligible for Freight Calculation');
    }
  },
  removeItem : function(item){
    if(this.inList(item)){
      var itemIndex = this.list.indexOf(item);
      if(itemIndex > -1){
        this.list.splice(itemIndex,1);
        alertify.success('Item Removed from List');
        this.refresh();
      }
    }else{
      alertify.error('Item NOT in List');
    }
  },
  inList: function(item){
    var bool = false;
    if (this.list.filter(function(e) { return e.id === item.id; }).length > 0) {
      bool = true;
    }else{
      bool = false;
    }
    return bool;
  },
  findItem: function (id) {
    for (var i = 0; i < this.list.length; i++) {
      if (this.list[i].id === id) {
        return this.list[i];
      }
    }
  },
  refresh: function(){
    if(this.list.length > 0){
      $('.items .table tbody').empty();
      var itemNo = 0;
      $.each( this.list, function( key, item ) {
        $('.items .table tbody').append('</tr><tr><td>' + ++itemNo + '</td><td>' + item.qty + '</td><td>' + item.m + '</td><td>' + item.h + '</td><td>' + item.w + '</td><td>' + item.l + '</td><td><button data-item=\"' + item.id + '\" class=\"btn btn-remove btn-block\"><i class=\"far fa-minus-square\"></i></button></td><td>Price</td></tr>')
      });
    }else{
      $('.items .table tbody').html('<tr><td colspan=\"8\" style=\"text-align:center;\"> No Items Added.</td></tr>')
    }
  }
};

I can't find whats wrong, maybe it's because I've been trying this all day. Btw I'm new to programming.

UPDATE: This is how i call the addItem:

    var id=0; //just for reference     
    $('.btn-add-item').click(function(){
        var item = [];
        item.id = ++id;
        item.qty = parseInt($('input[name=qty]').val());
        item.m = parseFloat($('input[name=weight]').val()).toFixed(3);
        item.w = parseFloat($('input[name=width]').val()).toFixed(2);
        item.h = parseFloat($('input[name=height]').val()).toFixed(2);
        item.l = parseFloat($('input[name=length]').val()).toFixed(2);
        item.country = $('#countrySelect').val();
        list.addItem(item);
    });

@RandyCasburn I updated the question with how i call the function. — Giju Gijja
– Giju Gijja, Commented Apr 7, 2018 at 6:01
@GijuGijja In case you aren't familiar with jsfiddle, here's an example for a jsfiddle for the code you have pasted thus far: jsfiddle.net/7fmcvy5q/11 I haven't found any bugs. :/ — sneep
– sneep, Commented Apr 7, 2018 at 7:46
thanks for the update - that is where your problem is! Please see my answer. — Randy Casburn
– Randy Casburn, Commented Apr 7, 2018 at 14:54

Randy Casburn · Accepted Answer · 2018-04-07 15:04:15Z

1

In your click handler you are assigning each input element's value to the variable item as if item were an Object. Unfortunately, you've initialized item as an Array. You should initialize item as an Object. Then, your list Array will contain a list of Objects.

Change

var item = [];

To

var item = {};

Since you are new to programming, and Javascript is sort special in an odd way with this code, please let me explain why there was no error thrown to let you know this.

In JavaScript, Arrays are actually Objects. So assigning a value like you have (item.blah) actually places that property on the item Array Object as a property, but doesn't know your intent is to add the value to the list of Array elements. Javascript carries out what it believes is your intent.

answered Apr 7, 2018 at 15:04

Randy Casburn

14.2k1 gold badge20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

array.push() repeats same value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related