In my current project, I am working on creating charts for a web application. The data for these charts originates from a single object fetched from a webservice in Java. Below is the general format of the JSON object that I am retrieving:
{ "chart1Info": [9, 42, 43, 7, 20], "chart2Info": [45, 3, 21, 34] (...and so on)}
Within my app.js file, where my AngularJS code resides, I have set up 7 controllers corresponding to the 7 different charts. Each controller makes a call to the same service to fetch the aforementioned object containing all the necessary information.
app.controller('chart1', function($scope, $http){
$http.get('//WEBSERVICE_PATH').then(function(response) {
$scope.chartData = response.data; //This holds the JSON object
//Subsequently, I proceed with chart creation logic...
});
});
The goal here is to make just one service call and store the object so that each controller can access it effectively, given that it remains identical across all instances. I attempted to use a main controller which encapsulates all other controllers, setting a property on $rootScope to hold the JSON object like so:
$rootScope.chartData = response.data;
//Executed within the $http.get() method
Despite this approach, the object was found to be undefined in the subsequent controllers. Any insights provided will be greatly appreciated.