AngularJS ng-repeat遍历嵌套JSON无法显示Ques与img数据问题

你赋值给$scope.messages的数据源是最外层为数组的结构，Ques、img这两个属性都存在于数组索引为0的对象上，直接访问messages.Ques拿到的是undefined，自然啥都渲染不出来。另外你写的先JSON.stringify再JSON.parse完全是多余操作，不需要多这一步。

方案1：保留原数据结构，双层遍历 #

JS部分直接简化赋值即可：

$scope.messages = response.data;

如果要同时渲染Ques和img两块内容，HTML写法如下：

<div ng-repeat="group in messages">
  <!-- 遍历Ques字段内容 -->
  <div class="list-group-item" ng-repeat="item in group.Ques">
    <h4 class="list-group-item-heading">{{item.column2}}</h4>
    <p class="list-group-item-text">{{item.column1}}</p>
  </div>

  <!-- 遍历img字段内容 -->
  <div class="list-group-item" ng-repeat="pic in group.img">
    <p class="list-group-item-text">图片ID：{{pic.column1}}</p>
    <p class="list-group-item-text">图片文件名：{{pic.column2}}</p>
  </div>
</div>

方案2：JS层直接取数组首元素，省一层遍历 #

如果接口返回的这个数组固定只有1个元素，可以在赋值的时候直接取第一个元素，HTML就可以沿用你原来的单层遍历逻辑：

// 直接取数组第一个元素赋值
$scope.messages = response.data[0];

对应HTML可以直接写：

<div class="list-group-item" ng-repeat="item in messages.Ques">
  <h4 class="list-group-item-heading">{{item.column2}}</h4>
  <p class="list-group-item-text">{{item.column1}}</p>
</div>
<!-- 要渲染img部分直接加对应遍历即可 -->
<div class="list-group-item" ng-repeat="pic in messages.img">
  <p class="list-group-item-text">{{pic.column2}}</p>
</div>

内容的提问来源于stack exchange，提问作者atc