AngularJS中如何展示通过$http获取并存储到scope的对象数组？

嘿，我来帮你搞定这个问题！既然你已经用$http把JSON数据拿到并存到$scope里了，那核心就是用AngularJS的ng-repeat指令来遍历数组，把数据拆分开展示，而不是直接输出整个数组。

首先先确认你的app.js逻辑没问题，我先给一个典型的示例（如果你的代码类似这个结构就没问题）：

var app = angular.module('myApp', []);
app.controller('DataController', function($scope, $http) {
  // 替换成你的JSON文件路径
  $http.get('your-data-file.json')
    .then(function(response) {
      // 把获取到的数组存到$scope.items里（变量名你可以自己改）
      $scope.items = response.data;
    })
    .catch(function(error) {
      console.log('加载数据出错啦:', error);
    });
});

接下来就是在HTML里展示数据了，分几个常用场景：

1. 基础列表展示 #

这是最常用的方式，用ng-repeat遍历数组里的每一项，然后用{{}}绑定具体属性：

首先确保你的HTML已经关联了AngularJS应用和控制器：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="DataController">
  <!-- 展示区域 -->
  <h2>我的数据列表</h2>
  <ul>
    <!-- 用ng-repeat遍历$scope.items数组，每一项叫item -->
    <li ng-repeat="item in items">
      <!-- 这里替换成你的JSON对象的属性名 -->
      名称: {{item.name}} | 描述: {{item.description}}
    </li>
  </ul>
</body>
</html>

2. 规整的表格展示 #

如果数据适合用表格呈现，这样更清晰：

<h2>数据表格</h2>
<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>名称</th>
      <th>描述</th>
      <th>数值</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in items">
      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
      <td>{{item.value}}</td>
    </tr>
  </tbody>
</table>

3. 处理加载状态（很重要！） #

因为$http是异步请求，页面加载初期数据还没回来，直接展示会是空的，甚至可能显示undefined，所以可以加个加载提示：

<!-- 数据没加载完时显示 -->
<div ng-if="!items">正在加载数据...</div>

<!-- 数据加载完成后显示列表/表格 -->
<div ng-if="items">
  <ul>
    <li ng-repeat="item in items">{{item.name}}</li>
  </ul>
</div>

4. 嵌套数组的展示 #

如果你的JSON是嵌套结构（比如数组里的元素还有子数组），可以嵌套ng-repeat：
假设你的JSON是这样的：

[
  {
    "category": "电子产品",
    "products": [{"name": "手机"}, {"name": "笔记本电脑"}]
  },
  {
    "category": "生活用品",
    "products": [{"name": "毛巾"}, {"name": "牙刷"}]
  }
]

那HTML可以这么写：

<div ng-repeat="category in items">
  <h3>{{category.category}}</h3>
  <ul>
    <li ng-repeat="product in category.products">{{product.name}}</li>
  </ul>
</div>

几个注意点： #

• 确保你的JSON文件路径正确，$http.get里的路径要和HTML文件的位置对应（比如JSON和HTML在同一目录就直接写文件名，子目录就写相对路径）
• 替换{{item.xxx}}里的xxx为你实际JSON对象的属性名，别写错哦
• 如果数据加载失败，可以看浏览器控制台的错误信息，排查路径或者JSON格式问题

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