Working with two URLs in ajax

Question

I have to get values from two different URLs and then to merge it. I know it would much better if i'll get all of the data in one URL, but that's how i've got and i need to work with it.

I want to print out the value of a_value, but it's been printed out while b hasn't returned his value. I've read some articles of how to make the functions synchronous but still don't know how to implement it into my code, and don't know what is the best solution for my case. I'm pretty new with JavaScript and still need some help and guiding.

  function any_function() {
        $.ajax(
            {
                url : '/url1',
                type: "GET",
                success:function(data, textStatus, jqXHR)
                {
                    $("#print").html(a(data));
                }
            });
        }


    function a(data){

        x = 'any value' //`do something with data and insert to this variable`
        a_value =  x + b(`some id that extracted from data`)

        return a_value
    }


  function b(id){
    $.ajax({
                url: '/url2', 
                type: 'GET',
                success: function (data, textStatus, jqXHR) {
                    b_value = c(data, id)  
                }
            });
   return b_value
  }


  function c(data, id){
        //do something with `data` and return the value
        return c_value
    }

using promises is the way to go https://api.jquery.com/promise/ — martskins, Mar 26 '16 at 18:36

score 4 · Accepted Answer · 2016-03-26T20:45:01.990

4

function f() {
    var request1 = $.ajax({
        url : '/url1',
        type: 'GET'
    });
    var request2 = $.ajax({
        url: '/url2', 
        type: 'GET'
    });
    $.when(request1, request2).done(function(result1, result2){
        data1 = result1[0]
        data2 = result2[0]
        // r1 and r2 are arrays [ data, statusText, jqXHR ]
        // Do stuff here with data1 and data2
        // If you want to return use a callback or a promise
    })
}

edited Mar 26 '16 at 20:45

answered Mar 26 '16 at 18:42

Thanks for the answer. Where should i find the data the has been pulled by ajax? Is it suppose to be in the variables `url1` and `url2`? – Omri Mar 26 '16 at 19:14
@Omri data is in result1 and result2 – Mar 26 '16 at 19:18
Thanks! I have the whole object in result1 and result2. How can i get only his data? I my ajax success `data` had only the relevant json, while in your code o have the whole object. – Omri Mar 26 '16 at 20:28
@Ormi result1.data and result2.data – Mar 26 '16 at 20:32
I've tried `result1.data['result']` and got `Uncaught TypeError: Cannot read property 'result' of undefined`. The name of the json root is `result`. – Omri Mar 26 '16 at 20:38
Thanks for the help. I've got `Uncaught ReferenceError: data1 is not defined`. On the debugger i see that `result1 = [Object, "success", Object]`. – Omri Mar 26 '16 at 20:59
I've submitted another question: http://stackoverflow.com/questions/36241389/json-parsing-in-javascript-issue – Omri Mar 26 '16 at 22:00
@Ormi if you found this help full can you accept my answer – Mar 26 '16 at 23:47
Done. Thank you so much for the help. I still have some issue with the json, but it's not related to the main question. – Omri Mar 27 '16 at 05:56
Can you show me how should i return a value for this function? (callback or promise. No matter what). Now everything works fine and the function return the right value. However, nothing happen after trying to print out the return value in HTML. – Omri Mar 28 '16 at 08:45
@Omri jQuery Promises: http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html – Mar 28 '16 at 12:00
@Ormi Callbacks: http://recurial.com/programming/understanding-callback-functions-in-javascript/ – Mar 28 '16 at 12:01

score 0 · Answer 2 · answered Mar 26 '16 at 18:38

0

This can be done in a synchronous-looking fashion with promises:

$.get(url1)
.then(function(data1){
  return $.get(url2)
})
.then(function(data2){
  return $.get(url3);
})
.then(function(data3){
  // All done
});

answered Mar 26 '16 at 18:38

Joseph

117,725
30
181
234

Thanks for your answer. As i said above, i don't have a vast of experience with JavaScript. Can you show me how exactly should i use my ajax call in your code? Do i just need to replace `url1` with the real url? – Omri Mar 26 '16 at 19:12
The requests can be done in parrallel which would be faster – Mar 26 '16 at 19:20

score 0 · Answer 3 · answered Mar 26 '16 at 18:38

0

You just need to make the second call in the success handler of the first one:

function any_function() {
    $.ajax({
            url : '/url1',
            type: "GET",
            success:function(data, textStatus, jqXHR) {
                $("#print").html(a(data));
                b("someId");
            }
    });
 }

 function a(data){

    x = 'any value' //`do something with data and insert to this variable`
    a_value =  x + b(`some id that extracted from data`)

    return a_value;
 }

function b(id){
  $.ajax({
            url: '/url2', 
            type: 'GET',
            success: function (data, textStatus, jqXHR) {
                b_value = c(data, id);  
                return b_value;
            }
  });
}


function c(data, id){
    //do something with `data` and return the value
    return c_value
}

answered Mar 26 '16 at 18:38

Scott Marcus

64,069
6
49
71

1

It would be better to do both requests in parrallel – Mar 26 '16 at 18:44
The user is asking about a way to do it synchronously, not in parallel. – Scott Marcus Mar 26 '16 at 18:45
The user wants to run code once both requests are done – Mar 26 '16 at 18:47
And, if the requests happen synchronously, that can be achieved. – Scott Marcus Mar 26 '16 at 20:21
True, but it would be faster if they were parallel – Mar 26 '16 at 20:23

Working with two URLs in ajax

3 Answers3