JSON service is not working in angular js

Question

I am trying to get the JSON values by using service on angularjs, am trying to print out that as a list.

But, as I expected, it is not working. The error I am getting even from agualr js as well. This below piece of code is not working completely, So that I can't give you what is error that i am getting

Could anyone give me an idea what is wrong here?

html

<!doctype html>
<html ng-app="appNew">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<script src="controllers1.js"></script>

</head>
<body>

<div ng-controller="contactController">
<H1>Here</H1>
 <ul ng-repeat="post in contact">
      <li>{{post.title}}</li>
    </ul>
</div>

</body>
</html>

js

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

app.controller('contactController', function($scope, contactServices) {
    $scope.contact=contactServices.posts;
    console.log($scope.contact);
});

app.service("contactServices", function($scope, $http) {
  $http.get('input.json').success(function(data, status, headers, config) {
      $scope.posts = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

input JSON

[
  { 
    "id": 1,
    "title": "Lorem ipsum 1"
  },
  { 
    "id": 2,
    "title": "Lorem ipsum 2"
  }
]

Error that i am getting

Any help where i went wrong?

Angular services dont have $scope - and what is the error that you are receiving? — tymeJV
– tymeJV, Commented Aug 6, 2015 at 15:41
you can print the success response into console.log(JSON.stringify(data)); — Sathiyaraj
– Sathiyaraj, Commented Aug 6, 2015 at 15:43

Sudharsan S · Accepted Answer · 2015-08-07 05:55:30Z

1

Your service scope cannot use in the controllers so use like below code using return

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

app.controller('contactController', function($scope, contactServices) {
    contactServices.getdata('input.json').then(function(success) {
         $scope.contact = success.data;
    }, function(error) {

    });
    console.log($scope.contact);
});


app.service("contactServices", function($http) {

  var apiClient = {
      getdata : getdata
  };
    return apiClient;

    function getdata(uri) {
      return $http.get(uri);
    }

});

edited Aug 7, 2015 at 5:55

answered Aug 6, 2015 at 15:52

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

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

4 Comments

User123 Over a year ago

Could you please check the above code yourside? Because, this is also not working

User123 Over a year ago

HI Soosmca, Please check my above image, that is the error I am getting. I am getting the same error even i used your code.

Sudharsan S Over a year ago

@User123 - remove $scope from contactServices and check

Sudharsan S Over a year ago

@User123 - did you got the answer

Paul Boutes · Accepted Answer · 2015-08-06 15:59:36Z

You can use some promise and the promise manager $q.defer().

By definition, $http return promise.

$q.defer() get 2 methods :

resolve(value) : which resolve our associated promise, by giving her the final value
reject(reason) : which resolve an promise error.

Service

(function(){

  function Service($http, $q){

    //create a defer with $q
    var defer = $q.defer();

    //Create our promise
    var promise = defer.promise;

    this.get = function(){
      $http.get('input.json').then(function(response){
        //Resolve the data
        defer.resolve(response.data);
      });

      return promise;
    }

  }

  angular
    .module('app')
    .service('Service', Service);

})();

Controller

(function(){

function Controller($scope, Service) {

  //Service.get() return a promise
  Service.get().then(function(data){

    //data is the data from our request
    $scope.contact = data;
  });

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

Collectives™ on Stack Overflow

JSON service is not working in angular js

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related