Angularjs $ http получить данные json, но не отображает

Question

Я новичок в 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>

Console Output

Computer Parts->Cooling Device->CPU Fan 

Вопрос заключается в том, ng- повторить работу хорошо, есть два тега в списке, но {{item.name}} не может прочитать данные. Я не знаю почему. Результат #SnapShot, пожалуйста, помогите!

Answer 1

Я думаю, вы должны использовать $scope.category в html-коде вместо {{item.category}}.

Answer 2

В коде, который вы отправили, нет ничего плохого. Как заметил Александр, вам, вероятно, не нужен fromJson(), но это тоже не должно быть проблемой.

Вот рабочий plunker помощью такой же код: https://plnkr.co/edit/GrYZZLjYc9mwCj7dAs5Z?p=preview

Единственное, что я изменил в том, чтобы вытащить данные из файла, так как я не ваш сервис:

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

Я предполагаю, что это не обязательно является ответом на вашу проблему, но это доказывает, что код, который вы опубликовали, работает ... ваша проблема должна быть в другом месте.

Answer 3

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

      }); 
     };