如何在angularjs中显示JSON列表数据答案

【问题标题】：How to display JSON list data in angularjs如何在angularjs中显示JSON列表数据
【发布时间】：2014-04-07 05:44:23
【问题描述】：

我是 Angularjs 新手，无法显示数据。即Json数组

这是我的休息服务调用的结果：

{
    "users": [{
        "id": 1,
        "firstname": "Naveen",
        "lastname": "Dutt",
        "email": "navee23ndutt12.vyas@gmail.com",
        "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>

但它不会在 UI 上显示任何内容。可能是什么问题？请建议。

【问题讨论】：

除了所有的答案，为了做一些简单的调试，我会打印{{bla}}，看看里面到底有什么。

标签： angularjs rest angularjs-scope angularjs-ng-repeat angularjs-service

【解决方案1】：

如果你的情况是$scope.bla

{"users":[{"id":1,"firstname":"Naveen","lastname":"Dutt","email":"navee23ndutt12.vyas@gmail.com","telephone":"7829418456445355"}]

那么你的模板应该是这样的：

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

另一种方法是更改 Controller 中的代码，如下所示：

$scope.bla = NFactory.query.users;

保留模板原样。

【讨论】：

【解决方案2】：

发生这种情况是因为您调用了异步任务。我会用承诺包装结果。

这是异步调用的基本模拟：

演示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": "navee23ndutt12.vyas@gmail.com",
            "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;
}]);

【讨论】：

这是 rest 服务返回的内容，当在 jsfiddle 中替换上面的这个时，它不显示任何内容。
{"users":[{"id":1,"firstname":"Naveen","lastname":"Dutt","email":"naveendutt.vyas@gmail.com" ,"电话":"7829418355"},{"id":3,"firstname":"sameer","lastname":"sahlot","email":"abc","telephone":"34234324"}] }
成功了！我创建一个列表并设置到对象中！很奇怪，但是一旦我删除它，它就起作用了

【解决方案3】：

如果 NFactory.query 是字符串，则需要先将其解析为 JSON。

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

然后

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

希望这会有所帮助...

【讨论】：

【解决方案4】：

不应该是方法调用吗：NFactory.query()？

请显示 NFactory 源代码。

更新：尝试仅从服务器响应数组：

[{
    "id": 1,
    "firstname": "Naveen",
    "lastname": "Dutt",
    "email": "navee23ndutt12.vyas@gmail.com",
    "telephone": "7829418456445355"
}]

并使用NFactory.query()

【讨论】：

services.factory('NFactory', function ($resource) { alert("here? servces?"); return $resource('/ngdemo11/web/users', {}, { query : { 方法: 'GET', 参数: {}, isArray: true } }) });
成功了！我创建一个列表并设置到对象中！很奇怪，但是一旦我删除它，它就起作用了