使用随机键 AngularJS 显示 JSON答案

【问题标题】：Display JSON with random Key AngularJS使用随机键 AngularJS 显示 JSON
【发布时间】：2017-10-08 14:50:45
【问题描述】：

我有一个 JSON JS 对象。我需要用 ng-repeat 显示这些数据。问题是数组的基本键正在改变。我要解决这个问题。此 JSON 将嵌套 ng-repeat

var JSON = {
        "DK-App": [{
            "_id": 1056,
            "thread_id": 328,
            "address": "DK-App",
            "date": 1507470152962,
            "date_sent": 1507470093000,
            "protocol": 0,
            "read": 0,
            "status": -1,
            "type": 1,
            "reply_path_present": 0,
            "locked": 0,
            "sub_id": 2,
            "phone_id": 1,
            "error_code": 0,
            "creator": "com.android.mms",
            "seen": 0,
            "priority": -1,
            "oppo_drafts": 1,
            "sim_id": -1,
            "oppo_mass": 0,
            "oppo_timer": 0,
            "oppo_groupaddress": "DK-App",
            "oppo_collected": 0,
            "oppo_sub_date": 1507470093000,
            "oppo_service_message_sms_type": 0,
            "deleted": 0,
            "sync_state": 0,
            "oppo_sms_type": 0,
            "$$hashKey": "object:4"
        }, {
            "_id": 1028,
            "thread_id": 328,
            "address": "DK-App",
            "date": 1507360655265,
            "date_sent": 1507360594000,
            "protocol": 0,
            "read": 0,
            "status": -1,
            "type": 1,
            "reply_path_present": 0,
            "locked": 0,
            "sub_id": 2,
            "phone_id": 1,
            "error_code": 0,
            "creator": "com.android.mms",
            "seen": 1,
            "priority": -1,
            "oppo_drafts": 1,
            "sim_id": -1,
            "oppo_mass": 0,
            "oppo_timer": 0,
            "oppo_groupaddress": "DK-App",
            "oppo_collected": 0,
            "oppo_sub_date": 1507360594000,
            "oppo_service_message_sms_type": 0,
            "deleted": 0,
            "sync_state": 0,
            "oppo_sms_type": 0,
            "$$hashKey": "object:27"
        }, {
            "_id": 985,
            "thread_id": 328,
            "address": "DK-App",
            "date": 1507198047122,
            "date_sent": 1507197980000,
            "protocol": 0,
            "read": 0,
            "status": -1,
            "type": 1,
            "reply_path_present": 0,
            "locked": 0,
            "sub_id": 2,
            "phone_id": 1,
            "error_code": 0,
            "creator": "com.android.mms",
            "seen": 1,
            "priority": -1,
            "oppo_drafts": 1,
            "sim_id": -1,
            "oppo_mass": 0,
            "oppo_timer": 0,
            "oppo_groupaddress": "DK-App",
            "oppo_collected": 0,
            "oppo_sub_date": 1507197980000,
            "oppo_service_message_sms_type": 0,
            "deleted": 0,
            "sync_state": 0,
            "oppo_sms_type": 0,
            "$$hashKey": "object:45"
        }, {
            "_id": 977,
            "thread_id": 328,
            "address": "DK-App",
            "date": 1507179236636,
            "date_sent": 0,
            "read": 0,
            "status": -1,
            "type": 1,
            "locked": 0,
            "sub_id": 2,
            "phone_id": 1,
            "error_code": 0,
            "creator": "com.android.mms",
            "seen": 1,
            "priority": -1,
            "oppo_drafts": 1,
            "sim_id": -1,
            "oppo_mass": 0,
            "oppo_timer": 0,
            "oppo_collected": 0,
            "oppo_service_message_sms_type": 0,
            "deleted": 0,
            "sync_state": 0,
            "oppo_sms_type": 0,
            "$$hashKey": "object:48"
        }],
        "BZ-FPANDA": [{
            "_id": 1055,
            "thread_id": 96,
            "address": "BZ-FPANDA",
            "date": 1507469661223,
            "date_sent": 1507469657000,
            "protocol": 0,
            "read": 0,
            "status": -1,
            "type": 1,
            "reply_path_present": 0,
            "locked": 0,
            "sub_id": 1,
            "phone_id": 0,
            "error_code": 0,
            "creator": "com.android.mms",
            "seen": 0,
            "priority": -1,
            "oppo_drafts": 1,
            "sim_id": -1,
            "oppo_mass": 0,
            "oppo_timer": 0,
            "oppo_groupaddress": "BZ-FPANDA",
            "oppo_collected": 0,
            "oppo_sub_date": 1507469657000,
            "oppo_service_message_sms_type": 0,
            "deleted": 0,
            "sync_state": 0,
            "oppo_sms_type": 0,
            "$$hashKey": "object:5"
        }, {
            "_id": 930,
            "thread_id": 96,
            "address": "BZ-FPANDA",
            "date": 1506925028930,
            "date_sent": 1506925025000,
            "protocol": 0,
            "read": 0,
            "status": -1,
            "type": 1,
            "reply_path_present": 0,
            "locked": 0,
            "sub_id": 1,
            "phone_id": 0,
            "error_code": 0,
            "creator": "com.android.mms",
            "seen": 1,
            "priority": -1,
            "oppo_drafts": 1,
            "sim_id": -1,
            "oppo_mass": 0,
            "oppo_timer": 0,
            "oppo_groupaddress": "BZ-FPANDA",
            "oppo_collected": 0,
            "oppo_sub_date": 1506925025000,
            "oppo_service_message_sms_type": 0,
            "deleted": 0,
            "sync_state": 0,
            "oppo_sms_type": 0,
            "$$hashKey": "object:56"
        }]
    }

