Javascript ng对象和子数组的重复处理数组

我将angularJS与使用socketio发送数据的节点后端一起使用。然后我尝试使用ng repeat显示数据

我的答复数据：-

[
 {
   day: 1,
   messages:[
     {msg: 'We have reached a certain level of authenticity'},
     {msg: 'You had a chat with Falon'},
     {msg: 'I have 2 stories to complete'}

   ]
 },
 {
   day: 2,
   messages:[
     {msg: 'We have to add more resources.'},
     {msg: 'You had a chat with Falon and Isha'},
     {msg: 'Story 2 is still incomplete'}

   ]
 },
 {
   day: 3,
   messages:[
     {msg: 'Thanks for having a Chat with Isha.'},
     {msg: 'Conflict Resolution done between Remo and Amit'},
     {msg: 'Story 2 completed. Moving to Story 3'}

   ]
 }
]

我的控制器代码：-

app.controller('report', function($scope, $timeout, $http) {
  console.log('Reports Page');

$http.get("/reports")
.then(function(response) {
    $scope.ourGrouper = 'today';
    var messages = response.data;
    $scope.contents = messages;
    console.log($scope.contents);
  });
});

我的HTML代码：-

<div id="accordion" class="accordion-style" ng-controller="report">
  <div class="card" ng-repeat="(key, value) in contents | orderBy: 'day' | unique: 'day'">
    <div class="card-header" id="heading{{$index}}">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">
          Day {{value.today}}
        </button>
      </h5>
    </div>
    <div id="collapse{{$index}}"  class="collapse" ng-class="!$last ? 'class-for-last' : 'show'"  aria-labelledby="heading{{$index}}" data-parent="#accordion">
      <div class="card-body" ng-repeat="(key, value) in contents | groupBy: 'id'">
        {{value}}
      </div>
    </div>
  </div>
</div>

---

当您提供响应数据时，当您使用ngRepeat第一次循环时，您的键从零开始，并且值将是您的第一个结果对象

 {
   day: 1,
   messages:[
     {msg: 'We have reached a certain level of authenticity'},
     {msg: 'You had a chat with Falon'},
     {msg: 'I have 2 stories to complete'}

   ]
 }

现在要访问day的值[Ex.day:1]，您需要编写

{{value.day}

。要打印消息，您需要使用

value.messages

再次循环，以便可以打印

value.messages

中的每条消息

<div id="accordion" class="accordion-style" ng-controller="report">
      <div class="card" ng-repeat="(key, value) in contents | orderBy: 'value.day' | unique: 'value.day'">
        <div class="card-header" id="heading{{$index}}">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">
              Day {{value.day}}
            </button>
          </h5>
        </div>
        <div id="collapse{{$index}}"  class="collapse" ng-class="!$last ? 'class-for-last' : 'show'"  aria-labelledby="heading{{$index}}" data-parent="#accordion">
          <div class="card-body" ng-repeat="(msg_key, msg_value) in value.messages">
            {{msg_value.msg}}
          </div>
        </div>
      </div>
    </div>

日{{value.Day}
{{msg_value.msg}}

感谢您提供此代码片段，它可能会提供一些有限的即时帮助。A通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有其他类似问题的读者更有用。请在您的回答中添加一些解释，包括您所做的假设。@jack这是可行的，但我得到一个ngRepeat:dupes错误，这是由于两个ngRepeat循环中使用了相同的键。检查它的代码，必须有相同的关键Twiswe不需要在ngRepeat循环中的任何一个关键。只需从循环中删除key和msg_key并重试。

<div id="accordion" class="accordion-style" ng-controller="report">
      <div class="card" ng-repeat="(key, value) in contents | orderBy: 'value.day' | unique: 'value.day'">
        <div class="card-header" id="heading{{$index}}">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">
              Day {{value.day}}
            </button>
          </h5>
        </div>
        <div id="collapse{{$index}}"  class="collapse" ng-class="!$last ? 'class-for-last' : 'show'"  aria-labelledby="heading{{$index}}" data-parent="#accordion">
          <div class="card-body" ng-repeat="(msg_key, msg_value) in value.messages">
            {{msg_value.msg}}
          </div>
        </div>
      </div>
    </div>