AngularJS技术问题：无法打印嵌套数组及读取JSON数据遇阻

嘿，我来帮你捋捋这两个AngularJS的问题！我刚学AngularJS的时候也踩过类似的坑，咱们一步步来解决～

首先，AngularJS里获取JSON最常用的是$http服务，很多时候出问题都是因为异步处理不到位或者路径/格式错误。给你一个标准的正确写法，你可以对照着排查：

angular.module('myApp', [])
.controller('myController', function($scope, $http) {
  // 替换成你的JSON文件路径或接口地址
  $http.get('your-data.json')
    .then(function(response) {
      // 请求成功后把数据绑定到scope
      $scope.jsonData = response.data;
      console.log('成功获取JSON:', $scope.jsonData);
    })
    .catch(function(error) {
      // 请求失败时打印错误信息，方便排查
      console.error('获取JSON失败:', error);
    });
});

常见的排查点：

• 路径错误：检查你的JSON文件和HTML页面的相对路径是否正确，比如如果JSON在data文件夹里，路径应该是data/your-data.json
• JSON格式不合法：如果JSON有语法错误（比如漏写逗号、引号不配对），请求会失败，你可以把JSON内容复制到本地的JSON校验工具里检查
• 跨域问题：如果是请求外部域名的JSON接口，需要后端配置CORS；或者如果接口支持JSONP，可以用$http.jsonp()来请求（记得加回调参数）

嵌套数组打印不出来，大概率是因为数据还没异步加载完成就去访问，或者遍历/访问的方式不对。举个例子，假设你的JSON结构是这样的：

{
  "parentArray": [
    {
      "title": "父项1",
      "childArray": ["子项1-1", "子项1-2"]
    },
    {
      "title": "父项2",
      "childArray": ["子项2-1", "子项2-2", "子项2-3"]
    }
  ]
}

1. 在控制器里打印嵌套数组 #

一定要在$http的then回调里操作数据，因为异步请求完成后数据才会存在：

$http.get('your-data.json')
  .then(function(response) {
    $scope.jsonData = response.data;
    
    // 打印第一个父项的嵌套数组
    console.log('第一个父项的子数组:', $scope.jsonData.parentArray[0].childArray);
    
    // 遍历所有父项，打印每个的嵌套数组
    $scope.jsonData.parentArray.forEach(function(parentItem) {
      console.log(`${parentItem.title}的子数组:`, parentItem.childArray);
    });
  });

2. 在视图里显示嵌套数组 #

如果是要在页面上展示嵌套数组，用ng-repeat嵌套即可：

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="parent in jsonData.parentArray">
    <h4>{{parent.title}}</h4>
    <ul>
      <!-- 嵌套ng-repeat遍历子数组 -->
      <li ng-repeat="child in parent.childArray">{{child}}</li>
    </ul>
  </div>
</div>

如果控制台还是打印undefined，先在回调里打印整个response.data，确认嵌套数组确实存在，再检查属性名有没有拼写错误（比如把childArray写成childarray，AngularJS是区分大小写的）。

内容的提问来源于stack exchange，提问作者Lars Rødal