在JavaScript中循环访问对象内的对象数组

时间：2016-05-18 11:30:43

标签： javascript arrays angularjs

我希望你们能帮助我。

首先，我知道有很多关于这个主题的说法和写作，我已经在过去几个小时内一直在阅读和尝试各种解决方案，但是我有些遗漏。

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

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

我已经读过应该使用 for ... in 循环来获取数组，但是对于对象来说只需要一个简单的 for 循环，但是究竟如何循环遍历数组对象中的对象，使我望而却步。

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

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

要做到这一点，我试图遍历我检索到的数据（在我的数据调用之后），以构建这样的列表来显示。

我想要显示的报告名称必须具有ReportTemplateTypeId == 1

我的检索数据如下所示：SelectableReportTemplateNames：[{{}}，{{}}，{{}}，{{}}]，其中包含数组内对象内的对象。

以下是数据的实际示例，我想在列表中添加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"
    }
],

我提前非常感谢你！

8 个答案:

答案 0 :(得分：2)

如果它只是打印必要的值，你可以直接将逻辑放在视图上。

Updated JSFiddle

查看绑定

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

演示

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

答案 1 :(得分：1)

您可以使用Array#forEach

进行迭代 

var object = { "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" }] };

object.SelectableReportTemplateNames.forEach(function (a) {
    if (a.ReportTemplateType.ReportTemplateTypeId === 1) {
        document.write(a.ReportTemplateName + '<br>');
    }
});

答案 2 :(得分：1)

第1步：获取数组

var dataArray = data["SelectableReportTemplateNames"];，

假设您的根对象被称为data。

第2步：循环遍历数组

for (var i = 0; i < dataArray.length; i++) { 
    //do stuff here
}

第3步：在谓词成立时打印数据

for (var i = 0; i < dataArray.length; i++) { 
    if(dataArray[i]["ReportTemplateType"]["ReportTemplateTypeId"] == 1) {
        console.log(dataArray[i]["ReportTemplateName"]);
    }
}

只是让你知道，对于索引（例如data["key"]）和访问（例如data.key）

，对象和数组的行为就像彼此一样

答案 3 :(得分：0)

如果你的结构是这样的，并且不会长时间改变，你可以对你的循环进行硬编码：

var outerArray = whateverNameYourVariableHas["SelectableReportTemplateNames"];
for (var objIndex = 0; objIndex < outerArray.length; objIndex++) {
    var currentObject = outerArray[objIndex];
    // handle your objects here

   var templateType - currentObject["ReportTemplateType"];

   for (var templateTypeProperty in templateType) {
       // handle template type properties here.
       // in this loop, templateTyeProperty is a string with the name of the current property.
   }
}

答案 4 :(得分：0)

//试试这个;

$。每个（数据，SelectableReportTemplateNames，功能（A，B）{

的console.log（b.ReportTemplateId）; 的console.log（b.ReportTemplateName）;

}）;

答案 5 :(得分：0)

查看Mozilla Developer Network - Arrays和Mozilla Developer Network - Objects。

可以在那里找到过滤，排序和一般数据操作所需的一切。

<强>实施例

假设数据已加载到名为data的句柄中，则以下代码段将为您提供符合条件的元素数组：

data.SelectableReportTemplateNames.filter(function (el) {
    return (el.ReportTemplateId === 1);
});
/*OUTPUTS
[{
        "ReportTemplateId" : 1,
        "ReportTemplateName" : "Proof of Receipt",
        "ReportTemplatePath" : "...rdlc",
        "ReportTemplateType" : {
            "ReportTemplateTypeId" : 2,
            "ReportTemplateTypeDescription" : "Inventory - Proof of Receipt",
            "Id" : null
        },
        "Id" : "5653781274d4f23d4cbb54b8"
    }
]
*/

从这里你可以调用forEach来遍历元素并输出结果：

data.SelectableReportTemplateNames.filter(function (el) {
    return (el.ReportTemplateId === 1);
}).forEach(function (el) {
    console.log(el.ReportTemplateName);
    alert(el.ReportTemplateName);
});
/* ALERTS AND CONSOLE LOGS: "Proof of Receipt" */

编辑1

我在某种程度上误解了这个问题，所以下面是一个固定的表达式，按ReporttemplateTypeId而不是ReportTemplateId进行过滤：

data.SelectableReportTemplateNames.filter(function (el) {
    return (el.ReportTemplateType.ReportTemplateTypeId === 1);
}).forEach(function (el) {
    console.log(el.ReportTemplateName);
    alert(el.ReportTemplateName);
});
/* OUTPUTS
All Calls Report
High Priority Calls Report
Call Asset Lines Report
Daily Status Report
/*

答案 6 :(得分：0)

var myArray = youArrayName["SelectableReportTemplateNames"];

$scope.filteredArray = myArray.filter(function(x){
  return x.ReportTemplateId === 1;
 })
//Filter will be an array containing all that have ReportTemplateId as 1

//Use in ng-repeat like
<p ng-repeat="x in filteredArray">{{x.ReportTemplateName}}</p>

答案 7 :(得分：0)

通过MongoDb 

db.YourCollection.find({ "SelectableReportTemplateNames.ReportTemplateType.ReportTemplateTypeId" : 1});

通过JS 

var resultTemplate = _.find(SelectableReportTemplateNames,function(eachTemplate){
  return eachTemplate.ReportTemplateType.ReportTemplateTypeId == 1;
})
相关问题
最新问题