0

I am new to AngularJS trying to create my own Custom Service. I am using $http method. Here is my code

HTML:

<div ng-app="dummyApp">
<div ng-controller="myserctrl">
    <label>My label</label>
    {{resData}}
</div>

Ctrl:

var myreq = angular.module("dummyApp", []);
myreq.controller('myserctrl', function($scope, myService, $rootScope) {
    $scope.resData = result.data.content;
});

Service:

myreq.service("myService", function($rootScope, $http){
$rootScope.result = {};
$http.get('https://api.myjson.com/bins/dtm5r')
.then(function (data) {
    result = data;
    console.log($rootScope.result);
})
.then(function (data){
    console.log("the Data is error")
})
});

My call was going and I am getting the successful result but I am missing something in the control, because I am not getting the proper data in the html.

Improve this question
8
  • use $rootScope.result instead of just "result" wherever you are using it. i.e in service(inside 1st then) as well as in controller. Also your error handling of http will not work. Commented Jul 21, 2017 at 5:44
  • Please share the plnkr/jsfiddle of the code simulating issue Commented Jul 21, 2017 at 6:15
  • @AbhishekJha Don't use $rootScope for that. Commented Jul 21, 2017 at 6:44
  • @NikolajDamLarsen that suggestion was to make program syntactically correct as he is new to angular js. Going forward he will learn how and when to use $rootScope. Nevertheless I agree rootScope should not be used for such use case Commented Jul 21, 2017 at 8:47
  • @AbhishekJha can you please tell me how use success & error callback Commented Jul 21, 2017 at 8:50

2 Answers 2

Reset to default
3 
 myreq.service("myService", function($rootScope, $http){
  // $rootScope is persistent but it is not available
  this.getData = function(){
      return $http.get('https://api.myjson.com/bins/dtm5r');
  }
});


    var myreq = angular.module("dummyApp", []);
    myreq.controller('myserctrl', function($scope, myService, $rootScope) {
        myService.getData().then(function (data) {
            $scope.resData = data;
            console.log($rootScope.result);
        });

});

I'd suggest you to go through the asynchronous nature of AJAX and what a Promise is, these should help you understand the behaviour better.

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

7 Comments

Hi I have a query here but how to use success call back and error call back here can you tell me
Can you please explain me why you have modified my service and control
Because $http is asynchronous, so when you call $scope.resData = result.data.content; in your controller the data property of the result object is undefined. Thus you get an error. Using @Vishal's change, allows your controller to wait for the $http request to finish, before trying to access any data.
With the above code i am getting entire json data but i want only content while i am trying data.content it was not coming {"data":{"id":1,"content":"Hello, World!"},"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"api.myjson.com/bins/dtm5r","headers":{"Accept":"application/json, text/plain, /"}},"statusText":"OK"}
Sorry I got the result thanks for the help
|
0

In your controller change

$scope.resData = result.data.content;

to

$scope.resData = $rootScope.result.data.content;

And In your

Service

change result = data; to $rootScope.result = data;

Improve this answer

2 Comments

thanks for the immediate reply i am getting error Cannot read property 'content' of undefined
@Mahadevan Edited my answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.