Fetching data from a JSON object (from a given API) in AngulaJS

Question

I have the following code to present data from a link (API) as suggestion for an autocomplete box. Although it is working for one link and not the other. I observed that data format for both are different, modified my code accordingly but it is still not helpful.

.js file:

var plunker= angular.module('plunker', ['ui.bootstrap', 'ngGrid']);
function TypeaheadCtrl($scope, $window, $http, limitToFilter) {

$scope.cities = function (cityName) {
    return $http.jsonp("http://mtapi.azurewebsites.net/api/institute").then(function           (response) {
 return response[0].description;
    });
};
}

HTML file:

<input type="text" id="depn" ng-model="formdata.department"        
       typeahead="suggestion.description for suggestion in cities($viewValue)"   
       placeholder="department" class="form-control">

If you replace the cities function with this one,

 $scope.cities = function (cityName) {
    return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK   &filter=US&q=" + cityName).then(function (response) {
        return response.data;
    });
};``

Even after I changed my code jsonP request to .get, it is still not working

var plunker= angular.module('plunker', ['ui.bootstrap', 'ngGrid']);
function TypeaheadCtrl($scope, $window, $http, limitToFilter) {
  $scope.cities = function (cityName) {
    return $http.get("http://mtapi.azurewebsites.net/api/institute").success(function(data) {
       return data[0].description;
    });
  };
}

It is working fine. Is there a problem with my code, or a back end server issue?

Answer 1

I figured it out lately. Apart from the problem at back end there were issues in this code as well. I was returning the promise, but promise was never resolved to return the value also I was trying to return a string, whereas I should return array of strings. Here's the change:

 $scope.aap = result.data;
  var res = [];
  res.push($scope.aap[0].Description);
  return res;

Answer 2

Change your cities function to use the data property of the response in your .then (that's how you'll access the response from a resolved HttpPromise):

var plunker= angular.module('plunker', ['ui.bootstrap', 'ngGrid']);
function TypeaheadCtrl($scope, $window, $http, limitToFilter) {

$scope.cities = function (cityName) {
    return $http.get("http://mtapi.azurewebsites.net/api/institute").then(function           (response) {
         return response.data[0].description;
    });
};

EDIT

Even making that code change won't solve your problem. This url does not support cross-origin requests, so you either need to host your angularjs app on the same domain and use a plain $http.get instead of $http.jsonp, or this url needs to support JSONP requests (the content-type of the response from this url is application/json. For JSONP to work it should be application/javascript).