Controlling factory JSON data with $http calls using two separate controllers

Question

Controlling factory JSON data with $http calls using two separate controllers

I'm attempting to retrieve a JSON response from a factory, save it as a variable, and make it accessible from two different controllers.

Below is the code I am utilizing:

storyFactory.js

var story = angular.module('story.services', []);

story.factory('storyAudio', [ '$http', function ($http) {

  var json = {};

  function getJSON(story_id, callback) {  
    $http({
      url: 'https://api.domain.co/get/' + story_id,
      method: "GET"
    }).success(function (data) {
      json = data;
      callback(data);        
    });
  };

  return {  
    getSubaudios: function(story_id, callback) {
      getJSON(story_id, function(result) {
        callback(result);
      });
    },
    getTopbar: function(callback) {
      callback(json);
    }
  };
}]);

StoryCtrl.js

var storyCtrl = angular.module('story', ['story.services']);

storyCtrl.controller('storyCtrl', [ 'CONFIG', '$stateParams', 'storyAudio', function(CONFIG, $stateParams, storyAudio) {

  var data = this;
  data.story = {};

  storyAudio.getSubvideos($stateParams.story_id, function(response) {
    data.story = response;
  });

}]);

TopbarCtrl.js

var topbarCtrl = angular.module('topbar', ['story.services']);

topbarCtrl.controller('topbarCtrl', [ 'CONFIG', '$stateParams', 'storyAudio', function(CONFIG, $stateParams, storyAudio) {
  var data2 = this;
  data2.story = {};

  storyAudio.getTopbar(function(response) {
    data2.story = response;
  });    
}]);

The issue lies in the TopbarCtrl response, as I am receiving an empty data2.story when calling it in the HTML.

This is because it lacks a callback for the $http response, causing it to display the var json with the current status, which is an empty object.

Is there a way to load the second controller only when the variable has content?

Thank you in advance.

javascript angularjs

Answer 1

Answer №1

In this scenario, I recommend loading the data using the getSubaudios method and creating a reference to the data for other controllers to utilize. You can achieve this by implementing the following approach...

story.factory('storyAudio', function($http) {
    var factory = {
        story: {}
    };

    factory.getSubaudios = function(story_id) {
        return $http.get('https://api.domain.co/get/' + story_id).then(function(response) {
            return angular.extend(factory.story, response.data);
        });
    };

    return factory;
})

By utilizing angular.extend() instead of directly assigning a value to the factory's story property, any existing references will be preserved even after the data is loaded.

You can then load the data like this:

storyCtrl.controller('storyCtrl', function(storyAudio) {
    var data = this;
    storyAudio.getSubaudios($stateParams.story_id).then(function(story) {
        data.story = story;
    });
})

Subsequently, you can access the story data via reference in your controller:

topbarCtrl.controller('topbarCtrl', function(storyAudio) {
    this.story = storyAudio.story;
})

Answer 2

In this scenario, I recommend loading the data using the getSubaudios method and creating a reference to the data for other controllers to utilize. You can achieve this by implementing the following approach...

story.factory('storyAudio', function($http) {
    var factory = {
        story: {}
    };

    factory.getSubaudios = function(story_id) {
        return $http.get('https://api.domain.co/get/' + story_id).then(function(response) {
            return angular.extend(factory.story, response.data);
        });
    };

    return factory;
})

By utilizing angular.extend() instead of directly assigning a value to the factory's story property, any existing references will be preserved even after the data is loaded.

You can then load the data like this:

storyCtrl.controller('storyCtrl', function(storyAudio) {
    var data = this;
    storyAudio.getSubaudios($stateParams.story_id).then(function(story) {
        data.story = story;
    });
})

Subsequently, you can access the story data via reference in your controller:

topbarCtrl.controller('topbarCtrl', function(storyAudio) {
    this.story = storyAudio.story;
})

Answer 3

Answer №2

My understanding seems correct, but please notify me if it isn't.

There are a couple of issues that I've identified. Firstly, there is a typo present in your StoryCtrl.js file. The function being called is "storyAudio.getSubvideos" whereas it should be "getSubaudios" according to your factory.

Even after correcting the typo, there could still be a potential issue. The timing of the promise return from the initial call is crucial. Since promises operate asynchronously, there is a chance that the "json" variable may not be set before the second controller attempts to access it.

To address this issue, it's essential to ensure that the first call completes before accessing the "json" variable in the service. One approach that comes to mind is to return and store the promise in the service as shown below...

  var dataPromise;
  function getSubaudios(story_id){
        if(!dataPromise){
          dataPromise = $http({
            url: 'https://api.domain.co/get/' + story_id,
            method: "GET"
          });
        }
        return dataPromise;
  }

  return {  
    getSubaudios: getSubAudios
  };

Subsequently, in your controllers, you can simply invoke the service and utilize .then to extract data from the promise upon its return...

storyAudio.getSubaudios($stateParams.story_id).then(function(response){
   data.story = response; //or data2.story = response;
});

For a practical illustration, refer to this plunkr example. I've utilized the $q library to simulate a promise returned from an $http request, showcasing the concept.

Answer 4

My understanding seems correct, but please notify me if it isn't.

There are a couple of issues that I've identified. Firstly, there is a typo present in your StoryCtrl.js file. The function being called is "storyAudio.getSubvideos" whereas it should be "getSubaudios" according to your factory.

