how can i access variables in different javascript functions on the same factory?

Question

im trying to build an instagram feed app with ionic framework and i created a factory to handle my html requests so i can use them on my controllers, thing is, with instagram API, theres a value on the json array called next_url that i need to load the Older Photos/posts so: This is my factory:

app.factory('PersonService', function($http){
var BASE_URL = "https://api.instagram.com/v1/tags/sometag/media/recent?access_token=+++";
var items = [];
var nextUrl = 0;

return {
  GetFeed: function(){
  return $http.get(BASE_URL+'&count=10').then(function(response){
    items = response.data.data;
    **nextUrl = response.data.pagination.next_url;**

    return items;

  });
},
GetNewPhotos: function(){
  return $http.get(BASE_URL+'&count=2').then(function(response){
    items = response.data.data;

    return items;
  });
},
GetOldPhotos: function(){
  return $http.get(**nextUrl**).then(function(response){
    items = response.data.data;
    return items;
  });
}
}
});

I want to use the nextUrl = response.data.pagination.next_url; from GetFeed function to get the next_url and use it on the GetOldPhotos function that will use the nextUrl to load the older photos, i dont think i can return 2 values from the same function and i think $scope isnt an option in factory.

I know there could be more than one way to achieve this but i just started with ionic, angular, and javascript and im realy stuck here and would be great if i could get some "guidance" :D Sorry for any grammar, syntax, or any other error in this post and thank you in advance!

Answer 1

You could return an object from GetFeed() with both values:

return {items: items,
 nextUrl = response.data.pagination.next_url
};

Or an array:

return [items, response.data.pagination.next_url];

And then pass that back on to GetOldPhotos as a parameter. I would let the caller hold state.

Are you saying that when you set the nextUrl variable in GetFeed, it's not available in the getOldPhotos function? That surprises me. It should work.

Answer 2

You can assign value to private variables in your factory without returning.

 var app = angular.module('test', []); app.factory('PersonService', function($http) { var BASE_URL = "https://api.instagram.com/v1/tags/sometag/media/recent?access_token=+++"; var items = []; var nextUrl = 0; return { GetFeed: function() { return $http.get1(BASE_URL + '&count=10').then(function(response) { items = response.data.data; nextUrl = response.data.pagination.next_url; }); }, GetNewPhotos: function() { return $http.get1(BASE_URL + '&count=2').then(function(response) { items = response.data.data; }); }, GetOldPhotos: function() { return $http.get1(nextUrl).then(function(response) { items = response.data.data; }); } } }); app.controller('Test', function($scope, $http, $q, $timeout, PersonService) { // DO NOT COPY // adding function in $http for demo purpose only $http.get1 = function(url) { var d = $q.defer(); $scope.status = "requesting URL " + url + " (fake)..."; $timeout(function() { d.resolve({ data: { data: ["data 1", "data 2"], pagination: { next_url: "this is next url" } } }); }, 1000); return d.promise; } // END DO NOT COPY $scope.person = PersonService; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> <div ng-app='test' ng-controller='Test'> <button type="button" ng-click="person.GetFeed()">GetFeed</button> <button type="button" ng-click="person.GetNewPhotos()">GetNewPhotos</button> <button type="button" ng-click="person.GetOldPhotos()">GetOldPhotos</button> <br>{{status}} </div>