Angularjs $ http获取json数据，但不会显示

Question

我是angularjs的新手，我尝试使用angularjs异步加载数据。

Json Sample

[{"id":153,"name":"Computer Parts->Cooling Device->CPU Fan"},{"id":30,"name":"Computer Parts->CPU"}]

HTML代码

＆＃13;

＆＃13;

 var homeApp = angular.module('managementApp',[]);
        homeApp.controller('categoryMgmt',function($scope,$http){
            $scope.categoryFilter = '';
            $scope.categorys = '';
            $scope.categoryLoad = function(){
                var key = $scope.categoryFilter;

                $http({
                    method : 'get',
                    url : 'hugo.dev/api/categorys/'+key,
                    
                }).then(function mySuccess(response){
                    $scope.categorys = angular.fromJson(response.data);
                    console.log($scope.categorys[0].name);

                });
            };
        });

＆＃13;

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<div class="panel-body" ng-app="managementApp" ng-controller="categoryMgmt">
  <div class="form-group col-md-6">
    <label for="category">Category</label>
    <input name="categoryName" class="form-control" ng-model="categoryFilter">
    <div class="list-group" ng-show="categoryFilter" >
      <a ng-repeat="item in categorys" href="#" class="list-group-item">{{ item.name }}</a>
    </div>
   </div>
  <button type="button" ng-click="categoryLoad()">asd</button>

</div>

＆＃13;

＆＃13;

＆＃13;

控制台输出

Computer Parts->Cooling Device->CPU Fan

问题是，ng-repeat工作正常，列表中有两个标签，但 {{item.name}} 无法读取任何数据。我不知道为什么。结果#SnapShot，请帮忙！

Answer 1

您发布的代码没有任何问题。正如亚历山大指出的那样，你可能不需要fromJson()，但这也不应该是一个问题。

以下是使用相同代码的工作人员：https://plnkr.co/edit/GrYZZLjYc9mwCj7dAs5Z?p=preview

我唯一改变的是从文件中提取数据，因为我没有你的服务：

// url : 'hugo.dev/api/categorys/'+key,
url: 'data.json'

我想这不一定是您问题的答案，但它证明您发布的代码有效......您的问题必须在其他地方。

Answer 2

scope.categorys必须初始化为数组并从中移除fromJson

homeApp.controller('categoryMgmt',function($scope,$http){
      $scope.categoryFilter = '';
     // Default to array
     $scope.categorys = [];
     $scope.categoryLoad = function(){
          var key = $scope.categoryFilter;

         $http({
                    method : 'get',
                    url : 'hugo.dev/api/categorys/'+key,

                }).then(function mySuccess(response){
                    // remove fromJson
                    $scope.categorys = response.data;
                    console.log($scope.categorys[0].name);

           });
      };

Answer 3

我认为你应该在html代码中使用$scope.category而不是{{item.category}}。