web-dev-qa-db-fra.com

filtre: notarray Tableau attendu mais reçu: 0

manette

    @RequestMapping(value = "/graphs", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
    public Collection<Graph> getSkeletonGraph()
    {
        log.debug("REST request to get current graphs");
        return graphService.getSkeletonGraphs();
    }

Appel angulaire

    $scope.graphs = [];
    Graph.getGraphs().$promise.then(function(result)
    {
        $scope.graphs = result;
    });



    angular.module('sampleApplicationApp').factory('Graph', function($resource)
     {
      return {
        getGraphs: function() {
           return    $resource('api/graphs/:id').query();
      }
     };
    })

Je ne sais pas pourquoi en utilisant le filtre, je reçois l'exception.

regardé également dans angular doc https://docs.angularjs.org/error/filter/notarray Mon résultat est un tableau mais je ne sais pas pourquoi je reçois une telle exception.

Exemple de résultat du backend que je reçois.

[{"id":"135520b0-9e4b-11e5-a67e-5668957d0149","area":"Bingo","models":[],"enumerateds":[]},{"id":"0db925e0-9e53-11e5-a67e-5668957d0149","area":"jin","models":[],"enumerateds":[]},{"id":"7a717330-9788-11e5-b259-5668957d0149","area":"Product","models":[],"enumerateds":[]},{"id":"402d4c30-980f-11e5-a2a3-5668957d0149","area":"fgfgfg","models":[],"enumerateds":[]},{"id":"404b77b0-9e53-11e5-a67e-5668957d0149","area":"olah","models":[],"enumerateds":[]},{"id":"cd071b10-9e52-11e5-a67e-5668957d0149","area":"lolo","models":[],"enumerateds":[]},{"id":"d9808e60-9710-11e5-b112-5668957d0149","area":"catalog","models":[],"enumerateds":[]},{"id":"2aaca9f0-97e2-11e5-91cd-5668957d0149","area":"btg","models":[],"enumerateds":[]},{"id":"955e9ed0-978c-11e5-93fd-5668957d0149","area":"promotions","models":[],"enumerateds":[]},{"id":"1e441d60-980f-11e5-a2a3-5668957d0149","area":"hjuhh","models":[],"enumerateds":[]},{"id":"fb96dfe0-978d-11e5-93fd-5668957d0149","area":"voucher","models":[],"enumerateds":[]}]

html

<li ng-repeat="g in graphs track by $index | filter:searchText"></li>
javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
16
Saurabh Kumar

Le problème se produit car vous utilisez track by $index avant d'appliquer votre filtre. Pour résoudre ce problème, changez votre expression en:

<li ng-repeat="g in graphs | filter:searchText track by $index"></li>

Le track by expression doit toujours être au dernier, après tous vos filtres. C'est une règle mentionnée dans les documents: ngRepeat

Explication:

Lorsque vous n'utilisez pas track by $index dans ngRepeat, l'entrée de tous les filtres utilisés est le tableau, c'est-à-dire si son

ng-repeat="item in items | filter1 | filter2",

alors items est l'entrée passée aux filtres par défaut et le filtrage est effectué sur cette entrée.

Cependant, lorsque vous utilisez track by $index, l'entrée des filtres devient $index au lieu de items et donc l'erreur:

Tableau attendu (lecture: éléments) mais reçu 0 (lecture: $ index).

Par conséquent, pour contrer cela, le tableau passe d'abord par tous les filtres et le résultat filtré est utilisé avec track by $index.

J'espère que cela clarifie les choses.

66
Tarun Dugar

Vous devez toujours utiliser track by en fin d'expression

<li ng-repeat="g in graphs | filter:searchText track by $index"></li>

Depuis lors de l'évaluation d'une expression pour ng-repeat angular a besoin du résultat final pour que track by fonctionne. Si vous le fournissez à la fin, votre filtre sera appliqué et track by est calculé sur la sortie finale. Vous pouvez voir le code source à angular docs.

Selon la documentation de ng-repeat

Si vous travaillez avec des objets qui ont une propriété identifiant, vous devez effectuer le suivi par l'identifiant au lieu de l'objet entier. Si vous rechargez vos données plus tard, ngRepeat n'aura pas à reconstruire les éléments DOM pour les éléments qu'il a déjà rendus, même si les objets JavaScript de la collection ont été remplacés par de nouveaux. Pour les grandes collections, cela améliore considérablement les performances de rendu. Si vous n'avez pas d'identifiant unique, le suivi par $ index peut également améliorer les performances.

3
Vivek