JavaScript builtin find() function not working with angularjs 1.7

Question

Hello I am trying to use Angularjs and I'm not very good at it. I'm trying to find something from the madeUpCards[] array. using the find() function of javascript. I am not entirely sure, I think it's not working when I use it with Angularjs. here is the my Code:

<body ng-app="myApp" ng-controller="myCtrl">

<h3>{{getCardById('14')}}</h3>
</body>

array here:

    $scope.madeUpCards = [
     {
        "id": "23",
        "name": "The brain",
        "closed": true,
    },
     {
        "id": "2",
        "name": "Portal dead",
        "closed": true,
    },
     {
        "id": "14",
        "name": "Holiday",
        "closed": true,
    },
     {
        "id": "13",
        "name": "warded",
        "closed": true,
    },
];

javascript :

const app = /**
* myApp Module
*
* Description
*/
angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){

    $scope.getCardById = function(id) {
        this.id = id
        let foundCard = $scope.madeUpCards.find(function(card, index){
            return card.id == this.id
        });
    return foundCard.name;
    }

}]);

in the console this appears:

 angular.js:15536 TypeError: Cannot read property 'find' of undefined
  at ChildScope.$scope.getCardById ((index):49)
  at fn (eval at compile (angular.js:16387), <anonymous>:4:234)
  at expressionInputWatch (angular.js:17398)
  at Scope.$digest (angular.js:19095)
  at Scope.$apply (angular.js:19463)
  at bootstrapApply (angular.js:1945)
  at Object.invoke (angular.js:5122)
  at doBootstrap (angular.js:1943)
  at bootstrap (angular.js:1963)
  at angularInit (angular.js:1848)

pleas help me how to fix this, or atleast tell me what's wrong.

what is Cards here passed through HTML getCardById(Cards, '14')? — quirimmo
– quirimmo, Commented Jan 22, 2019 at 13:41
the (Cards, '14') is the $scope.madeUpCard array, I would like to get the card as object with id of 14. — Evan
– Evan, Commented Jan 22, 2019 at 14:09

Mattkwish · Accepted Answer · 2019-01-22 15:11:45Z

1

Change const madeUpCards to $scope.Cards in your controller, and instead of passing in Cards, just use <h3>{{ getCardById('14') }}</h3>

Then in your controller, use $scope.Cards. i.e. In the controller:

$scope.Cards = [
     {
        "id": "23",
        "name": "The brain",
        "closed": true,
    },
     {
        "id": "2",
        "name": "Portal dead",
        "closed": true,
    },
     {
        "id": "14",
        "name": "Holiday",
        "closed": true,
    },
     {
        "id": "13",
        "name": "warded",
        "closed": true,
    },
];

...

$scope.getCardById = function(id) {
    let foundCard = $scope.Cards.find(function(card, index){
        return card.id == this.id
    });
    return foundCard.name;
}

In the HTML:

<body ng-app="myApp" ng-controller="myCtrl">

<h3>{{ getCardById('14') }}</h3>
</body>

Now you could still pass in Cards to getCardById, but it's already accessible in your controller so it would be pointless.

AngularJS will only bind elements to the DOM that are defined on the scope.

You created Cards as a local variable in the controller, but not part of the scope. So in the HTML when you pass Cards into a function, its undefined (not part of the scope).

This passes undefined into your controller, and then you attempt to call find on undefined, hence your error.

edited Jan 22, 2019 at 15:11

answered Jan 22, 2019 at 13:54

Mattkwish

7707 silver badges16 bronze badges

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

9 Comments

Evan Over a year ago

should I include $scope.Cards inside the controller?

Mattkwish Over a year ago

@Vanz yes, I would, especially if it's a constant or returned from the server.

Mattkwish Over a year ago

Sure thing - I'm on my way into work, so it'll be 20min before I can look for sure, but try just using id instead of this.id. That seems strange to me.

Evan Over a year ago

I remove the this.id = id, and then "card.id == id" it works, Big thanks!!!. but what's the difference of using "this.id" and directly "id"? it works and I dont know how. thanks again

Mattkwish Over a year ago

@Venz this keyword is used for when you want properties on an object (has nothing to do with angular really). Because you're simply in a function, this really has no meaning. It's possible that this.id is not a property so even though you write this.id = id it leaves this.id as undefined. In your case there's no real reason to use this.id because you just want the value from the view. Great I'm glad its working!

|

kirsanv43 · Accepted Answer · 2019-01-22 13:45:01Z

0

Cards is undefined, try that

<h3>{{ getCardById([
     {
        "id": "23",
        "name": "The brain",
        "closed": true,
    },
     {
        "id": "2",
        "name": "Portal dead",
        "closed": true,
    },
     {
        "id": "14",
        "name": "Holiday",
        "closed": true,
    },
     {
        "id": "13",
        "name": "warded",
        "closed": true,
    },
], '14') }}</h3>

answered Jan 22, 2019 at 13:45

kirsanv43

3582 silver badges13 bronze badges

Comments

SuperStar518 · Accepted Answer · 2019-01-22 13:58:38Z

<h3>{{ getCardById(Cards, '14') }}</h3>

According to this snippet, the variable Cards should be binded to $scope.

So, define a $scope.Cards at the initial part of the controller as below:

const app = /**
* myApp Module
*
* Description
*/
angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){

    $scope.Cards = [
        {
            "id": "23",
            "name": "The brain",
            "closed": true,
        },
        {
            "id": "2",
            "name": "Portal dead",
            "closed": true,
        },
        {
            "id": "14",
            "name": "Holiday",
            "closed": true,
        },
        {
            "id": "13",
            "name": "warded",
            "closed": true,
        },
    ];

    $scope.getCardById = function(cards, id) {
        this.cards = cards
        this.id = id
        let foundCard = this.cards.find(function(card, index){
            return card.id == this.id
        });
        return foundCard;
    };

}]);

Happy coding.

Collectives™ on Stack Overflow

JavaScript builtin find() function not working with angularjs 1.7

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related