javascript - orderby - filter: notarray Matriz esperada pero recibida: 0
angularjs filter notarray (2)
controlador
@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();
}
Llamada angular
$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();
}
};
})
No estoy seguro de por qué usar el filtro obtengo la excepción.
también se vio en el doc angular https://docs.angularjs.org/error/filter/notarray Mi resultado es una matriz pero no estoy seguro de por qué recibo esa excepción.
Muestra el resultado de backend que estoy obteniendo.
[{"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>
Siempre debes usar track by
al final de la expresión
<li ng-repeat="g in graphs | filter:searchText track by $index"></li>
Dado que al evaluar una expresión para ng-repeat
angular, se necesita el resultado final para el seguimiento por el trabajo. Si lo proporciona al final, su filtro se aplicará y se calculará en el resultado final. Puede ver el código fuente en documentos angulares.
De acuerdo con la documentación de ng-repeat
Si está trabajando con objetos que tienen una propiedad de identificador, debe realizar un seguimiento por el identificador en lugar de por el objeto completo. Si vuelve a cargar sus datos más tarde, ngRepeat no tendrá que volver a generar los elementos DOM para los elementos que ya ha procesado, incluso si los objetos JavaScript en la colección han sido sustituidos por otros nuevos. Para colecciones grandes, este signifincamente mejora el rendimiento de representación. Si no tiene un identificador único, el seguimiento por $ index también puede proporcionar un impulso en el rendimiento.
El problema está ocurriendo porque estás usando track by $index
antes de aplicar tu filtro. Para resolver esto, cambie su expresión a:
<li ng-repeat="g in graphs | filter:searchText track by $index"></li>
La track by
expresión debería ser siempre la última, después de todos tus filtros. Es una regla mencionada en los documentos: ngRepeat
Explicación:
Cuando no usa track by $index
en ngRepeat
, la entrada para todos los filtros utilizados es la matriz, es decir, si
ng-repeat="item in items | filter1 | filter2",
a continuación, items
es la entrada que se pasa a los filtros de forma predeterminada y el filtrado se realiza en esta entrada.
Sin embargo, cuando usa track by $index
, la entrada a los filtros se convierte en $index
lugar de items
y, por lo tanto, el error:
Arreglo esperado (leer: elementos) pero recibido 0 (leer: índice $).
Por lo tanto, para contrarrestar esto, la matriz se pasa primero a través de todos los filtros y el resultado filtrado se usa con la track by $index
.
Espero que esto lo aclare.