0
votes

JavaScript intégré à la fonction find () ne fonctionne pas avec angularjs 1.7

Bonjour, j'essaie d'utiliser Angularjs et je ne suis pas très bon dans ce domaine. J'essaye de trouver quelque chose dans le tableau madeUpCards []. en utilisant la fonction find () de javascript. Je ne suis pas tout à fait sûr, je pense que cela ne fonctionne pas lorsque je l'utilise avec Angularjs. voici le tableau mon code:

 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)

ici:

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;
    }

}]);

javascript:

    $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,
    },
];

dans la console, ceci apparaît:

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

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

aidez-moi à résoudre ce problème, ou dites-moi au moins ce qui ne va pas.

javascript angularjs

3 commentaires

qu'est-ce que les Cartes passées ici via HTML getCardById (Cards, '14') ?

quel est votre résultat attendu pour votre foundCard?

le (Cards, '14') est le tableau $ scope.madeUpCard, je voudrais obtenir la carte comme objet avec l'ID de 14.

3 Réponses :

0
votes

Les cartes ne sont pas définies, essayez cela

<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>

0 commentaires

1
votes

Remplacez const madeUpCards par $ scope.Cards dans votre contrôleur, et au lieu de passer Cards , utilisez simplement

`{{getCardById ('14 ')}}`

Ensuite, dans votre contrôleur, utilisez $ scope.Cards . c'est à dire. Dans le contrôleur:

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

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

Dans le HTML:

$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;
}

Maintenant, vous pouvez toujours passer des cartes à getCardById , mais il est déjà accessible dans votre contrôleur donc ce serait inutile.

AngularJS ne liera que les éléments au DOM qui sont définis sur la portée.

Vous avez créé des Cartes en tant que variable locale dans le contrôleur, mais ne faisant pas partie de la portée. Donc, dans le HTML, lorsque vous passez des Cartes dans une fonction, elle n'est pas définie (ne fait pas partie de la portée).

Cela passe undefined dans votre contrôleur, puis vous essayez d'appeler find sur undefined, d'où votre erreur.

9 commentaires

dois-je inclure $ scope.Cards dans le contrôleur?

@Vanz oui, je le ferais, surtout si c'est une constante ou renvoyée par le serveur.

@Vanz getCardById renvoie un objet, vous devrez donc renvoyer foundCard.Name si vous souhaitez afficher le nom de la carte dans l'en-tête. S'il est toujours vide, déboguez l'appel à getCardById et assurez-vous que vous trouvez une carte

lorsque j'inclus une erreur return foundCard.name apparaît. "TypeError: Impossible de lire la propriété 'nom' non définie"

@Venz donc cela signifie que foundCard n'est pas défini. Ce qui signifie que votre fonction find ne peut pas trouver une carte avec Id = 14 (dans cet exemple). Pourriez-vous coller votre nouvelle fonction de recherche? C'est difficile pour moi de dire avec certitude sans le voir.

Je l'ai fait, je l'ai édité. qu'est-ce que tu vois mal? super merci pour l'aide.

Bien sûr - je suis sur le point de me rendre au travail, il faudra donc 20 minutes avant que je puisse vérifier avec certitude, mais essayez simplement d'utiliser id au lieu de this.id . Cela me semble étrange.

Je supprime le this.id = id, puis "card.id == id" ça marche, un grand merci !!!. mais quelle est la différence d'utiliser "this.id" et directement "id"? ça marche et je ne sais pas comment. Merci encore

@Venz ce mot-clé est utilisé lorsque vous voulez des propriétés sur un objet (n'a vraiment rien à voir avec angular). Parce que vous êtes simplement dans une fonction, ceci n'a vraiment aucune signification. Il est possible que this.id ne soit pas une propriété, donc même si vous écrivez this.id = id , cela laisse this.id indéfini. Dans votre cas, il n'y a pas de vraie raison d'utiliser this.id parce que vous voulez juste la valeur de la vue. Super, je suis content que ça marche!

0
votes

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;
    };

}]);

0 commentaires