Ajax requests can form a pyramid of doom when multiple asynchronous calls are structured

My JavaScript application requires making an ajax call and potentially more calls based on the previous response. Currently, I have implemented this using a somewhat cumbersome pyramid of doom:

function startParentArray(id) {
    getIssueDetail(id).success(function(data) {
        var source = $("#parenttemplate").html();
        var tpl = Handlebars.compile(source);
        processResponse(data, tpl);       
    });
}

function processResponse(data, tpl) {
    if (data.issue.parent) {
        nextparent = data.issue.parent.id;
        makeAjaxCall(nextparent, tpl);
    }
}

function makeAjaxCall(parentId, tpl) {
    getIssueDetail(parentId).success(function(data) {
        $("#parenttable").append(tpl(data.issue));
        if (data.issue.parent) {
            makeAjaxCall(data.issue.parent.id, tpl);
        }
    });
}

Is there a cleaner way to achieve this behavior, perhaps using a while-loop or other approach?

javascriptajax

Answer №1

If you're in search of a solution, consider exploring promises. Personally, I find this resource quite helpful. Don't forget that jQuery also offers a similar feature with $.Deferred, even though it may not adhere to the standards set by A+ promises

Credit for this information goes to Kris Kowal's q

Promises have the ability to prevent the "Pyramid of Doom," where code stretches out horizontally faster than it progresses vertically.

Answer №2

I haven't had a chance to run this code myself, but it looks like it could do the trick

function initializeParentArray(id) {
    var template = $("#parenttemplate").html();
    var compiledTemplate = Handlebars.compile(template);

    processArray(compiledTemplate, id);
}

function processArray(compiledTemplate, parent){
    getIssueDetails(parent).success(function(data) {
        $("#parenttable").append(compiledTemplate(data.issue));
        if(data.issue.parent) {
            processArray(compiledTemplate, data.issue.parent.id);
        }
    });
}

Since you're repeating the same logic in all of your success callbacks, this method might simplify things for you.

Answer №3

If you want to make multiple AJAX requests in jQuery, you can utilize the $.when() method