Even after correcting the typo, there could still be a potential issue. The timing of the promise return from the initial call is crucial. Since promises operate asynchronously, there is a chance that the "json" variable may not be set before the second controller attempts to access it.

To address this issue, it's essential to ensure that the first call completes before accessing the "json" variable in the service. One approach that comes to mind is to return and store the promise in the service as shown below...

  var dataPromise;
  function getSubaudios(story_id){
        if(!dataPromise){
          dataPromise = $http({
            url: 'https://api.domain.co/get/' + story_id,
            method: "GET"
          });
        }
        return dataPromise;
  }

  return {  
    getSubaudios: getSubAudios
  };

Subsequently, in your controllers, you can simply invoke the service and utilize .then to extract data from the promise upon its return...

storyAudio.getSubaudios($stateParams.story_id).then(function(response){
   data.story = response; //or data2.story = response;
});

For a practical illustration, refer to this plunkr example. I've utilized the $q library to simulate a promise returned from an $http request, showcasing the concept.

Answer 5

Answer №3

Like Phil's response, using Angular extend or angular copy will retain the same references in both controllers. This eliminates the need for watchers in each controller to monitor for changes. There are a few methods available for sharing data between AngularJS controllers, which can be found here.

Alternatively, you can directly bind the object being returned to the update function to ensure the references remain intact.

storyServices.factory('storyAudio', ['$http', function($http) {
  return {
    data: { json: '' },
    getSubaudios: function(story_id) {
      $http.get('http://jsonplaceholder.typicode.com/posts/' + story_id)
        .then(function(response) {
          this.data.json = response.data.body;
        }.bind(this));
    }
  };
}]);

var storyCtrl = angular.module('story').controller('storyCtrl', ['$scope', 'storyAudio', function($scope, storyAudio) {
    $scope.data = storyAudio.data;
    storyAudio.getSubaudios(2);
}]);

var topbarCtrl = angular.module('story').controller('topbarCtrl', ['$scope', 'storyAudio', function($scope, storyAudio) {
    $scope.data2 = storyAudio.data;
}]);

View the Plunk example here with added scopes to demonstrate the outcome.

Sidenote:

Consider it misleading to label a non-controller as "storyCtrl" and then assign it a controller of its own:

var storyCtrl = angular.module(...); // This is not a controller.
storyCtrl.controller(...);   // This is the controller!

Another sidenote:

It's advisable to shift from using .success() to .then(successCallback), as the former is an outdated approach. This switch aligns with the standard convention for promises. More information can be found here.

Answer 6

Like Phil's response, using Angular extend or angular copy will retain the same references in both controllers. This eliminates the need for watchers in each controller to monitor for changes. There are a few methods available for sharing data between AngularJS controllers, which can be found here.

Alternatively, you can directly bind the object being returned to the update function to ensure the references remain intact.

storyServices.factory('storyAudio', ['$http', function($http) {
  return {
    data: { json: '' },
    getSubaudios: function(story_id) {
      $http.get('http://jsonplaceholder.typicode.com/posts/' + story_id)
        .then(function(response) {
          this.data.json = response.data.body;
        }.bind(this));
    }
  };
}]);

var storyCtrl = angular.module('story').controller('storyCtrl', ['$scope', 'storyAudio', function($scope, storyAudio) {
    $scope.data = storyAudio.data;
    storyAudio.getSubaudios(2);
}]);

var topbarCtrl = angular.module('story').controller('topbarCtrl', ['$scope', 'storyAudio', function($scope, storyAudio) {
    $scope.data2 = storyAudio.data;
}]);

View the Plunk example here with added scopes to demonstrate the outcome.

Sidenote:

Consider it misleading to label a non-controller as "storyCtrl" and then assign it a controller of its own:

var storyCtrl = angular.module(...); // This is not a controller.
storyCtrl.controller(...);   // This is the controller!

Another sidenote:

It's advisable to shift from using .success() to .then(successCallback), as the former is an outdated approach. This switch aligns with the standard convention for promises. More information can be found here.

Controlling factory JSON data with $http calls using two separate controllers

Answer №1

Answer №2

Answer №3

Sidenote:

Another sidenote:

Similar questions

Utilizing a loop for setting variable values in JavaScript

Extract URL parameter with AngularJS

What is the best way to enforce a required bindings property in an AngularJS component?

What could be causing the issue with script.onload not functioning properly in a Chrome userscript?

What is the best way to dynamically render classes based on conditions in a table using React Bootstrap?

Remove specific data from jQuery datatables using data attribute

How can we eliminate duplicate arrays of objects within a multi-dimensional array using ReactJS and JavaScript?

Tips for creating a reusable function in React.js?

Stack the labels of separate datasets on top of each bar in a bar chart using Chartjs: How can this be achieved?

Adjust the scroll position when the height of a div is modified

Demonstrate the proper implementation of a Stepper component using Material UI in a React.js

Utilizing JavaScript Objects within AMD modules using RequireJS: A step-by-step guide

What is the best way to incorporate code into an Alexa Skill?

Tips for showcasing all values in a nested array

The reason for setting a variable as void 0 in JavaScript

What could be the reason my ng-style isn't functioning as expected?

Tips for modifying the audio session category in iOS using React Native

What is the best way to condense a repetitive method declaration and make it more concise?

The form is unable to detect invalid fields because of a nested view and inherited model structure

Bootstrap5: Left-aligned Navigation Bar Pills and Right-aligned Text