如何在angularjs中顯示JSON列表數據

我是Angularjs的新手，無法顯示數據。即JSON數組如何在angularjs中顯示JSON列表數據

這是我的休息服務調用的結果：

{ 
    "users": [{ 
     "id": 1, 
     "firstname": "Naveen", 
     "lastname": "Dutt", 
     "email": "[email protected]", 
     "telephone": "7829418456445355" 
    }] 
}

這是我的控制器：

app.controller('MyCtrl2', ['$scope', 'NFactory', function ($scope, NFactory) { 
    alert("here??"); 
    $scope.bla = NFactory.query; 
    alert("here??" + $scope.bla); 

    NFactory.get({}, function (nFactory) { 
     $scope.allposts = nFactory.firstname; 
    }) 
}]);

這是我的html：

<div> 
    <ul > 
     <li ng-repeat="user in bla"> {{ user.firstname }} </li> 
    </ul> 
</div>

但它不會在用戶界面上顯示任何內容。可能是什麼問題？請建議。

來源

2014-03-05 AngryJS

除了所有的答案，做一些簡單的調試，我會打印'{{BLA}}' ，看看那裏到底是什麼。 – domokun

發生這種情況是因爲您調用了異步任務。我會用承諾包裝結果。

這裏是異步調用的基本模擬：

演示Fiddle

var app = angular.module('myModule', ['ngResource']); 

app.controller('fessCntrl', function ($scope, Data) { 

     Data.query() 
      .then(function (result) { 
       console.log(result); 
      $scope.bla = result.users; 
     }, function (result) { 
      alert("Error: No data returned"); 
     }); 


}); 

app.$inject = ['$scope', 'Data']; 

app.factory('Data', ['$resource', '$q', function ($resource, $q) { 
    var data = { 
     "users": [{ 
      "id": 1, 
      "firstname": "Naveen", 
      "lastname": "Dutt", 
      "email": "[email protected]", 
      "telephone": "7829418456445355" 
     }] 
    }; 

//Actually we can use $resource 
//var data = $resource('localhost/shfofx/PHP/Rest/alertLossDetails.php', 
//  {}, 
//  { query: {method:'GET', params:{}}} 
//    ); 
    var factory = { 

     query: function (selectedSubject) { 
      var deferred = $q.defer();   
      deferred.resolve(data);   
      return deferred.promise; 
     } 

    } 
    return factory; 
}]);

來源

2014-03-05 09:19:29

這是什麼其他服務返回，並且當在jsfiddle中替換上面的時候它不顯示任何東西。 – AngryJS

{「users」：[{「id」：1，「firstname」：「Naveen」，「lastname」：「Dutt」，「email」：「[email protected]」，「telephone」：「7829418355 「}，{」id「：3，」firstname「：」sameer「，」lastname「：」sahlot「，」email「：」abc「，」telephone「：」34234324「}]} – AngryJS

你可以檢查 – AngryJS

如果$scope.bla你的情況是

{"users":[{"id":1,"firstname":"Naveen","lastname":"Dutt","email":"[email protected]","telephone":"7829418456445355"}]

那麼你的模板應該是這樣的：

<ul > 
    <li ng-repeat="user in bla.users"> {{ user.firstname }} </li> 
</ul>

另一種方法是更改代碼的Controller裏面是這樣的：

$scope.bla = NFactory.query.users;

並保留模板，因爲您擁有它。

來源

2014-03-05 09:16:19 PrimosK

如果NFactory.query是你需要首先分析它的JSON字符串。

$scope.bla=JSON.parse(NFactory.query);

然後

<ul > 
    <li ng-repeat="user in bla.users"> {{ user.firstname }} </li> 
</ul>

希望這將有助於...

來源

2014-03-05 09:22:19

它不應該是一個方法調用：NFactory.query()？

請顯示NFactory源代碼。

UPDATE：嘗試從服務器響應只是數組：

[{ 
    "id": 1, 
    "firstname": "Naveen", 
    "lastname": "Dutt", 
    "email": "[email protected]", 
    "telephone": "7829418456445355" 
}]

，並使用NFactory.query()

來源

2014-03-05 09:31:10 dragonkhan

services.factory（'NFactory'，函數（$資源）{ 警報（「這裏？servces？」）; 返回$資源（'/ ngdemo11/web/users'，{ }，{ 查詢：{ 方法： 'GET'， PARAMS：{}， IsArray的：真 } }） }）; – AngryJS

請閱讀以上更新 – dragonkhan

工作！我創建一個列表並設置到對象中！奇怪，但一旦我刪除它，它的工作 – AngryJS

如何在angularjs中顯示JSON列表數據

回答

相關問題