$.when( $.ajax( "/data1.php" ), $.ajax( "/data2.php" ) )
      .done(function( response1, response2 ) {
      // Handle the responses from data1.php and data2.php here
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to create a scrollable div with the help of Javascript

I am currently developing a web app on the Tizen platform. Within my HTML5 code, I have a div element with an image set as its background. In certain scenarios, I need to display random text within this div multiple times. The text can vary in size and ma ...

javascripthtmltizentizen-web-app

"Exploring the possibilities of Ajax in conjunction with Sol

I recently completed a tutorial on Ajax Solr and followed the instructions in step one. Below is the code I wrote: header.php: <script type="text/javascript" src="static/js/ajax-solr/core/Core.js"></script> <script type="text/javascript" s ...

javascriptjqueryajaxsolr

Warning: Neglecting to handle promise rejections is now considered outdated and discouraged

I encountered this issue with my code and I'm unsure how to resolve it. DeprecationWarning: Unhandled promise rejections are deprecated. In the future, unhandled promise rejections will terminate the Node.js process with a non-zero exit code. This ...

javascriptnode.jsmongodbexpress

In Internet Explorer 11, the Content-Type setting is not functional and may cause issues with certain functionalities

My initial attempt to solve the issue involved using the method beginQuoteFileUnquoteUpload1, which created a proper boundary and Content-Type. However, upon receiving the file, I discovered that it was corrupted :( var formData = new FormData(); formD ...

javascriptjqueryajaxxmlhttprequest

Determining the scroll position of a JQuery Mobile collapsible set upon expansion

I am utilizing jQueryMobile (v1.4.0) collapsible set / accordions to showcase a list of elements along with their content, which can be seen in this jsFiddle. <div id="List" data-role="collapsible-set"> <div data-role="collapsible" data-conte ...

javascriptjquery-mobilemobilescrolljquery-mobile-collapsible

Range slider position not being updated after user interaction

I am working on a webpage with an embedded video and a range slider that serves as a progress bar. Using Javascript, I update the value of the range slider as the video plays, allowing users to navigate through the video content. However, I have encounter ...

javascripthtml

The action method does not get triggered when using $.ajax POST if the text being sent includes the character "<"

On my company's intranet site, I am facing an issue with displaying and submitting text. Here is the code snippet that I am using: @Html.TextAreaFor(model => model.Text) The problem arises when the text in the textarea contains XML-like formattin ...

jqueryajaxjsonasp.net-mvchtml-escape-characters

Enabling a download through PHP and jQuery

Although there are already numerous inquiries regarding how to force a download using PHP, I am struggling to pinpoint my mistake and determine the correct course of action. I have a list containing filenames, and my objective is to enable users to downlo ...

phpjqueryajaxdownload

Material Design Forms in Angular: A Winning Combination

I'm currently working on developing a form using Angular Material. This form allows the user to update their personal information through input fields. I am utilizing "mat-form-field" components for this purpose. However, there are certain fields tha ...

javascripthtmlangularformsangular-material

Issue with jquery curvy corners not functioning properly on Internet Explorer 8

Check out my website at If you view the page in IE8 and then in IE7 compatibility mode, you'll notice a strange issue. The box on the right disappears in IE8 but displays perfectly rounded corners in IE7. I am currently using the jQuery Curvy Corner ...

javascriptjqueryhtmlcsscurvycorners

Issue with npm installation leading to missing node_modules directory

When attempting to run npm install . in a local directory, I keep encountering the following errors: npm ERR! install Couldn't read dependencies npm ERR! Darwin 15.2.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "." npm ERR! no ...

javascriptnode.jsnpm

A Nuxt plugin that integrates a separate website into the serverMiddleware

The concept Imagine having a main Nuxt website just like any other. Now, think about adding my module to your project. This module will then introduce a subdomain "admin.example.com" to your project, creating a fully functional Nuxt-based website that ope ...

javascriptnode.jsexpressvue.jsnuxt.js

When choosing the child option, it starts acting abnormally if the parent option is already selected in Angular

I am encountering an issue while trying to select the parent and its children in the select option. The concept is to have one select option for the parent and another for the child. I have parent objects and nested objects as children, which are subCatego ...

javascripthtmlangulartypescript

I wonder what the response would be to this particular inquiry

I recently had an angular interview and encountered this question. The interviewer inquired about the meaning of the following code snippet in Angular: code; <app-main [type]="text"></app-main> ...

javascriptangulartypescriptsingle-page-applicationangular8

What is the correct method of implementing the "OnChange" event to a WooCommerce select element?

My task is to include the onchange="myFunction()" in the select menu below. However, because the select menu is part of woocommerce, I want to ensure that the onchange="myFunction()" remains intact even after updating my theme. How can I achieve this goal ...

javascripthtmlwordpresswoocommercewordpress-theming

The submit button remains unresponsive, yet upon removing its JavaScript code, it functions smoothly

This is the content of my index.html file. It contains JavaScript code. However, there seems to be a problem with the JavaScript validation as the Submit button does not perform any action when clicked. Surprisingly, when I remove the JavaScript code, the ...

javascripthtml

The submit function in jQuery is failing to send the form data when used with input types of submit

I need help submitting a form with two different submit buttons. Below is the HTML code: <form enctype="multipart/form-data" id ="type-1" accept-charset="UTF-8" action="process_upload.php" method="post" onsubmit="return Genome_upload_validation()" > ...

jqueryajax

a script in JavaScript that retrieves the selected value from a radio button box

I have an AJAX table where I need to highlight one of the rows with a radio box on the left side. However, I lack proficiency in JavaScript and would like assistance in retrieving the value of the radio box by its ID from this table once it has been select ...

phpjavascriptajax

How can I display color without using Winston's color formatter in text?

Currently, I am in the process of developing a logging module using winston as the selected logging framework. It offers the convenience of specifying colors, which is particularly appealing when utilizing the Console transport. However, if I were to defin ...

javascriptnode.jsexpressloggingwinston

Utilizing HTML5 to automatically refresh the page upon a change in geolocation

I have a web application built with AngularJS. One of the functionalities is activated only when the user is in close proximity to specific locations. To make this work, I can constantly refresh the page every 5 seconds and carry out calculations to dete ...

javascripthtmlangularjsgeolocation