在角度控制器中操縱JSON

Question

我花了一天的時間試圖操縱一個JSON做顯示一張桌子，但我無法做到我想做的事。

我想在每個城鎮的表格中顯示統計數據。 我不得不重新集結線同一個鎮 我鎮有幾行，我想顯示一個小計行

所以假設輸出中的是：

• 線1 | PARIS |建築A .....
• line 2 | PARIS |建築D .....
• subTotal | PARIS |建築.....
• line 3 |倫敦|建築B .....
• line 4 |倫敦|建築F .....
• subTotal |倫敦|建築.....
• line 5 |東京|建築C .....
• line 6 |文華財經|建築E .....
• TOTAL | ALL | .....

的代碼在我的控制器：

$scope.rowCollection = [ 
     { 
      "id": "1", 
      "nom": "BUILDING A", 
      "town": "PARIS", 
      "date": "2015-11-09", 
      "stat1": 3, 
      "stat2": 115, 
      "stat3": 4, 
      "stat4": 111 
     }, 
     { 
      "id": "2", 
      "nom": "BUILDING B", 
      "town": "LONDON", 
      "date": "2013-11-09", 
      "stat1": 1, 
      "stat2": 51, 
      "stat3": 1, 
      "stat4": 50 
     }, 
     { 
      "id": "3", 
      "nom": "BUILDING C", 
      "town": "TOKYO", 
      "date": "2012-10-21", 
      "stat1": 0, 
      "stat2": 142, 
      "stat3": 0, 
      "stat4": 142 
     }, 
     { 
      "id": "4", 
      "nom": "BUILDING D", 
      "town": "PARIS", 
      "date": "2011-02-03", 
      "stat1": 0, 
      "stat2": 132, 
      "stat3": 0, 
      "stat4": 132 
     }, 
     { 
      "id": "5", 
      "nom": "BUILDING E", 
      "town": "CHICAGO", 
      "stat1": 0, 
      "stat2": 94, 
      "stat3": 0, 
      "stat4": 94 
     }, 
     { 
      "id": "6", 
      "nom": "BUILDING F", 
      "town": "LONDON", 
      "date": "0000-00-00", 
      "stat1": 0, 
      "stat2": 86, 
      "stat3": 0, 
      "stat4": 86 
     } 
    ]; 

    var myArray = []; 
    for (var i = 0; i < $scope.rowCollection.length; i++) { 
     if (Array.isArray(myArray[$scope.rowCollection[i].town])) { 
      myArray[$scope.rowCollection[i].town].push($scope.rowCollection[i]); 
     } else { 
      myArray[$scope.rowCollection[i].town] = $scope.rowCollection[i]; 
     } 
    } 


    $scope.myArray = myArray; 
    console.log($scope.myArray); 

我到底做錯了什麼？我看到了長度哦，我的陣列是「0」。我可以增加它，但我不工作太多。這是正常的

感謝您的幫助

下面是一個的jsfiddle： https://jsfiddle.net/ohu6dhqy/

Answer 1

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 
    $scope.rowCollection = [{ 
 
    "id": "1", 
 
    "nom": "BUILDING A", 
 
    "town": "PARIS", 
 
    "date": "2015-11-09", 
 
    "stat1": 3, 
 
    "stat2": 115, 
 
    "stat3": 4, 
 
    "stat4": 111 
 
    }, { 
 
    "id": "2", 
 
    "nom": "BUILDING B", 
 
    "town": "LONDON", 
 
    "date": "2013-11-09", 
 
    "stat1": 1, 
 
    "stat2": 51, 
 
    "stat3": 1, 
 
    "stat4": 50 
 
    }, { 
 
    "id": "3", 
 
    "nom": "BUILDING C", 
 
    "town": "TOKYO", 
 
    "date": "2012-10-21", 
 
    "stat1": 0, 
 
    "stat2": 142, 
 
    "stat3": 0, 
 
    "stat4": 142 
 
    }, { 
 
    "id": "4", 
 
    "nom": "BUILDING D", 
 
    "town": "PARIS", 
 
    "date": "2011-02-03", 
 
    "stat1": 0, 
 
    "stat2": 132, 
 
    "stat3": 0, 
 
    "stat4": 132 
 
    }, { 
 
    "id": "5", 
 
    "nom": "BUILDING E", 
 
    "town": "CHICAGO", 
 
    "stat1": 0, 
 
    "stat2": 94, 
 
    "stat3": 0, 
 
    "stat4": 94 
 
    }, { 
 
    "id": "6", 
 
    "nom": "BUILDING F", 
 
    "town": "LONDON", 
 
    "date": "0000-00-00", 
 
    "stat1": 0, 
 
    "stat2": 86, 
 
    "stat3": 0, 
 
    "stat4": 86 
 
    }]; 
 

 
    var grouped = {}; 
 
    var total = { 
 
    "totalStat1" : 0, 
 
    "totalStat2" : 0, 
 
    "totalStat3" : 0, 
 
    "totalStat4" : 0, 
 
    }; 
 

 
    $scope.rowCollection.forEach(function(item) { 
 
    grouped[item.town] = grouped[item.town] || {}; 
 
    grouped[item.town].array = grouped[item.town].array || []; 
 
    grouped[item.town].total = grouped[item.town].total || { 
 
     "totalStat1": 0, 
 
     "totalStat2": 0, 
 
     "totalStat3": 0, 
 
     "totalStat4": 0, 
 
    }; 
 
    grouped[item.town].array.push(item); 
 
    grouped[item.town].total.totalStat1 += item.stat1; 
 
    grouped[item.town].total.totalStat2 += item.stat2; 
 
    grouped[item.town].total.totalStat3 += item.stat3; 
 
    grouped[item.town].total.totalStat4 += item.stat4; 
 
    
 
    total.totalStat1 += item.stat1; 
 
    total.totalStat2 += item.stat2; 
 
    total.totalStat3 += item.stat3; 
 
    total.totalStat4 += item.stat4; 
 
    }); 
 
    $scope.grouped = grouped; 
 
    $scope.total = total; 
 
    
 
}

