【问题标题】：Angularjs $http get json data, but won't displayAngularjs $http 获取 json 数据，但不会显示
【发布时间】：2017-06-05 15:47:33
【问题描述】：

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

Json 示例

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

HTML 代码

 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);

                });
            };
        });

    <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>

控制台输出

Computer Parts->Cooling Device->CPU Fan

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

【问题讨论】：

我认为你不需要fromJson()，只需设置$scope.categorys = response.data;
嗨，我之前删除了 fromjson()，同样的问题。干杯
而不是<a> 中的list-group 只需打印出{{ item }} 并查看输出是什么以确保所有属性都通过。 <div ng-repeat="item in categorys">{{ item }}</div>.
直接尝试 $scope.categorys = response.data。如果这不起作用，请检查此代码 $scope.categorys = JSON.parse(response.data );或者 JSON.parse(response).data 第二个和第三个一般不需要。

标签： javascript html angularjs json api

【解决方案1】：

您发布的代码没有任何问题。正如 Alexander 指出的那样，您可能不需要 fromJson()，但这也不应该成为问题。

这是一个使用相同代码的工作 plunker：https://plnkr.co/edit/GrYZZLjYc9mwCj7dAs5Z?p=preview

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

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

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

【讨论】：

您好 Picazo，非常感谢您提供的测试代码，它似乎运行良好，在我的计算机中真的很奇怪...

【解决方案2】：

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

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);

           });
      };

【讨论】：

【解决方案3】：

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

【讨论】：