如何在angularjs中循环遍历对象数组

Posted 2021-04-09

我有一个像这样的对象：

{
"batman":[{"applicantSkillID":"htl2","rating":3,"applicantInterviewerID":"usr1","applicantInterviewerName":"batman","applicantSkillName":"html"},
{"applicantSkillID":"cs43","rating":5,"applicantInterviewerID":"usr1","applicantInterviewerName":"batman","applicantSkillName":"css"}],

"Superman":[{"applicantSkillID":"ht12","rating":3,"applicantInterviewerID":"usr2","applicantInterviewerName":"Superman","applicantSkillName":"HTML"},
{"applicantSkillID":"cs43","rating":3,"applicantInterviewerID":"usr2","applicantInterviewerName":"Superman","applicantSkillName":"css"}]
}

现在我试图显示数据applicantInterviewerName明智（蝙蝠侠的评级，超人的评级等..）

只有一个applicantInterviewerName我能够通过采取像这样的第一个对象索引来做到这一点：

<tbody class="table text-left boxShade displayTable">
    <tr ng-repeat="feedBack in c.data.interviewerFeedback">
        <td class="skillName" id="{{feedBack.applicantSkillID}}"> {{feedBack.applicantSkillName}}</td>
        <td>
            <div class="inputRangeDiv">
                <input class="inputRangeInputSlilder"
                   ng-init="skillScoreForm.skill[feedBack.applicantSkillID] = feedBack.rating"
                   ng-model="skillScoreForm.skill[feedBack.applicantSkillID]"
                   value="0"  
                   oninput="skillOutput.value = skillInput.value"
                   id='skillInput' type="range"
                   min="0" max="5"  ng-disabled="true" />

            </div>
        </td>
        <td>
            <div class="inlineFlex">
                <output id="skillOutput" class="output">{{feedBack.rating}}</output>
                <p class="applicantCutoffOutputSufixModalTable">/5</p>
            </div>
        </td>
    </tr>
</tbody>

我怎么能这样做我认为我确定我需要使用两个ng-repeats一个用于applicantInterviewerName而一个用于skills但是没有想到如何实现它。

答案

试试这个 ：

var obj = {
	"batman": [{
			"applicantSkillID": "htl2",
			"rating": 3,
			"applicantInterviewerID": "usr1",
			"applicantInterviewerName": "batman",
			"applicantSkillName": "HTML"
		},
		{
			"applicantSkillID": "cs43",
			"rating": 5,
			"applicantInterviewerID": "usr1",
			"applicantInterviewerName": "batman",
			"applicantSkillName": "css"
		}
	],

	"Superman": [{
			"applicantSkillID": "ht12",
			"rating": 3,
			"applicantInterviewerID": "usr2",
			"applicantInterviewerName": "Superman",
			"applicantSkillName": "HTML"
		},
		{
			"applicantSkillID": "cs43",
			"rating": 3,
			"applicantInterviewerID": "usr2",
			"applicantInterviewerName": "Superman",
			"applicantSkillName": "css"
		}
	]
};

function MyCtrl($scope) {
    $scope.items = obj;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    <div ng-repeat="(key,value) in items">
      <div ng-repeat="data in items[key]">
        <span>Name : </span>{{data.applicantInterviewerName}} , <span>Rating : </span>{{data.rating}}
      </div>
    </div>
</div>

以上是关于如何在angularjs中循环遍历对象数组的主要内容，如果未能解决你的问题，请参考以下文章

js的Dom对象集合循环遍历过程中数组长度发生变化,小白不懂,求大神指教

微信小程序多层嵌套循环，二级数组遍历

通过数组的AngularJS 1.6返回对象数据

如何在角度 2 中使用 ngFor 仅循环遍历数组到某些对象

json #AngularJS，＃JavaScript：使用ng-repeat循环遍历嵌套数组

如何遍历一个JS对象中的所有属性