如何使用子数组对json表进行排序答案

【问题标题】：How to sort json table with sub array如何使用子数组对json表进行排序
【发布时间】：2017-02-05 21:07:45
【问题描述】：

我有以下 JSON（见下文）。我将数据放在一个 html 表中并且工作正常。我可以对名称字段进行排序，但是如何在 angularjs 的点表中对字段 punten 进行排序？

我尝试了orderBy values.points.punten，但这不起作用。

    // create the list
$scope.values = [    
      {
          name: 'Johan',
          points: [
              {
                  punten: '4567',
                  pit: '1',
                  field: 'p0'
              },
              {
                  punten: '5422',
                  pit: '0',
                  field: 'p1'
              },              {
                  punten: '5422',
                  pit: '0',
                  field: 'p2'
              }
          ]
      },
      {
          name: 'Ton',
          points: [
              {
                  punten: '4444',
                  pit: '2',
                  field: 'p0'
              },
              {
                  punten: '5100',
                  pit: '1',
                  field: 'p1'
              },
              {
                  punten: '5423',
                  pit: '0',
                  field: 'p2'
              }
          ]
      },
      {
          name: 'Dian',
          points: [
              {
                  punten: '4765',
                  pit: '0',
                  field: 'p0'
              },
              {
                  punten: '4952',
                  pit: '0',
                  field: 'p1'
              },
              {
                  punten: '5424',
                  pit: '0',
                  field: 'p2'
              }
          ]
      },
      {
          name: 'Kees',
          points: [
              {
                  punten: '3765',
                  pit: '0',
                  field: 'p0'
              },
              {
                  punten: '3952',
                  pit: '0',
                  field: 'p1'
              },
              {
                  punten: '3424',
                  pit: '0',
                  field: 'p2'
              }
          ]
      }

  ];

【问题讨论】：

您要按字段排序吗？还是按字段过滤？
我想按 punten 形式从高到低排序，反之亦然

标签： html angularjs html-table

【解决方案1】：

这是orderBy的代码punten

由于您在 points 数组中有 punten，

<li ng-repeat="x in values | orderBy:'points[0].punten'">{{x}}</li>

var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
   $scope.values = [    
      {
          name: "Johan",
          points: [
              {
                  punten: "4567",
                  pit: "1",
                  field: "p0"
              },
              {
                  punten: "5422",
                  pit: "0",
                  field: "p1"
              },              {
                  punten: "5422",
                  pit: "0",
                  field: "p2"
              }
          ]
      },
      {
          name: "Ton",
          points: [
              {
                  punten: "4444",
                  pit: "2",
                  field: "p0"
              },
              {
                  punten: "5100",
                  pit: "1",
                  field: "p1"
              },
              {
                  punten: "5423",
                  pit: "0",
                  field: "p2"
              }
          ]
      },
      {
          name: "Dian",
          points: [
              {
                  punten: "4765",
                  pit: "0",
                  field: "p0"
              },
              {
                  punten: "4952",
                  pit: "0",
                  field: "p1"
              },
              {
                  punten: "5424",
                  pit: "0",
                  field: "p2"
              }
          ]
      },
      {
          name: "Kees",
          points: [
              {
                  punten: "3765",
                  pit: "0",
                  field: "p0"
              },
              {
                  punten: "3952",
                  pit: "0",
                  field: "p1"
              },
              {
                  punten: "3424",
                  pit: "0",
                  field: "p2"
              }
          ]
      }

  ];
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="orderCtrl">

<ul>
<li ng-repeat="x in values | orderBy:'points[0].punten'">{{x}}</li><br>
</ul><br>

</div>



<p>The array items are displayed alphabetically.</p>

</body>
</html>

请运行上面的片段

HERE IS A WORKING DEMO

【讨论】：