jQuery when（）不适用于多个ajax调用

Question

I have a JavaScript method where we have to invoke multiple ajax calls and use that data when all available. We have used jQuery .when for this situation. But the data received using jQuery when method is different from when it is executed separately (just the ajax call).

Below is the method call and data received.

Whenever I call same ajax method, data has all the elements but when I call it using when method it is wrapped within an array. Could you please let me know what is missing or how to extract the data.

  function retailerProfile(){
    $("#retailerProfileBody").empty();
    $('#retailerProfile').modal('show');


    $.when($.ajax({
                url: 'products/getAllProductsByCategory.json',
                dataType: "json",
                type: "POST",
                data: {


                },
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Accept", "application/json");
                    xhr.setRequestHeader("Content-Type", "application/json");
               }
               }), 
               $.ajax({
                   url: 'useroperation/findRetailerByUserName.json',
                   dataType: "json",
                   type: "POST",
                   data: {


                   },
                   beforeSend: function(xhr) {
                       xhr.setRequestHeader("Accept", "application/json");
                       xhr.setRequestHeader("Content-Type", "application/json");


          }
                })).done(function( products,data){
                console.log( "user :"+data.user);
                console.log( "data :"+data);
    console.log( "products :"+products);
    var profile = '<div id="'+data.id +'">'
                +'<div class="well well-sm">'
                +'<div class="row">'
                +'<div class="col-sm-4 col-md-6"><h4>'+data.user.firstName+' '+data.user.lastName+'</h4>'
                +'<address>'
          +'<strong>'+data.shopName+'</strong><br/>'
          +data.address.addrLine1+'<br/>'
          +data.address.addrLine2+'<br/>'
          +data.address.city+'<br/>'
          +data.address.state+'<br/>'
          +'<abbr title="Phone">P:</abbr> '+((!data.user.mobile)?'':data.user.mobile)
                +'</address>'
                +'<p>'
                +'<i class="glyphicon glyphicon-envelope"></i> '+data.user.email
                +'<br/><i class="glyphicon glyphicon-map-marker"></i> '+data.address.locality
                +'</p>'
                +'</div>';
                profile+='<div class="col-sm-4 col-md-6"><h4>Products</h4><br/>'
                +'<ul class="list-group">';
                $.each(data.products,function(k,product){
                profile+='<li class="list-group-item">'+ product.productName +'('+product.category +')</li>';
                });
                profile+='</ul>'
                +'</div>'
                +'</div>'
                 +'</div>'
           +'</div>'
           ;


        $("#retailerProfileBody").append(profile);
    });


    }

Console Log: data :[object Object],success,[object Object] products :[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],success,[object Object]

Answer 1

The difference is because of when function behavior. in when function each argument is an array with the following structure: [ data, statusText, jqXHR ].