AngularJS中用jQuery获取JSON数据无法渲染到<li>的问题求助

我帮你梳理下代码里的几个关键问题，这些问题导致你无法把分类信息渲染到<li>标签里：

1. 未将JSON数据绑定到Angular的$scope #

你用jQuery的$.getJSON获取到数据后，只是把数据push到了一个局部数组array里，但没有把这个数组赋值给Angular控制器的$scope变量——视图根本无法访问到这些内部数据。

2. ng-repeat语法与数据绑定不匹配 #

你的HTML里写的是ng-repeat="categories in category"，但绑定的却是{{data.category}}：首先data并没有被挂载到$scope上，其次循环变量categories也没被使用，而且你的JSON是一个数组，循环的逻辑完全不对。

3. 数组push方法调用错误 #

JS里你写的是array.push[text2]，这是语法错误，正确的调用方式应该是array.push(text2)（用圆括号而不是方括号）。

4. JSON结构存在语法错误 #

你提供的JSON最后缺少了闭合的}]，导致解析会直接失败，我先帮你补全正确的结构。

修正后的完整代码 #

修正后的HTML #

<ul ng-repeat="item in categoryList">
  <li>{{item.Category}}</li>
</ul>

修正后的JS（推荐用Angular的$http替代jQuery，更符合Angular生态） #

var app = angular.module('myapp', []);
app.controller('myCtrl', function($scope, $http) {
  // 用Angular的$http服务获取JSON，自动触发脏检查
  $http.get("category.json")
    .then(function(response) {
      // 将获取到的数组赋值给$scope的变量，视图就能访问了
      $scope.categoryList = response.data;
      console.log($scope.categoryList[0].Category); // 打印验证数据
    })
    .catch(function(error) {
      console.error("获取JSON失败:", error);
    });
});

如果你坚持要用jQuery的$.getJSON，需要手动触发Angular的脏检查：

var app = angular.module('myapp', []);
app.controller('myCtrl', function($scope) {
  $.getJSON("category.json", function(data) {
    $scope.categoryList = data;
    // 因为jQuery的异步操作不在Angular的脏检查周期里，需要手动触发
    $scope.$apply();
    console.log(data[0].Category);
  });
});

修正后的JSON（补全语法错误） #

[
  {
    "Category": "Beauty",
    "subcategory": [
      {
        "name": "Baby Care",
        "items": [
          { "name": "Soap", "Price": "10.00" },
          { "name": "cream", "price": 20.00 }
        ]
      },
      {
        "name": "Drug Store",
        "items": [
          { "name": "Bandage", "price": 5.00 },
          { "name": "stringe", "price": 6.50 },
          { "name": " Pain Relief", "price": 8.00 },
          { "name": "First Aid Kit", "price": 14.99 },
          { "name": "Cold Relief", "price": 6.50 }
        ]
      },
      { "name": "Health and Personal Care", "items": [] },
      {
        "name": "HouseHold Supplies",
        "items": [
          { "name": "Air Freshener", "price": 1.25 },
          { "name": "All Purpose Cleaner", "price": 2.99 },
          { "name": "Disinfecting Wipes", "price": 8.99 }
        ]
      }
    ]
  }
]

关键说明 #

• 核心是把数据挂载到$scope上，这样Angular的双向绑定才能生效，视图才能拿到数据。
• ng-repeat的语法是循环变量 in 数据源，所以要确保数据源是$scope上的数组，然后在<li>里使用循环变量（比如item.Category）来绑定数据。
• 尽量使用Angular自带的$http服务来发起请求，它会自动处理Angular的脏检查，不需要手动调用$apply()。

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