此 JSON 需要为每个数组创建列表。但是数组的每个键都是不同的。 ng-repeat 不适用于

ng-repeat="j in JSON"

在此之前，我尝试通过仅基于 Key 推送 common n 来规范化此 Array 列表

var result = {};
                    data.forEach(function(item) {
                      if (!result[item.address]) 
                        result[item.address] = [item];
                      else
                        result[item.address].push(item);
                    });

现在我得到一个带有“KEYS”的 JSON，其中包含一个数组。像这样的原始 JSON 循环

我尝试根据键 address 推送公共对象。我需要在 JSON 变量中访问“DK-App”和“BZ-FPANDA”，并且需要在“DK-APP”和“BZ-FPANDA”中迭代数组。请注意，这些“DK-APP”和“BZ-FPANDA”都以编程方式来自后端，并且有很多这样的列表。问题陈述是我如何使用 JS 获取数组以便我可以迭代它

【问题讨论】：

我需要访问 JSON 变量中的“DK-App”和“BZ-FPANDA”，并且需要在“DK-APP”和“BZ-FPANDA”中迭代数组。请注意，这些“DK-APP”和“BZ-FPANDA”都以编程方式来自后端，并且有很多这样的列表。问题陈述是我如何使用 JS 获取数组以便我可以迭代它

标签： javascript angularjs arrays json angularjs-ng-repeat

【解决方案1】：

使用标准化数据

<div ng-repeat="item in $ctrl.data">
  Creator of {{ item._id }} is {{ item.creator }}
</div>

没有未标准化的数据

<div ng-repeat="data in $ctrl.JSON">
   <div  ng-repeat="item in data">
      Creator of {{ item._id }} is {{ item.creator }}
  </div>
</div>

如果您的问题仍然存在，请创建一个 plunker 示例。

【讨论】：

【解决方案2】：

由于您的数据嵌套了一层，您可以在模板中编写一个嵌套循环来提取对象内的每个项目。

