javascript - 从JSON响应中过滤ng-repeat

标签 javascript php angularjs json web-services

我有一个关于在ng-repeat中进行过滤的问题。但这不是一个简单的问题，因为我确实没有需要解决的问题。在这种情况下，我正在寻找不需要大量代码的最佳答案，但是仍然可以完成我想要的技巧。在我的描述中它将变得更加清晰。

简短介绍:
因此，我目前正在开发购物应用程序。购物应用程序通过Web服务API与现有的PrestaShop网络商店建立了连接。 PrestaShop的其余API。因此，在创建了客户部分，产品部分和购物车系统之后，我希望能够更新应用程序中每种产品的“库存量”。许多人会告诉我:这很容易，只需使用数据库中的ng-repeat响应数据创建一个表单，就可以通过按钮ng-click事件来更新库存。

好吧，我已经做到了，但是现在是棘手的部分，并且为了解释一下，我将提供一些不太重要的示例，以使其更清楚我的要求:

Prestashop数据库
prestashop数据库是一个存在250多个表的数据库。这些表中有通过ID和属性ID的各种连接。一些简单的例子是:

  • customer表具有一个id_address行，该行连接到address表。在此表中，所有“客户address info is placed. So far, let's say updating a customer I've created a combination of update the客户table with the customer_id but also update the地址table where the address_id is equal to the id_address from the selected客户within the customer`表。
  • 产品还具有一些链接表。考虑一下价格，税金，尺寸和颜色。 id_product_attribute是可以对应于颜色或大小的attribute_id。

    • 如上所述，prestashop数据库结构非常详细，仅限于使用各种过滤器来显示所需数据。

    使用网络服务
    因此，对于使用Web服务，我使用了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>


    在这种情况下，由于没有数据库连接，响应将为空。要在此处创建完整的测试示例，可以使用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表中提供了以下数据。

    The stock_availables table

    因此，在使用$http.get()和response函数时，我能够创建一个用于更新库存的表单。但是现在看看id_product_attribute。此row对应于product_attribute。在这种情况下，为大小或颜色。现在，我想过滤这些结果。在这种情况下，通过使用例如ng-if="id_product_attribute == 0"，我能够以仅显示所有带有此id_attribute的方式进行过滤。但我想展示所有这些。所以也有id =“1”，id =“2”等。但是，我想知道的是，有没有一种方法可以以足够的方式做到这一点，而无需为每个id都添加ng-if？由于大约有50种不同的id_attribute，每种对应于一种颜色或大小。因此，有一个函数可以获取每个不同的id并以比使用许多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>


    我试图创建以下 View :
  • 产品ID 1:然后是所有尺寸，颜色等
  • 产品ID 2:然后是所有大小，颜色等。

    • Simple design

    是的，可以编写50个不同的ng-if语句，但是我在问是否有更好，更容易和更充分的方法来做到这一点？

    可以找到一个简单的伪代码here

    一如既往，

    提前致谢!

    最佳答案

    您是否考虑过使用数据库并让数据库为该屏幕生成特定查询，该查询将所有产品分组在一个行中？

    因此，您当前拥有一堆“重复的”产品ID(因为查询返回了有关颜色和尺寸的详细信息)，但是需要对单个记录进行操作。

    您可以使用GROUP BY SQL查询语句在后端执行此操作。

    如果更多程序正在使用该端点，只需将端点设置为“仅用于此屏幕”并应用必要的更改。

    如果在后端更改SQL太复杂(或在政治上不可行)，则可以始终使用javascript来group_:

    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的方法，如下所示:

    What is the most efficient method to groupby on a javascript array of objects?

    高温超导

    关于javascript - 从JSON响应中过滤ng-repeat，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47411695/

    上一篇：php - 为什么 ismap 属性不尊重查询字符串？

    下一篇：php - 我如何更改 Carbon 认为周末的日子？

    相关文章：

    javascript - 在 Node 运行时执行服务器端代码

    javascript - 使用 Jquery 验证输入

    javascript - 在图像上播放视频鼠标悬停会导致颤抖故障

    javascript - AngularJS Controller 在服务之前执行 console.log()

    javascript - Rails 模板和 AngularJS 数据绑定(bind)相结合

    javascript - 当我尝试访问参数时变得不确定

    javascript - 自动加载随机页面

    php - 如何允许用户在 html 页面上更新数据数据库 SQL

    php - Codeigniter 远程数据库连接问题

    php - Laravel 5.4 更改 markdown 邮件的主题

    ©2024 IT工具网  联系我们