filtrando en una repetición ng de la respuesta JSON

Tengo una pregunta sobre el filtrado dentro de una repetición ng. Pero esta no es una pregunta sencilla, ya que realmente no tengo un problema que necesite una solución. En este caso, estoy buscando la mejor respuesta posible que no requiera un gran número de código, pero sigue siendo el truco en cuanto a cómo quiero. Se volverá más claro en mi descripción.

una breve introducción:
Por lo tanto, actualmente estoy trabajando en una aplicación de compras. La aplicación de compras tiene una connection con una tienda virtual PrestaShop existente a través de la API del service web. Una API de descanso para PrestaShop. Entonces, después de crear una sección de clientes, una sección de productos y un sistema de carrito, me gustaría poder actualizar la "cantidad de stock" de cada producto dentro de la aplicación. Mucha gente me decía: Bueno, es fácil, solo crea un formulario con ng-repeat response data de la database y la posibilidad de actualizar el stock en un evento de button ng-click .

Bueno, ya lo hice, pero ahora la parte más complicada, y para explicarlo, proporcionaré algunos ejemplos less importantes para que quede más claro de lo que estoy preguntando:

La database prestashop
La database prestashop es una database que existe de más de 250 tablas. Entre esas tablas hay varias conexiones a través de id's y de attributes. Algunos ejemplos simples son:

  1. La tabla de customer tiene una fila id_address que se conecta a la tabla de address . Dentro de esta tabla, address info is placed. So far, let's say updating a customer I've created a combination of update the toda la address info is placed. So far, let's say updating a customer I've created a combination of update the cliente address info is placed. So far, let's say updating a customer I've created a combination of update the address info is placed. So far, let's say updating a customer I've created a combination of update the table with the clientes table with the customer_id but also update the table where the direcciones table where the address_id is equal to the id_address from the selected cliente from the selected within the tabla del cliente.

  2. Los productos también tienen algunas tablas vinculadas. Piense en precios, impuestos, tamaños y colors. El id_product_attribute es un attribute_id que podría corresponder a un color o tamaño.

Como se explicó anteriormente, la estructura de la database prestashop es muy detallada, lo que se limita al uso de varios filters para mostrar los datos deseados.

Usando el service web
Entonces, para usar el service web estoy usando una combinación de angularJS , javascript , php y JSON . El JSON es la información real. usando $http.get(url, options) puedo get los datos de la database. Luego, para mostrar los datos, estoy usando la response . Un ejemplo se muestra a continuación:

 $http.get('config/get/getCustomers.php', { cache: true }).then(function (response) { $scope.customers = response.data.customers.customer }); 

