Errore Angularjs: [filtro: notarray] Array atteso ma ricevuto: {} con un filtro su una ripetizione ng

Sto tentando di compilare una tabella html utilizzando una richiesta angolare a un'API utilizzando la direttiva ng-repeat. La pagina HTML viene caricata prima, quindi viene eseguita la richiesta per ottenere i dati che riempiono la tabella quando viene restituita la risposta. Quando aggiungo un filtro alla direttiva ng-repeat la tabella è popolata e le funzioni di filtro, tuttavia a mio console browser Chrome ottengo il seguente errore:Errore Angularjs: [filtro: notarray] Array atteso ma ricevuto: {} con un filtro su una ripetizione ng

Error: [filter:notarray] Expected array but received: {} http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7D at REGEX_STRING_REGEXP (angular.js:68) at angular.js:18251 at Object.fn (app.js:185) at Scope.$get.Scope.$digest (angular.js:15683) at Scope.$get.Scope.$apply (angular.js:15951) at bootstrapApply (angular.js:1633) at Object.invoke (angular.js:4450) at doBootstrap (angular.js:1631) at bootstrap (angular.js:1651) at angularInit (angular.js:1545)

ho impostato un campione sul plunker, il l'errore viene visualizzato anche nella console quando viene eseguito il campione:

http://plnkr.co/edit/J83gVsk2qZ0nCgKIKynj?

il codice HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> 
    <script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script> 
    <script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"></script> 
    <script type="text/javascript" src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" /> 
</head> 
<body ng-app="inventoryManagerApp"> 
    <h3>Sample - Expected array error</h3> Filter 
    <input type="text" id="quoteListFilter" class="form-control" ng- model="search" /> 
    <div ng-controller="QuoteController"> 
    <table class="table table-bordered"> 
     <tbody> 
     <tr> 
      <th>Specification</th> 
      <th>Quantity</th> 
     </tr> 
     <tr ng-repeat="quote in quotes | filter:search"> 
      <td>{{quote.SpecificationDetails}}</td> 
      <td>{{quote.Quantity}}</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</body> 
</html>

Il javascript:

var inventoryManagerApp = angular.module('inventoryManagerApp', [ 
    'ngResource', 
    'quoteControllers' 
]); 

var quoteControllers = angular.module('quoteControllers', []); 

quoteControllers.controller("QuoteController", ['$scope', 'filterFilter', 'quoteRepository', 
    function($scope, filterFilter, quoteRepository) { 

    $scope.quotes = quoteRepository.getQuoteList().$promise.then(
      function (result) { 
       $scope.quotes = result; 
      }, 
      function() { 
      } 
     ); 
    } 
]); 

inventoryManagerApp.factory('quoteRepository', 
    function($resource) { 
    return { 
     getQuoteList: function() { 
     return $resource('http://drbsample.azurewebsites.net/api/Quotes').query(); 
     } 
    }; 
    });

Sembra essere qualcosa a che fare con i dati per riempire il direttiva ng-repeat non essere immediatamente disponibili al caricamento della pagina. Quando sostituisco $ scope.quotes con i dati JSON sul caricamento della pagina invece di richiedere i dati dall'API non ottengo l'errore.

fonte

2015-08-25 stonefree

Il problema è con questo compito:

$scope.quotes = quoteRepository.getQuoteList().$promise.then(
     function (result) { 
      $scope.quotes = result; 
     }, 
     function() { 
     } 
    );

Funzione .then() restituisce un altro oggetto promessa per consentire il concatenamento: .then().then(), sia perché restituisce un oggetto che è il motivo per cui il vostro ricevono notarray errore.

Per evitare errori di riferimento, è possibile specificare $scope.quotes come arrray vuoto in precedenza, quindi assegnare i risultati ad esso.

$scope.quotes = []; 
quoteRepository.getQuoteList().$promise.then(
     function (result) { 
      $scope.quotes = result; 
     }, 
     function() { 
     } 
    );

fonte

2015-08-25 22:27:27

$scope.quotes = quoteRepository.getQuoteList().$promise.then(

l'assegnazione è inutile. basta eliminare il $scope.quotes = dalla linea per risolvere il tuo problema.

promise.then restituisce un oggetto che è inutile per l'istruzione repeat.

fonte

2015-08-25 22:25:49 ibrahimbayer

I $ http legacy metodi promessa .success e .error sono stati disapprovati e saranno rimossi in v1.6.0 angolare. Utilizzare invece il metodo standard .then.

metodo restituisce Ora Then oggetto con diversi elementi: i dati, stato, ecc Quindi è necessario utilizzare response.data invece di risposta:

$http.get('https://example.org/...') 
    .then(function (response) { 

    console.log(response); 

    var data = response.data; 
    var status = response.status; 
    var statusText = response.statusText; 
    var headers = response.headers; 
    var config = response.config; 

    console.log(data); 

});

fonte

2017-04-20 10:21:37 IgorBeaz

quoteRepository.getQuoteList().then(
    function (result) { 
     $scope.quotes = result; 
    }, 
    function() { 
    } 
);

fonte

2017-10-19 12:13:13

Errore Angularjs: [filtro: notarray] Array atteso ma ricevuto: {} con un filtro su una ripetizione ng

risposta

Problemi correlati