Using ui-router to pass promise results to nested resolves

Question

Using ui-router to pass promise results to nested resolves

I am currently using ui-router with nested resolve configurations like this :

    $stateProvider
         .state('route', {
             url: '/route',
             templateUrl: 'mypage.aspx',
             resolve: {
                 getjson: function (readJson,$http) {
                     var readjsonget = $http.get('files.json');
                     readjsonget.then(function (result) {
                         return result.data;                             
                     }, function (ex) {
                         console.log('GET error', ex);
                     });                         
                 },
                 load: function ($q, filesInject, getjson) {
                     files = getjson;
                     $log.info(2);
                     return $q.all(files.mape(filesInject.inject));
                 }
             }
         })

I have been attempting to pass the content of a JSON file to the second resolve function.

Despite trying multiple approaches, I consistently encounter the issue where the promise success is only triggered after the second function execution.

Any suggestions on how I can address this dilemma?

javascript angularjs json angular-ui-router

Answer 1

Answer №1

Make sure to include a return statement in the promise readjsonget.

$stateProvider
     .state('route', {
         url: '/route',
         templateUrl: 'mypage.aspx',
         resolve: {
             getjson: function (readJson, $http) {
                 var readjsonget = $http.get('files.json');
                 return readjsonget.then(function (result) {
                     return result.data;                             
                 }, function (ex) {
                     console.log('GET error', ex);
                 });                         
             },
             load: function ($q, filesInject, getjson) {
                 files = getjson;
                 $log.info(2);
                 return $q.all(files.map(filesInject.inject));
             }
         }
     })

Answer 2

Make sure to include a return statement in the promise readjsonget.

$stateProvider
     .state('route', {
         url: '/route',
         templateUrl: 'mypage.aspx',
         resolve: {
             getjson: function (readJson, $http) {
                 var readjsonget = $http.get('files.json');
                 return readjsonget.then(function (result) {
                     return result.data;                             
                 }, function (ex) {
                     console.log('GET error', ex);
                 });                         
             },
             load: function ($q, filesInject, getjson) {
                 files = getjson;
                 $log.info(2);
                 return $q.all(files.map(filesInject.inject));
             }
         }
     })

Answer 3

Answer №2

How about trying a code snippet like the following:


    $stateProvider
      .state('page', {
          url: '/page',
          templateUrl: 'mywebsite.php',
          resolve: {
              fetchData: function (fetchData, $http) {
                  var deferred = $q.defer();
                  var requestData = $http.get('data.json');
                  requestData.then(function (response) {
                      deferred.resolve(response);          
                  }, function (error) {
                      deferred.reject(error);
                  });          
                  return deferred.promise;               
              },
              process: function ($q, dataHandler, fetchData) {
                  var deferred = $q.defer();
                  content = fetchData;
                  $log.log(3);
                  content.then(function(result){
                      deferred.resolve(result.map(transformData));
                  }, function(err){
                      deferred.reject(err);
                  });
                  return deferred.promise;
              }
          }
      })

Answer 4

How about trying a code snippet like the following:


    $stateProvider
      .state('page', {
          url: '/page',
          templateUrl: 'mywebsite.php',
          resolve: {
              fetchData: function (fetchData, $http) {
                  var deferred = $q.defer();
                  var requestData = $http.get('data.json');
                  requestData.then(function (response) {
                      deferred.resolve(response);          
                  }, function (error) {
                      deferred.reject(error);
                  });          
                  return deferred.promise;               
              },
              process: function ($q, dataHandler, fetchData) {
                  var deferred = $q.defer();
                  content = fetchData;
                  $log.log(3);
                  content.then(function(result){
                      deferred.resolve(result.map(transformData));
                  }, function(err){
                      deferred.reject(err);
                  });
                  return deferred.promise;
              }
          }
      })

Using ui-router to pass promise results to nested resolves

Answer №1

Answer №2

Similar questions

Angular: Displaying the unique identifiers of a single MongoDB record

Freshening up the data source in a Bootstrap Typeahead using JavaScript

The route you are trying to access is currently unavailable

Comparing $(document).width() to document.body.clientWidth

Angular service that iterates through each $q.promise

How can I prevent the same function from being triggered in an AJAX call and a .scroll event when I click on another div with an onclick attribute

Ways to modify babel output file extensions

Error: Attempting to access a property of an undefined object using method chaining

Set up the FrontEnd and BackEnd on distinct services within the Google Cloud Platform for deployment

Guide on displaying data from a list in aspx with javascript/Jquery from aspx.cs

Issue with running bowerInstall in Grunt

Issue with Component: Data is not being injected into controller from ui-router resolve, resulting in undefined data

Error: Firebase is throwing an error stating that it cannot access the length property of an undefined property

For each error that occurs when there is only one item in the array during a post request

matching equivalent URLs to identical states using an optional parameter in angular-ui-router

Find the variance between the stored date in JSON and the current date using AngularJS

Utilizing jQuery for easy drag-and-drop functionality in web development

sticky navigation causing issues with tab functionality

Alter the input background color steadily through javascript transformation

Regular expressions for identifying operands and operators in a calculator application implemented with JavaScript