table { 
 
    margin: 1rem; 
 
    border-collapse: collapse; 
 
    width: 55%; 
 
} 
 
table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
} 
 

 
.total{ 
 
font-weight:800; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>ID</th> 
 
     <th>Name</th> 
 
     <th>Town</th> 
 
     <th>Date</th> 
 
     <th>Stat1</th> 
 
     <th>Stat2</th> 
 
     <th>Stat3</th> 
 
     <th>Stat4</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody ng-repeat="(key, value) in grouped"> 
 
     <tr ng-repeat="val in value.array"> 
 
     <td>{{val.id}}</td> 
 
     <td>{{val.town}}</td> 
 
     <td>{{val.nom}}</td> 
 
     <td>{{val.date}}</td> 
 
     <td>{{val.stat1}}</td> 
 
     <td>{{val.stat2}}</td> 
 
     <td>{{val.stat3}}</td> 
 
     <td>{{val.stat4}}</td> 
 
     </tr> 
 
     <tr class="total"> 
 
     <td>TOTAL</td> 
 
     <td>-</td> 
 
     <td>-</td> 
 
     <td>-</td> 
 
     <td>{{value.total.totalStat1}}</td> 
 
     <td>{{value.total.totalStat2}}</td> 
 
     <td>{{value.total.totalStat3}}</td> 
 
     <td>{{value.total.totalStat4}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    
 
    <div> 
 
    Total stat 1 : {{total.totalStat1}} - 
 
    Total stat 2 : {{total.totalStat2}} - 
 
    Total stat 3 : {{total.totalStat3}} - 
 
    Total stat 4 : {{total.totalStat4}} - 
 
    </div> 
 
</div>

Answer 2

如果你只需要顯示所有的數據，你不需要你的那部分代碼：

var myArray = []; 
for (var i = 0; i < $scope.rowCollection.length; i++) { 
    if (Array.isArray(myArray[$scope.rowCollection[i].town])) { 
     myArray[$scope.rowCollection[i].town].push($scope.rowCollection[i]); 
    } else { 
     myArray[$scope.rowCollection[i].town] = $scope.rowCollection[i]; 
    } 
} 


$scope.myArray = myArray; 

爲了很好地顯示您的數據，我建議使用類似這樣的表格：

<div ng-controller="MyCtrl"> 
    <table class="table"> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Town</th> 
     <th>Stat1</th> 
     <th>Stat2</th> 
     <th>Stat3</th> 
     <th>Stat4</th> 
    </tr> 

    <tr ng-repeat="row in rowCollection"> 
     <td>{{ row.id }}</td> 
     <td>{{ row.nom }}</td> 
     <td>{{ row.town }}</td> 
     <td>{{ row.date }}</td> 
     <td>{{ row.stat1 }}</td> 
     <td>{{ row.stat2 }}</td> 
     <td>{{ row.stat3 }}</td> 
     <td>{{ row.stat4 }}</td> 
    </tr> 
    </table> 
</div> 

• 這裏的結果：（我加引導CSS有一個很好的表）

• 下面是更新後的jsfiddle：https://jsfiddle.net/maxime1992/0Lqf2dyr/1/