Question

我花了一天时间试图操纵JSON确实显示了一张桌子，但我无法达到我想要的效果。

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

所以假设输出是：

第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”。我可以增加它，但我也不行。这是正常的

感谢您的帮助

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

Answer 1

build.gradle

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

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>

结果如下：（我添加了Bootstrap CSS以获得一个漂亮的表格）
这是更新后的JSFiddle：https://jsfiddle.net/maxime1992/0Lqf2dyr/1/

在角度控制器中操纵JSON

2 个答案: