How to return transformed data from a $http.json request in angular?

Question

How can I return the APIData.map and not the default success APIdata using $http.jsonp?

LangDataService Constructor:

 languages.LangDataService = function($http, $q) {
   this.langDefer = $q.defer();
   this.isDataReady = this.langDefer.promise;
 };


languages.LangDataService.prototype.getApi = function() {
    return this.isDataReady = this.http_.jsonp(URL, {
        params: {}
      })
      .success(function(APIData) {
        return APIData.map(function(item){
              return item + 1; //just an example.
         });
      });
};

A Ctrl using LandDataService:

languages.LanguageCtrl = function(langDataService) {
   languages.langDataService.isDataReady.then(function(data){
       console.log('whooo im a transformed dataset', data);
   });
}

Viktor Kukurba · Accepted Answer · 2016-02-08 21:29:41Z

1

Use then instead of success in getApi function.

answered Feb 8, 2016 at 21:29

Viktor Kukurba

1,3709 silver badges14 bronze badges

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

1 Comment

John Abraham Over a year ago

For some reason when you put a then it wraps the data in a data key .. and I refused to read the errors and thought it was angular not working. Thanks.

malix · Accepted Answer · 2016-02-08 21:45:41Z

Try a version of the following: https://jsfiddle.net/L2ndft4w/

// define the module for our AngularJS application
var app = angular.module('App', []);

app.factory('LangDataService', function($q,$http) {

  return {
    getApi: function() {
      var defer= $q.defer();
      $http({
          url: 'https://mysafeinfo.com/api/data?list=zodiac&format=json&alias=nm=name',
          dataType: 'json',
          method: 'GET',
          data: '',
          headers: {
              "Content-Type": "application/json"
          }
      }).
      success(function (data) {

          defer.resolve(data.map(function(item){
            return item.name;
          }));
      })    
      return defer.promise;
    }  
  };
});

// invoke controller and retrieve data from $http service
app.controller('DataController', function ($scope, LangDataService) {
  LangDataService.getApi().then(function(data){
    $scope.data = JSON.stringify(data, null, 2);
  });
});

Returns:

[
  "Aquarius",
  "Aries",
  "Cancer",
  "Capricorn",
  "Gemini",
  "Leo",
  "Libra",
  "Ophiuchus",
  "Pisces",
  "Sagittarius",
  "Scorpio",
  "Taurus",
  "Virgo"
]

Although, since $http is already a promise, there's probably a shorter way to do this... ($q.when?)

Collectives™ on Stack Overflow

How to return transformed data from a $http.json request in angular?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related