var JSONdata = {
  "DK-App": [{
    "_id": 1056,
    "thread_id": 328,
    "address": "DK-App",
    "date": 1507470152962,
    "date_sent": 1507470093000,
    "protocol": 0,
    "read": 0,
    "status": -1,
    "type": 1,
    "reply_path_present": 0,
    "locked": 0,
    "sub_id": 2,
    "phone_id": 1,
    "error_code": 0,
    "creator": "com.android.mms",
    "seen": 0,
    "priority": -1,
    "oppo_drafts": 1,
    "sim_id": -1,
    "oppo_mass": 0,
    "oppo_timer": 0,
    "oppo_groupaddress": "DK-App",
    "oppo_collected": 0,
    "oppo_sub_date": 1507470093000,
    "oppo_service_message_sms_type": 0,
    "deleted": 0,
    "sync_state": 0,
    "oppo_sms_type": 0,
    "$$hashKey": "object:4"
  }, {
    "_id": 1028,
    "thread_id": 328,
    "address": "DK-App",
    "date": 1507360655265,
    "date_sent": 1507360594000,
    "protocol": 0,
    "read": 0,
    "status": -1,
    "type": 1,
    "reply_path_present": 0,
    "locked": 0,
    "sub_id": 2,
    "phone_id": 1,
    "error_code": 0,
    "creator": "com.android.mms",
    "seen": 1,
    "priority": -1,
    "oppo_drafts": 1,
    "sim_id": -1,
    "oppo_mass": 0,
    "oppo_timer": 0,
    "oppo_groupaddress": "DK-App",
    "oppo_collected": 0,
    "oppo_sub_date": 1507360594000,
    "oppo_service_message_sms_type": 0,
    "deleted": 0,
    "sync_state": 0,
    "oppo_sms_type": 0,
    "$$hashKey": "object:27"
  }, {
    "_id": 985,
    "thread_id": 328,
    "address": "DK-App",
    "date": 1507198047122,
    "date_sent": 1507197980000,
    "protocol": 0,
    "read": 0,
    "status": -1,
    "type": 1,
    "reply_path_present": 0,
    "locked": 0,
    "sub_id": 2,
    "phone_id": 1,
    "error_code": 0,
    "creator": "com.android.mms",
    "seen": 1,
    "priority": -1,
    "oppo_drafts": 1,
    "sim_id": -1,
    "oppo_mass": 0,
    "oppo_timer": 0,
    "oppo_groupaddress": "DK-App",
    "oppo_collected": 0,
    "oppo_sub_date": 1507197980000,
    "oppo_service_message_sms_type": 0,
    "deleted": 0,
    "sync_state": 0,
    "oppo_sms_type": 0,
    "$$hashKey": "object:45"
  }, {
    "_id": 977,
    "thread_id": 328,
    "address": "DK-App",
    "date": 1507179236636,
    "date_sent": 0,
    "read": 0,
    "status": -1,
    "type": 1,
    "locked": 0,
    "sub_id": 2,
    "phone_id": 1,
    "error_code": 0,
    "creator": "com.android.mms",
    "seen": 1,
    "priority": -1,
    "oppo_drafts": 1,
    "sim_id": -1,
    "oppo_mass": 0,
    "oppo_timer": 0,
    "oppo_collected": 0,
    "oppo_service_message_sms_type": 0,
    "deleted": 0,
    "sync_state": 0,
    "oppo_sms_type": 0,
    "$$hashKey": "object:48"
  }],
  "BZ-FPANDA": [{
    "_id": 1055,
    "thread_id": 96,
    "address": "BZ-FPANDA",
    "date": 1507469661223,
    "date_sent": 1507469657000,
    "protocol": 0,
    "read": 0,
    "status": -1,
    "type": 1,
    "reply_path_present": 0,
    "locked": 0,
    "sub_id": 1,
    "phone_id": 0,
    "error_code": 0,
    "creator": "com.android.mms",
    "seen": 0,
    "priority": -1,
    "oppo_drafts": 1,
    "sim_id": -1,
    "oppo_mass": 0,
    "oppo_timer": 0,
    "oppo_groupaddress": "BZ-FPANDA",
    "oppo_collected": 0,
    "oppo_sub_date": 1507469657000,
    "oppo_service_message_sms_type": 0,
    "deleted": 0,
    "sync_state": 0,
    "oppo_sms_type": 0,
    "$$hashKey": "object:5"
  }, {
    "_id": 930,
    "thread_id": 96,
    "address": "BZ-FPANDA",
    "date": 1506925028930,
    "date_sent": 1506925025000,
    "protocol": 0,
    "read": 0,
    "status": -1,
    "type": 1,
    "reply_path_present": 0,
    "locked": 0,
    "sub_id": 1,
    "phone_id": 0,
    "error_code": 0,
    "creator": "com.android.mms",
    "seen": 1,
    "priority": -1,
    "oppo_drafts": 1,
    "sim_id": -1,
    "oppo_mass": 0,
    "oppo_timer": 0,
    "oppo_groupaddress": "BZ-FPANDA",
    "oppo_collected": 0,
    "oppo_sub_date": 1506925025000,
    "oppo_service_message_sms_type": 0,
    "deleted": 0,
    "sync_state": 0,
    "oppo_sms_type": 0,
    "$$hashKey": "object:56"
  }]
}

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

module.controller("MainCtrl", function($scope) {
  $scope.messages = JSONdata;
});

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="MainCtrl">

    <div ng-repeat="(address, messageList) in messages">
      <h3>{{address}}</h3>
      <ul>
        <li ng-repeat="message in messageList">
          <pre>{{message | json}}</pre>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

【讨论】：

【解决方案3】：

根据您的期望，您可以展平数据或使用嵌套ng-repeat，其中外部重复迭代主要对象，内部重复迭代内部数组

使用嵌套重复：

<div ng-repeat="(k, arr) in JSON">
   Key is: {{k}}
   <div  ng-repeat="item in arr">
      Item address is : {{item.address}} 
  </div>
</div>

【讨论】：

我必须通过基于键（地址）创建数组来规范化 JSOn。这将基于键地址创建一个新的 JSON，并将包含 am 数组，其中所有值与匹配的地址键字段
提供您的预期结果