current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
    
In addition to all the answers, to do some easy debug, I would have printed {{bla}}, just to see what the hell was in there. –  domokun Mar 5 at 9:24

4 Answers 4

up vote 0 down vote accepted

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;
}]);
share|improve this answer
    
This is what rest service returns, and when replaced this above in jsfiddle it doesnt show anything. –  AngryJS Mar 5 at 10:38
    
{"users":[{"id":1,"firstname":"Naveen","lastname":"Dutt","email":"naveendutt.vya‌​[email protected]","telephone":"7829418355"},{"id":3,"firstname":"sameer","lastname":"s‌​ahlot","email":"abc","telephone":"34234324"}]} –  AngryJS Mar 5 at 10:39
    
can u check pls –  AngryJS Mar 5 at 10:45
    
@brc_nd see jsfiddle.net/9Ymvt/1097 –  Maxim Shoustin Mar 5 at 12:14
    
Worked! I creating a list and setting into the object! weird but once i removed it, it worked –  AngryJS Mar 5 at 12:39
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

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

share|improve this answer
up vote 0 down vote

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

share|improve this answer
    
services.factory('NFactory', function ($resource) { alert("here? servces?"); return $resource('/ngdemo11/web/users', {}, { query: { method: 'GET', params: {}, isArray: true } }) }); –  AngryJS Mar 5 at 10:26
    
please, read UPDATE above –  dragonkhan Mar 5 at 11:27
    
Worked! I creating a list and setting into the object! weird but once i removed it, it worked –  AngryJS Mar 5 at 12:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.