Utilizing an AngularJS factory to retrieve JSON data from the server

Question

Utilizing an AngularJS factory to retrieve JSON data from the server

I have a large JSON object in my controller that I want to move to a separate file. Currently, this is how I'm approaching it:

myApp.controller('smController', ['$scope', function($scope) {
  ...
  var stadtmobilRates = {
    classic: {
      A: {
        night: 0,
        hour: 1.4,
        day: 21,
        week: 125,
        km000: 0.2,
        km101: 0.18,
        km701: 0.18
      },
      ...
    }
  };

I've implemented a factory and promises following the guidance provided here on Stackoverflow:

myApp.factory('stadtMobilRates', function($http) {
  var promise = null;

  return function() {
    if (promise) {
      // If we've already requested this data before,
      // return the existing promise.
      return promise;
    } else {
      promise = $http.get('stadtmobilRates.json');
      return promise;
    }
  };
});

myApp.controller('smController', ['$scope', function($scope, stadtMobilRates) {
  var stadtmobilRates = null;
  stadtMobilRates().success(function(data) {
    stadtmobilRates = data;
  });

Now I'm encountering a

TypeError: undefined is not a function

at the

stadtMobilRates().success(function(data) {

line. Why isn't the stadtMobilRates factory being recognized even though I injected it into the controller?

Edit #1: I added the factory name to the array as advised by prawn.

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {
  var stadtmobilRates = null;
  stadtMobilRates().success(function(data) {
    stadtmobilRates = data;
  });

  console.log(stadtmobilRates);

However, stadtmobilRates is still null?

Edit #2: I created a simplified version of my app on Plunker. It works there. In my full app, which involves different routes, stadtmobilRates remains null. Unfortunately, creating a Plunker for the complete app with routes is not feasible. So, here is the full code on GitHub. The snippet above is from Line 159. I suspect it might be related to my routes?

javascript json angularjs factory

Answer 1

Answer №1

Make sure to include the name of the factory in the array when passing it. The array should consist of strings followed by the function itself, keeping it in sync with the parameters in the function declaration. This allows the injector to know which services to inject into the function.

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {

EDIT

Here's how I would handle it... When using routes, I prefer using resolve to load and store data once. In the $routeProvider, I would adjust the smController part as follows...

 when('/sm', {
      templateUrl: 'partials/sm.html',
      controller: 'smController',
      resolve:{
              load:function(stadtMobilRates){
                  return stadtMobilRates.LoadData();
          }
    }).

I've also made some changes to the factory

myApp.factory('stadtMobilRates', function ($q, $http) {
var mobilRates = null;

function LoadData() {
    var defer = $q.defer();
    $http.get('stadtmobilRates.json').success(function (data) {
        mobilRates = data;
        defer.resolve();
    });
    return defer.promise;
}

return {
    GetData: function () { return mobilRates ; },
    LoadData:LoadData
}
});

This route will now call the LoadData function in the factory before loading. Once the data is loaded, it resolves the promise so the LoadData function is only called once. After resolving the promise, it proceeds to load the view.

In your controller, you can simply retrieve the data by calling the GetData function

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) 
{
     var stadtmobilRates = stadtMobilRates.GetData();
});

Answer 2

Make sure to include the name of the factory in the array when passing it. The array should consist of strings followed by the function itself, keeping it in sync with the parameters in the function declaration. This allows the injector to know which services to inject into the function.

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {

EDIT

Here's how I would handle it... When using routes, I prefer using resolve to load and store data once. In the $routeProvider, I would adjust the smController part as follows...

 when('/sm', {
      templateUrl: 'partials/sm.html',
      controller: 'smController',
      resolve:{
              load:function(stadtMobilRates){
                  return stadtMobilRates.LoadData();
          }
    }).

I've also made some changes to the factory

myApp.factory('stadtMobilRates', function ($q, $http) {
var mobilRates = null;

function LoadData() {
    var defer = $q.defer();
    $http.get('stadtmobilRates.json').success(function (data) {
        mobilRates = data;
        defer.resolve();
    });
    return defer.promise;
}

return {
    GetData: function () { return mobilRates ; },
    LoadData:LoadData
}
});

This route will now call the LoadData function in the factory before loading. Once the data is loaded, it resolves the promise so the LoadData function is only called once. After resolving the promise, it proceeds to load the view.

In your controller, you can simply retrieve the data by calling the GetData function

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) 
{
     var stadtmobilRates = stadtMobilRates.GetData();
});

Utilizing an AngularJS factory to retrieve JSON data from the server

Answer №1

Similar questions

What mechanism does the useState() function utilize in React to fetch the appropriate state object and function for a functional component when employing the state hook?

I am facing an issue where reducing the size of the renderer is causing my click events to be offset. What steps can I

Managing additional components in request JSON when communicating with DialogFlow, previously known as Api.ai

Executing a function when a webpage loads in Javascript

Navigating through JSON arrays with Node.js

Flowtype: Utilizing type hints for class-based higher order component

Positioning pop-up windows using Javascript and CSS techniques

What steps can I take to guarantee that a directive's link function is executed prior to a controller?

Is there a way to prevent items in Dropbox from being selected?

Error encountered: iPad3 running on iOS7 has exceeded the localStorage quota, leading to a

Error in Java DynamoDB Streams Lambda: Unable to convert a floating-point value to a date in type `java.util.Date` (token `JsonToken.VALUE_NUMBER_FLOAT`)

Error occurred due to an invalid element type with the imported React component

Combining two lists in immutable.js by flattening and zipping

There seems to be an issue with FastAPI not sending back cookies to the React

Error: Uncaught ReferenceError: d3 is undefined. The script is not properly referenced

Is there a way to enhance the functional purity by creating a single function that subscribes and returns a

Make sure to enable contentEditable so that a <br> tag is inserted

Encountered an issue while trying to assign a value to the 'value' property on an 'HTMLInputElement' within a reactive form

I am experiencing issues with the ng-dropdown-multiselect library and it is not functioning

How do I return a <div> element to its initial state after JavaScript has made changes to it?