AngularJS Service not Returning JSON data

Question

I am trying to pull json data from the angular service but its always printing blank spaces, can some one help me please. No errors in the console as well.

Service

    app.service("Java4sService", function() {

     var details = {};
     this.details = function() {

         [{
             name: "James",
             country: "United Stages"
         }, {
             name: "Rose",
             country: "United Kingdom"
         }, {
             name: "Smith",
             country: "United States"
         }]

     };

     this.getDetails = function() {
         return details;
     };

 });

Controller

app.controller("Java4sController",function($scope,Java4sService){           
                $scope.personDetails = Java4sService.getDetails();
});

Html

<ul>
    <li ng-repeat="person in personDetails ">
            {{person.name}} - {{person.country}}
    </li>
</ul>

The problem is that in your service you are setting 'this.details' to a function which returns nothing. Look at your function more carefully again. As the answer recommends remove the function surrounding the array and then everything works fine. — Ali Motevallian
– Ali Motevallian, Commented Oct 15, 2014 at 3:56

long.luc · Accepted Answer · 2014-10-15 04:07:24Z

1

You should modify your service as below:

app.service("Java4sService", function() {
    var details = [ {
        name: "James",
        country: "United Stages"
    }, {
        name: "Rose",
        country: "United Kingdom"
    }, {
        name: "Smith",
        country: "United States"
    } ]

    return {
        getDetails: function() {
            return details;
        }
    };
});

Here is the demo

edited Oct 15, 2014 at 4:07

answered Oct 15, 2014 at 3:45

long.luc

1,1911 gold badge10 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Siva Over a year ago

I am using service, not factory. So we should use this.getDetails i guess.

Siva Over a year ago

One more thing.., what the difference between.. getDetails = function() {} and getDetails:function() {} ?

long.luc Over a year ago

getDetails = function()... means you assign a Function object to variable getDetails. { getDetails: function()... } means you assign a Function object to property getDetails of an object.

Collectives™ on Stack Overflow

AngularJS Service not Returning JSON data

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related