0

I'm a newbie to Angular JS. I was referring Online tutorials and came across the $http service. 

(function () {
    "use strict";

    angular
        .module("ngClassifieds") // referring module which is already created
        .controller("classifiedsCtrl", function ($scope, $http) {

            $http.get('data/classifieds.json')
                .then(function(classifieds){
                    $scope.classifieds = classifieds.data;

                })
        });
})();

In this piece of code, I'm not able to figure out these lines. Can anyone explain what actually happens here ? 

  $http.get('data/classifieds.json')
     .then(function(classifieds){
         $scope.classifieds = classifieds.data;
     }


I have this data in my data/classifieds.json file.

My question is, what exactly the data referred in classifieds.data is ?

  • what does classifieds.data represent here ?
  • what information does it contain?
  • what would be the result which we assign to $scope.classifieds?
coderpc
  • 4,119
  • 6
  • 51
  • 93
  • Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Igor Mar 16 '17 at 21:29
  • Good job for reading a tutorial, that is a start... 1) See [$http documentation](https://docs.angularjs.org/api/ng/service/$http) its right there at the top with big bold letters. 2) did you go to the file `data/classifieds.json` you reference in your copy/paste link and code? (*it helps to read what you copy/paste, open it up and see what is inside*). 3) that variable now has a reference to the returned data that was received in the call back. – Igor Mar 16 '17 at 21:33

2 Answers2

2

$http returns a promise, it's an asynchronous call, angular use a fork of a library called Q for promises, you can see $q documentation here: https://docs.angularjs.org/api/ng/service/$q. When the promise is fulfilled, that means, the asynchronous call is complete, the .then method call success or error callback depending on the result of the async call.

.then(successCallback, [errorCallback], [notifyCallback]) – regardless of when the promise was or will be resolved or rejected, then calls one of the success or error callbacks asynchronously as soon as the result is available. The callbacks are called with a single argument: the result or rejection reason. Additionally, the notify callback may be called zero or more times to provide a progress indication, before the promise is resolved or rejected.

The argument passed to the success callback is an object with the information about the request response. The data property contain the body of the response, in other way, all the content of data/classifieds.json file (in your case), therefore, $scope.classifieds will contain the json returned by data/classifieds.json.

Here a friendly article about promises and $q: http://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/

Carlos Arauz
  • 805
  • 6
  • 8
1

A simple get request example from AngularJS Docs.

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

In your code, 

$http.get('data/classifieds.json') // This is the URI of your json file
     .then(function(classifieds){ // Success callback
         $scope.classifieds = classifieds.data; // Here, you are assigning response's data into $scope.classifieds
     }
scriobh
  • 868
  • 10
  • 25