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