AngularJS 排序 JSON 数组和内部数组答案

【问题标题】：AngularJS Order JSON array and inner arraysAngularJS 排序 JSON 数组和内部数组
【发布时间】：2014-02-07 07:15:43
【问题描述】：

嗨，在我的服务器控制器中，我得到一个 JSON 字符串

$scope.unsorted=data;

数据看起来像

[
  {
    "configId": 116,
    "configName": "LAND_LINE",
    "configFieldses": [
      {
        "FieldId": 784,
        "FieldName": "engine.form.1",
        "values": [
          {
            "keyname": "formName",
            "value": "Account Number",
            "id": 3068
          },
          {
            "keyname": "formValuePosition",
            "value": "right",
            "id": 3069
          }
        ]
      },
      {
        "FieldId": 783,
        "FieldName": "engine.form.0",
        "values": [
          {
            "keyname": "formName",
            "value": "Amount",
            "id": 3074
          },
          {
            "keyname": "formValuePosition",
            "value": "right",
            "id": 3075
          },
          {
            "keyname": "regexGazatteer",
            "value": "Total Charges :",
            "id": 3076
          }
        ]
      },
      {
    "FieldId": 785,
        "FieldName": "engine.table2",
        "values": [
          {
            "keyname": "regexTableHeaderStart",
            "value": null,
            "id": 3079
          },
          {
            "keyname": "regexTableBodyEnd",
            "value": null,
            "id": 3080
          },
          {
            "keyname": "tableName",
            "value": "invoice",
            "id": 3078
          }
        ]
      }
    ]
  }
]

我想根据FieldId 对configFieldses 数组以及每个configFieldses 中基于id 的values 数组进行排序。所以 JSON 应该是这样的

[
  {
    "configId": 116,
    "configName": "LAND_LINE",
    "configFieldses": [
      {
        "FieldId": 783,
        "FieldName": "engine.form.0",
        "values": [
          {
            "keyname": "formName",
            "value": "Amount",
            "id": 3074
          },
          {
            "keyname": "formValuePosition",
            "value": "right",
            "id": 3075
          },
          {
            "keyname": "regexGazatteer",
            "value": "Total Charges :",
            "id": 3076
          }
        ]
      },
      {
        "FieldId": 784,
        "FieldName": "engine.form.1",
        "values": [
          {
            "keyname": "formName",
            "value": "Account Number",
            "id": 3068
          },
          {
            "keyname": "formValuePosition",
            "value": "right",
            "id": 3069
          }
        ]
      },

      {
    "FieldId": 785,
        "FieldName": "engine.table2",
        "values": [
          {
            "keyname": "tableName",
            "value": "invoice",
            "id": 3078
          }
          {
            "keyname": "regexTableHeaderStart",
            "value": null,
            "id": 3079
          },
          {
            "keyname": "regexTableBodyEnd",
            "value": null,
            "id": 3080
          }
        ]
      }
    ]
  }
]

我尝试的是先对父数组进行排序，然后对子数组进行排序。

var sortedfieldses = orderByFilter($scope.unsorted.configFieldses, '+FieldId');

然后如何从未排序的配置中删除旧数组并将新数组添加到未排序的。以及如何遍历每个然后对其进行排序？

最好的方法是什么？

【问题讨论】：

标签： arrays json angularjs

【解决方案1】：

第 1 步：复制对象，然后应用自定义排序功能。

var sortedfieldses = angular.copy( $scope.unsorted.configFieldses );

sortedfieldses.sort( function( a, b ){
    return a.FieldId > b.FieldId;
});

第 2 步：遍历“字段”并对其子项进行排序：

angular.forEach( sortedfieldses, function( field, key ){

    field.values.sort( function( a, b ){
        return a.id > b.id;
    });
});

实际上重新阅读您的问题，听起来好像您只想对“未排序”对象进行就地排序，而不是复制到“排序”变量。如果是这种情况，请跳过对象复制并执行以下操作：

$scope.unsorted.configFieldses.sort( function( a, b ){
    return a.FieldId > b.FieldId;
});

angular.forEach( $scope.unsorted.configFieldses, function( field, key ){

    field.values.sort( function( a, b ){
        return a.id > b.id;
    });
});

sort 方法改变原始数组，而不是简单地返回排序后的副本。

【讨论】：

【解决方案2】：

如果你只需要对数组进行排序，你可以这样做

    $scope.unsorted=data;

    // sort the parent
    $scope.unsorted[0].configFieldses.sort(function(config1, config2) {
        return config1.FieldId - config2.FieldId;
    });

    // sort the child values
    $scope.unsorted[0].configFieldses.forEach(function(configField){
        console.log(configField.values);

        configField.values.sort(function(value1, value2) {
            return value1.id - value2.id;
        });

    });

但是如果你想使用 ng-repeat 和 orderBy 过滤器来显示数据，你可以像这样使用嵌套的 ng-repeat。

    <div ng-controller="ControllerX">
        <div ng-repeat="configField in unsorted[0].configFieldses | orderBy:'FieldId' ">
            <h3>{{configField.FieldId}}, {{configField.FieldName}}</h3>
            <ul>
                <li ng-repeat="value in configField.values | orderBy:'id'">
                    {{value.id}}, {{value.keyname}}
                </li>
            </ul>
        </div>
    </div>

【讨论】：