javascript - 在 JavaScript 中循环遍历对象中的对象数组

Question

希望大家帮帮我。

首先，我知道关于这个主题已经说了很多，也写了很多，而且我在过去的几个小时里一直在阅读并尝试各种解决方案，但我缺少一些东西。

我也相信这可能是一个非常简单的任务，所以我为我的无知提前道歉。

如何在 JavaScript 中循环访问对象中的对象数组？

我读过一个应该对数组使用 for...in 循环，但对对象使用一个简单的 for 循环，但究竟如何循环遍历数组对象中的对象，让我望而却步。

这就是我想要实现的目标:

我想在我的 UI 中显示与特定 ReportTemplateTypeId 匹配的报告列表(报告名称)。

为此，我尝试循环检索我的数据(在我的数据调用之后)，以构建这样一个列表来显示。

我要显示的报表名称必须有一个 ReportTemplateTypeId == 1

我检索到的数据如下所示:SelectableReportTemplateNames: [{{}},{{}},{{}},{{}}] with an Object within an Object within an Array.

这是一个实际的数据示例，我想将 4 条记录添加到我的列表中:

"SelectableReportTemplateNames": [
    {
        "ReportTemplateId": 1,
        "ReportTemplateName": "Proof of Receipt",
        "ReportTemplatePath": "...rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 2,
            "ReportTemplateTypeDescription": "Inventory - Proof of Receipt",
            "Id": null
        },
        "Id": "5653781274d4f23d4cbb54b8"
    },
    {
        "ReportTemplateId": 2,
        "ReportTemplateName": "Proof of Transfer",
        "ReportTemplatePath": ".....rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 3,
            "ReportTemplateTypeDescription": "Inventory - Proof of Transfer",
            "Id": null
        },
        "Id": "5653781274d4f23d4cbb54b9"
    },
    {
        "ReportTemplateId": 11,
        "ReportTemplateName": "All Calls Report",
        "ReportTemplatePath": "....rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 1,
            "ReportTemplateTypeDescription": "All Calls Report",
            "Id": null
        },
        "Id": "5739a89577801d7f0c10254c"
    },
    {
        "ReportTemplateId": 12,
        "ReportTemplateName": "High Priority Calls Report",
        "ReportTemplatePath": "......rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 1,
            "ReportTemplateTypeDescription": "High Priority Calls Report",
            "Id": null
        },
        "Id": "5739a89e77801d7f0c10254d"
    },
    {
        "ReportTemplateId": 13,
        "ReportTemplateName": "Call Asset Lines Report",
        "ReportTemplatePath": "......rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 1,
            "ReportTemplateTypeDescription": "Call Asset Lines Report",
            "Id": null
        },
        "Id": "5739aa7d77801d7f0c10254e"
    },
    {
        "ReportTemplateId": 16,
        "ReportTemplateName": "Daily Status Report",
        "ReportTemplatePath": ".....rdlc",
        "ReportTemplateType": {
            "ReportTemplateTypeId": 1,
            "ReportTemplateTypeDescription": "Daily Status Report",
            "Id": null
        },
        "Id": "5739abb077801d7f0c102552"
    }
],

非常感谢您!

Answer 1

如果只是打印必要的值，可以直接把逻辑放在 View 上。

Updated JSFiddle

View 绑定(bind)

<select 
  ng-model="test"
  ng-options="item.ReportTemplateId as item.ReportTemplateName for item in data.SelectableReportTemplateNames | filter:isValid">
</select>

过滤函数

$scope.isValid = function(o) {
  return o.ReportTemplateType.ReportTemplateTypeId == 1;
}

演示

function myCtrl($scope) {
  $scope.data = {
    "SelectableReportTemplateNames": [{
      "ReportTemplateId": 1,
      "ReportTemplateName": "Proof of Receipt",
      "ReportTemplatePath": "...rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 2,
        "ReportTemplateTypeDescription": "Inventory - Proof of Receipt",
        "Id": null
      },
      "Id": "5653781274d4f23d4cbb54b8"
    }, {
      "ReportTemplateId": 2,
      "ReportTemplateName": "Proof of Transfer",
      "ReportTemplatePath": ".....rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 3,
        "ReportTemplateTypeDescription": "Inventory - Proof of Transfer",
        "Id": null
      },
      "Id": "5653781274d4f23d4cbb54b9"
    }, {
      "ReportTemplateId": 11,
      "ReportTemplateName": "All Calls Report",
      "ReportTemplatePath": "....rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "All Calls Report",
        "Id": null
      },
      "Id": "5739a89577801d7f0c10254c"
    }, {
      "ReportTemplateId": 12,
      "ReportTemplateName": "High Priority Calls Report",
      "ReportTemplatePath": "......rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "High Priority Calls Report",
        "Id": null
      },
      "Id": "5739a89e77801d7f0c10254d"
    }, {
      "ReportTemplateId": 13,
      "ReportTemplateName": "Call Asset Lines Report",
      "ReportTemplatePath": "......rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "Call Asset Lines Report",
        "Id": null
      },
      "Id": "5739aa7d77801d7f0c10254e"
    }, {
      "ReportTemplateId": 16,
      "ReportTemplateName": "Daily Status Report",
      "ReportTemplatePath": ".....rdlc",
      "ReportTemplateType": {
        "ReportTemplateTypeId": 1,
        "ReportTemplateTypeDescription": "Daily Status Report",
        "Id": null
      },
      "Id": "5739abb077801d7f0c102552"
    }]
  }
  
  $scope.isValid = function(o){
  	return o.ReportTemplateType.ReportTemplateTypeId == 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app>
  <div ng-controller="myCtrl">
    <select 
      ng-model="test"
      ng-options="item.ReportTemplateId as item.ReportTemplateName for item in data.SelectableReportTemplateNames | filter:isValid">
    </select>
  </div>
</div>

注意:此答案假定 ReportTemplateType 始终是对象而不是数组。