$scope.customers = response.data.customers.customer me da la opción de mostrar los datos del cliente utilizando, por ejemplo, una ng-repeat como en el ejemplo a continuación

  $http.get('config/get/getCustomers.php', { cache: true }).then(function (response) { $scope.customers = response.data.customers.customer }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="row listrow" ng-repeat="customer in customers | orderBy: customer.id"> <div class="col-lg-8"> <p class="customer" ng-bind="customer.id + ' ' + customer.firstname + ' ' + customer.lastname"> </p> </div> </div> 

En este caso, la respuesta estaría vacía ya que no hay connection a la database. Para crear un ejemplo completo para probar aquí hay algunos datos JSON que podría usar de la tabla de customers .

 {"customers":{"customer":[{"id":"1","id_default_group":"0","id_lang":"0","newsletter_date_add":"0000-00-00 00:00:00","ip_registration_newsletter":{},"last_passwd_gen":"2017-10-30 09:27:03","secure_key":{},"deleted":"0","passwd":"$2y$10$eZvPTD9bkxwSfWN7qovrmee\/Den2TqZ5a6YjcGC\/lha3oU59MCjOO","lastname":"TestStefans","firstname":"John","email":"pub@prestashop.com","id_gender":"0","birthday":"0000-00-00","newsletter":"0","optin":"0","website":{},"company":{},"siret":{},"ape":{},"outstanding_allow_amount":"0.000000","show_public_prices":"0","id_risk":"0","max_payment_days":"0","active":"1","note":{},"is_guest":"0","id_shop":"1","id_shop_group":"1","date_add":"2017-04-26 14:01:31","date_upd":"2017-10-27 15:56:54","reset_password_token":{},"reset_password_validity":"0000-00-00 00:00:00","associations":{"groups":{"@attributes":{"nodeType":"group","api":"groups"},"group":{"id":"3"}}}},{"id":"2","id_default_group":"0","id_lang":"1","newsletter_date_add":"0000-00-00 00:00:00","ip_registration_newsletter":{},"last_passwd_gen":"2017-10-27 15:56:55","secure_key":{},"deleted":"0","passwd":"$2y$10$C8M6TIuzmZjP9kh06Hai8.XyuNG9WcSi9L34oXqAuidsJkoYog4WW","lastname":"Demoers","firstname":"Demoers","email":"demo@sdwebdesign.nl","id_gender":"0","birthday":"0000-00-00","newsletter":"0","optin":"0","website":{},"company":{},"siret":{},"ape":{},"outstanding_allow_amount":"0.000000","show_public_prices":"0","id_risk":"0","max_payment_days":"0","active":"1","note":{},"is_guest":"0","id_shop":"1","id_shop_group":"1","date_add":"2017-04-26 14:01:33","date_upd":"2017-10-27 15:56:55","reset_password_token":{},"reset_password_validity":"0000-00-00 00:00:00","associations":{"groups":{"@attributes":{"nodeType":"group","api":"groups"},"group":{"id":"3"}}}}]}} 

Entonces con esta información aquí está mi pregunta:

Mientras trabaja en la aplicación, se proporcionan los siguientes datos dentro de la tabla stock_availables .

La tabla stock_availables

Entonces, al usar $http.get() y las funciones de response , pude crear un formulario para actualizar el stock. Pero ahora eche un vistazo al id_product_attribute . Esta row corresponde a un product_attribute . En este caso, un tamaño o color. Ahora me gustaría filtrar estos resultados. En este caso, al usar por ejemplo ng-if="id_product_attribute == 0" puedo filtrar de manera que solo se id_attribute todos los id_attribute con este id_attribute . Pero me gustaría mostrarlos a todos. Entonces también con id = "1", id = "2", etc. Pero allí es donde me pregunto, ¿hay alguna manera de hacer esto de una manera suficiente que no requiera un ng-if para cada identificación? Debido a que hay alnetworkingedor de 50 id_attribute diferentes que corresponden a un color o tamaño. Entonces, ¿hay alguna function que pueda get cada id diferente y filtrarla de manera suficiente en lugar de utilizar muchas cláusulas ng-if ? Mira el siguiente código completo como un ejemplo.

 myApp.controller('ProductsController', function($scope, $http){ $http.get('config/get/getProducts.php', {cache: true}).then(function(response){ $scope.products = response.data.products.product }); // Stock check + view $http.get('config/get/getStock.php', {cache: true}).then(function (response) { $scope.stock_availables = response.data.stock_availables.stock_available }); // Update Stock $scope.updateStock = function(stock_available) { var stock_id = stock_available.id; var product_id = stock_available.id_product; var stock_quantity = stock_available.quantity; console.log(stock_id + product_id + stock_quantity); // Post to the database // }; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="row listrow"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <ng-form name="stock"> <div ng-repeat="stock_available in stock_availables"> <div class="row full-width padding-tb-15" ng-if="stock_available.id_product == product.id && stock_available.id_product_attribute == 0" ng-repeat="product in products"> <div class="col-lg-12 form-stock-group hidden"> <input title="id" type="text" name="stockId" class="form-control" aria-describedby="" ng-value="stock_available.id"> </div> <div class="col-lg-4"> <h5 ng-bind="product.name.language"></h5> </div> <div class="col-lg-3"> <h5 ng-bind="product.ean13"></h5> </div> <div class="col-lg-2"> <h5 ng-bind="product.reference"></h5> </div> <div ng-if="stock_available.id_product == product.id && stock_available.id_product_attribute == 0" ng-repeat="stock_available in stock_availables" class="col-lg-1 text-center"> <input title="stock_id" type="text" name="stock_id" class="form-control hidden" aria-describedby="" ng-model="stock_available.id" ng-value="stock_available.id"> <input title="stock_id_product" type="text" name="stock_id_product" class="form-control hidden" aria-describedby="" ng-model="stock_available.id_product" ng-value="stock_available.id_product"> <h5 title="quantity" name="stockQuantity" aria-describedby="" ng-model="stock_available.quantity" ng-bind="stock_available.quantity"></h5> </div> <div ng-if="stock_available.id_product == product.id && stock_available.id_product_attribute == 0" ng-repeat="stock_available in stock_availables" class="col-lg-1 text-center"> <input title="updateStockAmount" class="form-control form-control-stock" type="number"> </div> <div class="col-lg-1 text-center"> <a ng-click="printStockLabel()"> <i class="fa fa-print" aria-hidden="true"></i> </a> </div> </div> </div> </ng-form> </div> </div> 

Estoy tratando de crear la siguiente vista:

  1. Product-id 1: luego todos los tamaños, colors, etc.
  2. Identificación del producto 2: luego todos los tamaños, colors, etc.

Diseño simple

Sí, es posible escribir 50 declaraciones ng-if diferentes, pero estoy preguntando si hay una manera mejor, más fácil y más suficiente para hacer esto.

Aquí puede encontrar una compilation simple del código ficticio.

Como siempre,

¡Gracias por adelantado!

5 Solutions collect form web for “filtrando en una repetición ng de la respuesta JSON”

¿Ha considerado usar la database y dejar que el DB genere una consulta específica para esta pantalla, que agrupa todos los productos en una sola fila ?.

por lo que actualmente tiene un montón de ID de productos "repetidos" (dado que la consulta devuelve información detallada para el color y el tamaño), pero necesita operar en el logging único.

Puede hacerlo en el back-end usando una statement de consulta GROUP BY SQL.

Si el punto final está siendo utilizado por más progtwigs, simplemente haga que su punto final sea "solo para esta pantalla" y aplique los cambios necesarios.

Si cambiar el SQL en el back-end es demasiado complejo (o políticamente inviable), siempre puede group_by usar javascript:

https://www.consolelog.io/group-by-in-javascript

group_by toma como input un set de datos y una columna (es decir).

dado un set de datos como:

 c1 c2 c3 1 10 10 1 11 10 3 12 20 // this operation: groups = group_by(dataset, "c1") //returns this: groups: group 1 (2 elements) c2 c3 10 10 11 10 group 3 (1 element) c2 c3 12 10 

esto significa que puede volver a alimentar el set de datos agrupado en el progtwig de cuadrícula, por lo que puede mostrar grupos como grupos y elementos como elementos, iterando primero sobre los grupos y luego sobre los artículos.

Hay muchas forms de implementar group_by, como estos:

¿Cuál es el método más eficiente para groupby en una matriz de objects javascript?

HTH

Tal vez deberías preguntarte qué parte de tu aplicación tiene la responsabilidad de orderar esos attributes. Esto podría conducir a una solución más obvia para usted. Si la responsabilidad recae en la API, entonces su request o su API deben devolver un JSON listo para usar para su aplicación web. Si la responsabilidad va a la aplicación web frontal, hágalo en el código js o en la plantilla.

Supongo que su API debería hacer eso, en cuyo caso no soy el más asesor. Pero si decides hacer esto en la WebApp, definitivamente creo que no debes usar ngIf para hacer eso, sino que debes build Pure Functions en tu JS para build una o varias matrices que podrás usar sin demasiado código funcional en tu plantilla.

Por ejemplo, podría .map () su respuesta y devolver un object bien iterable, y / o encadenarlo con un .concat () o lo que sea. Si necesita ideas para build tales funciones, consulte el ejemplo http://reactivex.io/learnrx/

Al leer su pregunta, sugeriría que en lugar de tener ng-if n veces, puede tener la lógica para filtrar dentro de su controller como

  $scope.getFiltenetworkingList = function() { return $scope.stock_availables.filter(function(stock) { return stock.id_product === $scope.selectedID; // $scope.selectedID will be the id to be filter, in your example '0' }); } 

Y su ng-repeat se cambiará como

 <div ng-repeat="stock_available in getFiltenetworkingList"> 

Creo que es mejor para usted que DB lo ordere por usted. Pero puedes probar AngularJS orderBy o filtrar

 var module = angular.module('MyApp', []); module.controller('MyController', function($scope){ $scope.list = [ { 'id': 0, 'count': 10 }, { 'id': 1, 'count': 9 }, { 'id': 2, 'count': 8 }]; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="MyApp"> <div ng-controller="MyController"> <div ng-repeat="member in list | orderBy:'-count'"> {{member.id}} </div> <hr> <div ng-repeat="member in list | filter: {id:0}"> {{member.id}} </div> <hr> <div ng-repeat="member in list | orderBy: '-count' | filter: {id : '!0'}"> {{member.id}} </div> </div> </div> 

También sugiero usar la consulta db para proporcionar el order de tus elementos. Sin embargo, no siempre tenemos acceso para cambiar un back-end o cómo funciona.

ASI QUE ..

Sugeriría utilizar una function de sorting para convertir los datos de respuesta antes de establecer $scope.customers

 $http.get('config/get/getCustomers.php', { cache: true }).then(function (response) { var temp = response.data.customers.customer; temp.sort(fucntion (item1, item2) { if (item1.product === item2.product) { if (item1.size === item2.size) { return item1.color > item2.color; } return item1.size > item2.size; } return item1.product > item2.product; } $scope.customers = temp }); 
  • AngularJS $ http y $ recurso
  • Evitar escribir el mismo algorithm en múltiples idiomas diferentes
  • Firefox Vs Chrome de los desarrolladores web prespective
  • ¿Cómo restringir el acceso a mi service web?
  • desventajas de websockets
  • ¿La aplicación / json-p text / json-p ya es implementable?
  • Insertar valores de una matriz en un post SOAP basado en key
  • Engendrar processs secundarios en un server express
  • Sugerencias sobre la publicación de una cadena enorme para el service web
  • ¿Cuál es mejor para jQuery.ajax? .Net Web-Service o .ashx?
  • llamar a un service web de java desde la página html y javascript
  • ¿Cómo usar nodemon con files .env?
  • HTTP Status 500 - ... IllegalArgumentException: tipo de valor de retorno desconocido cuando uso la anotación ResponseStatus y el valor de retorno en el controller de spring
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.