0

In JS file, we're collecting some data on home page and sending to JS function called sendPageData() as an input parameter. In this sendPageData() function, we're calling $.ajax call and merging this ajax call response with input parameter. This activity is being done on page load. Finally we're merging input parameter array and ajax response array but ajax call response is missing in final array response because $.ajax call take sometime to respond since it's back-end call. One option is to create one controller rendering component, call REST API call to fetch data and keep the response object in script tag. This way when JS function is called after page load, this object can be used. Is there any better way to capture REST API response on page load?

3 Answers 3

0

Instead of merging the AJAX response with the input parameter immediately, you can modify your code to handle the AJAX response asynchronously. This means that you would move the code that merges the response with the input parameter inside the AJAX success callback function. This way, the merging will only occur once the AJAX call has completed and the response is available.

function sendPageData(inputParameter) {
  $.ajax({
    url: 'your-api-url',
    success: function(response) {
      // Merge the response with the input parameter here
      var mergedData = mergeData(inputParameter, response);

      // Use the merged data
      // ...
    }
  });
}

function mergeData(inputParameter, response) {
  // Merge the input parameter array and the response array here
  // ...

  return mergedArray;
}

// Call the sendPageData function on page load
$(document).ready(function() {
  var inputParameter = // Collect data from the home page
  sendPageData(inputParameter);
});
1
  • Yeah this works. I think main point is to implement logic inside AJAX success function which is right place because that's where we're getting response back
    – Sukhjeevan
    May 10, 2023 at 12:20
1

One of the options would be if you create a new function and call it after

success() it will make sure Ajax call response is available basically make a chain of function calls, also you can use local/session storage to store response if it's same in every response. Note: make async:true so that it will not hold back other requests

$.ajax({
        url: '/api/sitecore/GlobalHeader/GetGlobalHeaderBanner',
        async: true,
        success: function (bannerHtml) {
            UpdateGlobalHeaderBannerSessionObject(bannerHtml);
        },
        error: function (error) {
            console.log(error);
        }
    });
0

You can also think of updating your logic to pass your input parameter into the AJAX call. To do this you can create a model like below.

public class DataViewModel
{
    public string Property1 { get; set; }
}

And call your AJAX request to post this data to your controller.

$.ajax({
    url: '/api/sitecore/{controller}/{action}',
    data: { Property1: '<your-data>' },
    type: 'post',
    success: function () {
        
    },
    error: function () {
        
    }
});

Then perform the logic on the backend and finally merge both responses to create a final response JSON object. And this way it will not miss the response and you will get the desired result.

Hope this works for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.