All geek questions in one place

Filtering in ng replay from JSON response

I have a question about filtering inside ng-repeat. But this is not a simple question, since I have no problems requiring a solution. In this case, I am looking for the best answer that does not require a lot of code, but still does the trick as to how I want it. This will become more clear in my description.

brief introduction:
Therefore, I am currently working on a shopping application. The shopping app connects to the existing PrestaShop online store through a web service API. PrestaShop Leisure API Therefore, after creating the customer section, the product section and the shopping cart system, I would like to be able to update the "number of shares" of each product in the application. Many people will tell me: “Well, it's simple, just create a form with ng-repeat response data from the database and the ability to update the stock, say, a button ng-click.

Ok, I did it, but now it's the hard part, and I will explain that I will give some less important examples to make it more clear from what I ask:

Prestashop database The prestashop
database is a database of over 250 tables. Among these tables are various joins through id and the id attribute. Here are some simple examples:

  • The table customerhas a row id_addressthat connects to the table address. In this table, all clients are address info is placed. So far, let say updating a customer I've created a combination of update the table with thecustomer_id but also update theaddress table where theaddress_id is equal to theid_address from the selectedclient client within thetable.

  • The products also have some related tables. Think about prices, taxes, sizes and colors. id_product_attributeis one attribute_idthat can match color or size.

As explained above, the prestashop database structure is very detailed, limited to using various filters to display the required data.

-
webservice angularJS, javascript, php JSON. JSON - . $http.get(url, options), . response. :

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

$scope.customers = response.data.customers.customer , , , ng-repeat,

    $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>
Hide result

, . JSON, 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"}}}}]}}

, :

stock_availables .

Instance Stock Table

, $http.get() response, . id_product_attribute. row a product_attribute. . . , , , ng-if="id_product_attribute == 0", , id_attribute. . , id = "1", id = "2" .. , , , ng-if id? 50 id_attribute, . , , , ng-if. .

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

:

  • Product-id 1: , ..
  • Product-id 2: , ..

Simple design

, 50 ng-if, , , ?

,

!

+4
5

, ?

"" ( ), .

, GROUP BY SQL.

, " " .

SQL ( ), group_by javascript:

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

group_by (..).

:

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

, , , , .

group_by, :

javascript ?

+1

, , . . API API, API JSON WebApp. WebApp, js .

, API , . WebApp, , ngIf , Pure Functions JS , functionnaly .

, .map() / .concat() - . , http://reactivex.io/learnrx/

+1

, ng-if n , ,

  $scope.getFilteredList = 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'
     });
  }

ng-repeat

<div ng-repeat="stock_available in getFilteredList">
+1

I think you better let the database order it for you. But you can try AngularJS orderBy or filter

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>
Run codeHide result
0
source

I would also suggest using the db query to ensure your items are ordered. However, we do not always have access to changing the backend or how it functions.

SO ..

I would suggest using a sort function to convert your response data before installing $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
 });
0
source

Source: https://habr.com/ru/post/1689616/

More articles:


All Articles