AngularJS - 在NG重复总和中使用嵌套JSON对象

Question

我已经根据我在这里搜索的类似问题的答案调整了一些代码。有人可以指出我正确的方向如何修复此代码...

我试图将ng-repeat中过滤列的值相加。它适用于第一级嵌套JSON但不适用于第二级..

提供的JSON只是一个例子。真正的JSON来自一个我无法控制JSON本身结构的源。

我的代码在下面......帮助请!!!

       

angular.module("turfApp", [])
            .filter('sumOfValue', function () {
                return function (data, key) {
                    debugger;
                    if (angular.isUndefined(data) || angular.isUndefined(key))
                        return 0;
                    var sum = 0;

                    angular.forEach(data, function (v,k) {
                        sum = sum + parseInt(v[key]);
                    });
                    return sum;
                }
            }).controller("turfController", function ($scope) {
                $scope.items = [{
                    "id": { "t": 1 }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
                    "details": "test11",
                    "quantity": 2,
                    "price": 100
                }, {
                    "id": { "t": 2 }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
                    "details": "test12",
                    "quantity": 5,
                    "price": 120
                }, {
                    "id": { "t": 3 }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
                    "details": "test3",
                    "quantity": 6,
                    "price": 170
                }, {
                    "id": { "t": 4 }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
                    "details": "test3",
                    "quantity": 8,
                    "price": 70
                }, {
                    "id": { "t": 5 }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
                    "details": "test5",
                    "quantity": 2,
                    "price": 160
                }, {
                    "id": { "t": 6 }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
                    "details": "test6",
                    "quantity": 9,
                    "price": 100
                }]
            });

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>   

<div ng-app="turfApp" ng-controller="turfController">
        <input type="text" class="form-control" ng-model="searchFilter.id.t" placeholder="Search by ID" />
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Details</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in resultValue=(items | filter:searchFilter)">
                    <td><p>{{item.id.t}}</p></td>
                    <td><p>{{item.details}}</p></td>
                    <td><p>{{item.quantity}}</p></td>
                    <td><p>{{item.price}}</p></td>
                    <td><p>{{item.quantity * item.price}}</p></td>
                </tr>
            </tbody>
        </table>

        <div>
            <h4>Sum ID -- {{resultValue | sumOfValue:'id.t'}}</h4>
        </div>
        <div>
            <h4>Sum Quanitity -- {{resultValue | sumOfValue:'quantity'}}</h4>
        </div>
    </div>

Answer 1

错误与您传递'id.t'的方式有关：

  <h4>Sum ID -- {{resultValue | sumOfValue:'id.t'}}</h4>

这样过滤器sumOfValue会尝试始终获取未定义的parseInt(v['id.t'])值！导致您看到的NaN。

要解决此问题，您需要更新sumOfValue过滤器以读取嵌套json中的正确值，如以下示例所示：

＆＃13;

＆＃13;

angular.module("turfApp", [])
  .filter('sumOfValue', function() {
    return function(data, key, innerKey) {
      debugger;
      if (angular.isUndefined(data) || angular.isUndefined(key))
        return 0;
      var sum = 0;

      angular.forEach(data, function(v, k) {
        if (innerKey) {
           sum = sum + parseInt(v[key][innerKey]);
        } else {
           sum = sum + parseInt(v[key]);
        }
      });
      return sum;
    }
  }).controller("turfController", function($scope) {
    $scope.items = [{
      "id": {
        "t": 1
      }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
      "details": "test11",
      "quantity": 2,
      "price": 100
    }, {
      "id": {
        "t": 2
      }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
      "details": "test12",
      "quantity": 5,
      "price": 120
    }, {
      "id": {
        "t": 3
      }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
      "details": "test3",
      "quantity": 6,
      "price": 170
    }, {
      "id": {
        "t": 4
      }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
      "details": "test3",
      "quantity": 8,
      "price": 70
    }, {
      "id": {
        "t": 5
      }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
      "details": "test5",
      "quantity": 2,
      "price": 160
    }, {
      "id": {
        "t": 6
      }, //NESTED "T" VALUE WILL NOT COMPUTE IN TOTALS
      "details": "test6",
      "quantity": 9,
      "price": 100
    }]
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="turfApp" ng-controller="turfController">
  <input type="text" class="form-control" ng-model="searchFilter.id.t" placeholder="Search by ID" />
  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Details</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in resultValue=(items | filter:searchFilter)">
        <td>
          <p>{{item.id.t}}</p>
        </td>
        <td>
          <p>{{item.details}}</p>
        </td>
        <td>
          <p>{{item.quantity}}</p>
        </td>
        <td>
          <p>{{item.price}}</p>
        </td>
        <td>
          <p>{{item.quantity * item.price}}</p>
        </td>
      </tr>
    </tbody>
  </table>

  <div>
    <h4>Sum ID -- {{resultValue | sumOfValue:'id':'t'}}</h4>
  </div>
  <div>
    <h4>Sum Quanitity -- {{resultValue | sumOfValue:'quantity'}}</h4>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;