在角度控制器中操作JSON [英] manipulate JSON in angular controller

问题描述

我花了一天的时间尝试操作JSON来显示表格，但我无法做到自己想要的事.

I spent a day trying to manipulate a JSON do display a table but i can't reach to do what i want.

我想在每个镇的表格中显示统计信息.我必须重新组合同一城镇的线路我的城镇有几行，我想显示一个小计行

i want to display stats in a table for each town. i have to regroup lines for the same town I a town has several lines, i want to display a subTotal line

所以假设输出是:

• 第1行|巴黎|建立一个.....
• 第2行|巴黎|建筑物D .....
• 小计|巴黎|建筑.....
• 第3行|伦敦|建筑B .....
• 第4行|伦敦|建筑物F .....
• 小计|伦敦|建筑.....
• 第5行|东京|建筑物C .....
• 第6行|芝加哥|建筑物E .....
• 总计|全部|.....

我的控制器中的代码:

$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".我可以增加它，但我也行不通.这正常吗?

What am i doing wrong ? i saw the lenght oh my Array was "0". I can increment it but i doesn't works too. Is this normal

感谢您的帮助

这是一个jsfiddle: https://jsfiddle.net/ohu6dhqy/

Here is a jsfiddle : https://jsfiddle.net/ohu6dhqy/

推荐答案

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>

这篇关于在角度控制器中操作JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！