AngularJS - NG繰り返し合計の合計で入れ子になったJSONオブジェクトを使用する

Question

ここで検索した同様の質問に対する回答からいくつかのコードを適用しました。誰かがこのコードを修正する方法について正しい方向で私を指してくれますか？

ng-repeatでフィルタリングされた列の値を合計しようとしています。入れ子にされたJSONの最初のレベルではうまくいきますが、2番目のレベルでは機能しません。

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になります。

は、この問題を解決するには、次の例に示すように、ネストされたJSONに適切な値を読み取るために、あなたのsumOfValueフィルタを更新する必要があります。

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 
 
    }] 
 
    });

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