angularJS closure causes $HTTP.get to not return my array of JSON objects

Question

I have the following 3 methods in my module.factory dataservice I am using Angular 1.5

• getCannedJSON . This function works as intended and i would like the others to behave the same way. I copy and pasted the JSON i got from my webAPI in postman and put this in to the function. It returns an array of objects like i want.
• getDataFromAPI. For some reason I cannot get this function to return the response. The console.log(response) has exactly the data I want aka the same data as getCannedJSON. Instead it returns a d {$$State: object} any idea how i could alter this code to change have it return in the same format as the getCannedJson method?
  • getDataFromApiWithDynamicUrl this is no different than the above method but it will take a dyanmic url for the web api. It workds fine minus it not returning an array list of json objects it instead returns the same $$State object.

I would like getDataFromAPI to return the same array of all the objects in the json request like getCannedJson does. Any ideas where I am messing up. Below is a screenshot of the two different types of objects they are returning via console.log I would like the data at the bottom to look like the data at the top.

The code for the dataService module factory is below

(function (module) {
'use strict';

DataService.$inject = ['$http', '$q'];

function DataService($http, $q) {
    var getDataFromAPI = function () {
        var returnthis; 
        return $http({ //this top level returns instead 
            url: "http://localhost:34183/api/quality/month",
            dataType: 'json',
            method: 'GET',
        }).success(function (response) {
            console.log("This Response shown below is pefect! but it wont return....");  
            console.log(response);
            return (response);//This never returns
        }).error(function(error){
            console.log(error);
        });
        return returnthis;
    };
    var getDataFromApiWithDynamicUrl = function (pathurl) { // this is version 2 of the method i want to work where i can dynamically change the url to the path
        return $http.get(pathurl);
    };
    var getCannedJSON = function ($http) {
        return [{
                  "hockeyTeam": "Sharks",
                  "PlayoffRecord": {
                      "wins": "0"
                  },
              },
              {
                  "hockeyTeam": "Pengiuns",
                  "PlayoffRecord": {
                      "wins": "1"
                  },
              }
        ];
    };
    return {
        getDataFromAPI: getDataFromAPI,
        getDataFromApiWithDynamicUrl: getDataFromApiWithDynamicUrl,
        getCannedJSON: getCannedJSON
    };
}
module.factory('DataService', DataService);
})(angular.module('MyCoolModule'));

below is the code where i call these methods to consume the JSON data in my controller.

(function (module) {
'use strict';

hockeyViewController.$inject = ['DataService'];
function hockeyViewController(DataService) {
    var vm = this;

    vm.headers = [
        { name: 'Hockey Team', key: 'hockeyTeam' },
        { name: 'Record', key: 'PlayoffRecord'}
    ];

    vm.cannedData = angular.copy(DataService.getCannedJSON());
    vm.getDataFromAPI = DataService.getDataFromAPI();
    vm.getDataFromAPIwithCustomURL = [];
    DataService.getDataFromApiWithDynamicUrl("http://localhost:34183/api/quality/month").then(function(response){
        console.log("this response should work - and it does it in the right format");
        console.log(response.data);// this looks perfect
        vm.getDataFromAPIwithCustomURL = response.data;
        return response.data;
    }, function (error) {
        console.log(error);
    });
    vm.testMonthResults2 = angular.copy(DataService.getDataFromApiWithDynamicUrl("http://localhost:34183/api/quality/month"));

    console.log("canned json Data- works great"); 
    console.log(vm.cannedData);// this works perfectly  
    console.log("this is the data results with dynamic url - returns wrong object the $$state ");
    console.log(vm.getDataFromAPI);// returns $$state not array of objects
    console.log(vm.getDataFromAPIwithCustomURL); // this returns [] which is wrong
    console.log(DataService.getDataFromApiWithDynamicUrl("http://localhost:34183/api/quality/month"));
    // this doesnt work either 
}
function reportTabularViewDirective() {
    return {
        restrict: "E",
        controller: hockeyViewController,
        controllerAs: 'vm',
        bindToController: true,
        scope: {
        },
        templateUrl: "app/widgets/hockey-view.html"
    };
}

module.directive('hockeyView', hockeyViewDirective);

})(angular.module('MyCoolModule'));

Answer 1

Can try this one

var getDataFromAPI = function () {
        return $http({
            url: "/api/quality/month", // try using relative path
            dataType: 'json',
            method: 'GET',
           }).then(function(response) {
              console.log(response);
              return respose.data;
           }, function(error) {
              console.log(error);
              return [];
          });
 };

But better to use like: service return only promise and in controller use then function to handle response

In service:

var getDataFromAPI = function() {
     return $http.get('/api/quality/month');
};

in controller:

DataService.getDataFromAPI().then(function(response) {
    console.log(response.data);
}, function(error) {
    console.log(error);
});

Answer 2

You get a $promise object by calling DataService.getDataFromAPI(). You need to handle the $promise object to get the response.

DataService.getDataFromAPI().then(function(response) {
    // console.log(response);
})

The same applies when you getDataFromApiWithDynamicUrl() function.

For more info, see doc:

$http
$q