CODEWITHSUNDEEP
angularjsrestangularjs-scopeangularjs-ng-repeatangularjs-service
AngryJS
AngryJS

Reputation: 955

How to display JSON list data in angularjs

I am new to Angularjs and having trouble displaying data . i.e. Json array

This is the result of my rest service call:

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

And this is my controller: 

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

This is my html:

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

but it doesnt show anything on UI. what can be the problem? please suggest.

Upvotes: 2

Views: 28361

Answers (4)

dragonkhan
dragonkhan

Reputation: 374

Shouldn't it be a method call: NFactory.query() ?

Please show the NFactory source.

UPDATE: Try responding just array from server: 

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

and use NFactory.query()

Upvotes: 0

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

It happens because you call async task. I would wrap result with promise.

Here is basic simulation of async call:

Demo 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;
}]);

Upvotes: 2

Nikunj Tilva
Nikunj Tilva

Reputation: 21

If NFactory.query is string you need to parse it as JSON first.

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

and then 

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

Hope this will help...

Upvotes: 1

PrimosK
PrimosK

Reputation: 13918

If $scope.bla in your case is 

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

then your template should look like this:

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

Another way would be to change the code inside your Controller like this:

$scope.bla = NFactory.query.users;

and leave template as you have it.

Upvotes: 1

Related Questions