Why doesn´t indexOf work?

Question

in the code below; why is "self.ticketCollection.indexOf(t)" in the "self.Addticket-function always -1 ???

After page_load, I push New (newTicket), then ADD (addTicket). This works fine and a record of ("ny","-1") is added to my ticketCollection. Then when I repeat this another record exactly the same is added. Debugger (FireBug) tells me "self.ticketCollection.indexOf(t)" is -1 in both cases. Why?

function Ticket(ticketname, cost) {
    var self = this;

    //alert("ikke implementer fullt ut ennå!");

    self.ticketname = ko.observable(ticketname);
    self.cost= ko.observable(cost);

} // end Ticket

//==============================================================

function ViewModel() {
var self = this;

//------ initiate ----------------------------------------------

// the product we want to view/edit
self.selectedTicket = ko.observable();

self.ticketCollection = ko.observableArray(
    [
        new Ticket("Bus", "$2"),
        new Ticket("Ferry", "$3"),
        new Ticket("Bicycle", "$1")
    ]);

// selected item from ticket list-view
self.listViewSelectedItem = ko.observable();

// push any changes in the list view to our main selectedTicket
self.listViewSelectedItem.subscribe(function (ticket) {
    if (ticket) {
        self.selectedTicket(ticket);
    }
}); // self.listViewSelectedItem.subscribe //


//---- NEW button pressed --------------------------------------
self.newTicket = function () {

        // create a new instance of a Ticket
        var t = new Ticket("ny", "-1");

        // set the selected Ticket to out new instance
        self.selectedTicket(t);

    }.bind(this);

//---- ADD to collection -----------------------------------------

self.addTicket = function () {
        //alert("ADD is pushed!");

        // get a reference to out currently selected product
        var t = self.selectedTicket();

        // ignore if null
        if (!t) { return; }

        // check to see that the ticket doesn\t already exist
        if (self.ticketCollection.indexOf(t) > -1) {
            return;
        }

        // add the product to the collection
        self.ticketCollection.push(t);

        // clear out the selected product
        self.selectedTicket(t);
        //self.listViewSelectedItem(t)

    };
} // end ViewModel

Thanx in advance!

Asle :)

score 4 · Accepted Answer · edited May 23 '17 at 11:58

Just because you have two Ticket objects that contain the exact same values, does not mean these two objects are equal. This is why the indexOf returns -1 every time -- because the ticketCollection observable array does NOT contain the exact item you are checking for. This SO question has a good explanation of JavaScript object equality: How to determine equality for two JavaScript objects?

Instead of using the indexOf on the array, you should instead check to see if any item in your ticketCollection matches BOTH the ticketName and the cost of the new, incoming Ticket.

I'll add an example of what I mean:

for(var i=0, len=self.ticketCollection().length; i < len; i++){
if ((t.ticketname() === ticketCollection()[i].ticketname()) && (t.cost() === ticketCollection()[i].cost())) {
    alert('Found the object in the observable array')
}

Why doesn´t indexOf work?

1 Answers1