"Cannot read property 'id' of undefined" when parsing an array declared in a factory

Question

I am building a basic app (with MEAN web frameworks and node webkit) in order to understand angularjs better.

Here is the content of my notificationFactory.js

function notificationFactory() {

    var fooMessages = [

        {
            id: 4,
            dismissable: true,
            name: "fooooBaaar",
            function: '',
            showInTopBar: false,
            priority: "high",
            icon: 'fooIconBarBarBar',
            topBarIcon: 'fooIconIconIcon'
        },

        {
            id: 3,
            dismissable: true,
            name: "foofooBarBar",
            function: '',
            showInTopBar: false,
            priority: "high",
            icon: 'fooIconfooIcon',
            topBarIcon: 'IconIconIcon'
        },

        {
            id: 2,
            dismissable: true,
            name: "foo foo",
            function: '',
            showInTopBar: false,
            priority: "high",
            icon: 'fooBaaaaaar',
            topBarIcon: 'IconFooIcon'
        },

        {
            id: 1,
            dismissable: true,
            name: "foo",
            function: '',
            showInTopBar: false,
            priority: "high",
            icon: 'fooIcon',
            topBarIcon: 'fooIconIcon'
        },
    ]

    fooMessages.TopBarDismiss = function (message) {
        $.each(fooMessages, function (i, v) {
            if(v.id = message.id) {
                fooMessages.splice(i,1);
            }
        });

    }

    return fooMessages;

}

angular.module('fooDemo').factory('notificationFactory', notificationFactory);

I call the TopBarDismiss() function in an HTML template using:

<div class="fooDismiss" ng-click="notificationFactory.TopBarDismiss(message)">Dismiss</div>

When I check out the console after pressing my Dismiss "button", I get this:

 TypeError: Cannot read property 'id' of undefined
at notificationFactory.js:94
at Function.m.extend.each (jquery.min.js:2)
at Array.fooMessages.TopBarDismiss (notificationFactory.js:93)
at fb.functionCall (angular.js:10847)
at angular-touch.js:472
at k.$get.k.$eval (angular.js:12702)
at k.$get.k.$apply (angular.js:12800)
at HTMLDivElement.<anonymous> (angular-touch.js:471)
at angular.js:3097
at r (angular.js:325)angular.js:10072 (anonymous function)angular.js:7364 $getangular.js:12802 $get.k.$applyangular-touch.js:471 (anonymous function)angular.js:3097 (anonymous function)angular.js:325 rangular.js:3096 r.triggerHandlerangular.js:3111 S.(anonymous function)angular-touch.js:453 (anonymous function)angular.js:2853 (anonymous function)angular.js:325 rangular.js:2852 c

so it must be the

$.each(fooMessages, function (i, v) {
    if (v.id == message.id) {
    } 
});

part that is quite horrible.

Can you, guys, spot the error for me, please?

Solution

First, as said in the comments, you need to make sure the message object passed is really the one you're looking for.

Then, if you just want to splice you can do:

fooMessages.TopBarDismiss = function (message) {
        var index;
        for (var i = 0; i < fooMessages.length; i++) {
            if(fooMessages[i].id == message.id) {
                index = i;
                break;
            }
        }
        if (index) {
              fooMessages.splice(index,1);
        } 

}