jQuery- How to split variable into two different ajax requests, then work with success data

Question

I am making an ajax request and working with the success data. The problem is that the URL receiving the request can only work with one word at a time. So, if the query being sent contains a space, it breaks.

How do I check the incoming query, and send a separate ajax request for each word (if it contains more than one), then work with the data for both?

function get_syn(query) {

var words = query.split(' ',2); // this is how I'm splitting it up. 2 words max

jQuery.each(words, function(index, item) { // I'm using each to loop through the words

    $.ajax({ 
        type: 'GET',
        url: 'http://www.example.com?query='+item, 

        success: function (data) {

           // do some stuff with the results...

        } // end success function

    }); // end ajax

}); // end for each words

// outside of the each loop, I can not access the data

} // end function

The problem is I need to work with the data from both words together. The only way I've figured out how to do this is by using async but there HAS to be another way:

    $.ajax({ 
        type: 'GET',
        async: false,
        url: 'http://www.example.com?query='+item, 

        success: function (data) {

            var json = $.parseJSON(data);

            if (index == 0) { // first word
                firstword_data = json.data['array'];
            } else { // if second word (there will only be a max of 2)
                secondword_data = json.data['array'];

                testfx(firstword_data);
            } // end if second index

        } // end success function

    }); // end ajax

}); // end for each words

alert(firstword_data); // this works

} // end function

Why, you can create another function containing your AJAX request, and trigger it when the first one receives a success one. — Eric Wu, Aug 10 '14 at 19:08
From what I understand, you are trying to synchronize multiple ajax calls [i.e. all of them run in parallel but you need to aggregate the response from all of them as a final answer]. Here are a couple of related questions : http://stackoverflow.com/questions/4368946/javascript-callback-for-multiple-ajax-calls http://stackoverflow.com/questions/19681057/is-there-a-way-to-synchronize-ajax-calls http://stackoverflow.com/questions/9174267/synchronize-three-ajax-requests — TJ-, Aug 10 '14 at 19:11

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Since functions are first class objects in JavaScript, you could accumulate the results from individual AJAX calls in the function that actually processes the data. For example, you might try:

function get_syn(query) {

    var words = query.split(' '); // Split the query, now works with more than 2 words

    function doStuff(result_index, data) {
        doStuff.results[result_index] = data;
        doStuff.num_results++;
        if(doStuff.num_results == doStuff.num_query_items) {
            results = doStuff.results.join(" ");
            // process the data from all words
        }
    }
    doStuff.results = [];
    doStuff.num_results = 0;
    doStuff.num_query_items = words.length;

    jQuery.each(words, function(index, item) { // I'm using each to loop through the words

        $.ajax({ 
            type: 'GET',
            url: 'http://www.example.com?query='+item, 

            success: function (data) {
                doStuff(index, data);
            } // end success function

        }); // end ajax

    }); // end for each words

    // outside of the each loop, I can not access the data

} // end function

Note that the results array that the doStuff function contains would get 'reset' every time get_syn was called. Additionally, this method preserves the order of the actual query elements in the result, so even if the very first word takes longer to return for some reason, it is still entered in as the first element in doStuff.results.

jQuery- How to split variable into two different ajax requests, then work with success data

1 Answers1