Home Ask Login Register

Developers Planet

Your answer is one click away!

KasparTr February 2016

Making ajax calls to third party APIs in ionic services.js file?

Started using ionic today and ran into a small bump. The services.js file has a comment // Might use a resource here that returns a JSON array

I want to make an ajax call to an API but I don't know how do declace a custom resource in that services.js file. I will receive a JSON array from that call and will work with the list thre on.

Question: How do I declare a custom variable as a list which makes an ajax call to a third pary API?

angular.module('starter.services', [])

.factory('Chats', function() {
// Might use a resource here that returns a JSON array
 var popularURL = 'SOME_API_RUL';
 var xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function() {
 if (xhttp.readyState == 4 && xhttp.status == 200) {
    var chats = xhttp.responseText;
  }
};
xhttp.open("GET", popularURL, true);
xhttp.send();

return {
  all: function() {
    return chats;
  },
  remove: function(chat) {
    chats.splice(chats.indexOf(chat), 1);
  },
  get: function(chatId) {
  for (var i = 0; i < chats.length; i++) {
    if (chats[i].id === parseInt(chatId)) {
      return chats[i];
    }
  }
  return null;
  }
};

The chats list is never populated. How do a correctly make an ajax call inside the ionic services.js file.

Thank you!

Answers


Mati Tucci February 2016

You can do something like this:

angular.module('starter.services', [])

.factory('Chats', function($http) {

  var API_URL = 'https://api.herokuapp.com';

  return {
    all: function() {
      return $http.get(API_URL + '/chats');
    }
  };
});

And in the controller:

Chats.all().then(function(chats){
  $scope.chats = chats;
})

You can check $http in the docs


KasparTr February 2016

Thanks Mati Tucci. I will post a more detailed awnser here.

Steps:

  1. Declare what controller you want to use in the view inside the app.js file. In my case:

    .state('tab.popular', {
      url: '/popular',
      views: {
        'tab-popular': {
          templateUrl: 'templates/tab-popular.html',
          controller: 'PopularShowsCtrl' //<---CONTROLLER NAME YOU ARE USING
        }
      }
    })
    
  2. Declare a controller in the controllers.js file. In my case:

    .controller('PopularShowsCtrl', function($scope, PopularShows){
       $scope.popShows = PopularShows.all(); //<---$scope.popShows is a declaration and you don't need to declare this variable beforehand.
    })
    
  3. Now you need to declare the method PopularShows.all() in your services.js file. In ionic you can do that with .factory('YOUR_METHOD_NAME', function($http){...}). $http means your method uses http request. In my case:

    .factory('PopularShows', function($http){
    // Might use a resource here that returns a JSON array
      return {
        all: function() {
           return $http.get('YOUR_API_URL');
        },
        get: function(popShowId) {
        // Simple index lookup
          return popShows[popShowId];
        }
      }
    });
    
  4. Handle the popShows variable which is a JSON list in the html file. In my case:

    <ion-view view-title="Popular">
     <ion-content>
      <ion-list>
       <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="popShow in popShows" type="item-text-wrap">
        <h2>{{popShow.name}}</h2>
        <p>{{popShow.popularity}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>
    
        <ion-option-button class="button-assertive" ng-click="remove(popShow)">
          Delete
         </ion-option-button>
        </ion-item>
      </ion-list>    
     </ion-content>
    </ion-view>
    

    The ng-repeat"po

Post Status

Asked in February 2016
Viewed 2,209 times
Voted 9
Answered 2 times

Search




Leave an answer


Quote of the day: live life