call multiple api in one ajax

Question

For example I have a ajax function like below

$.ajax({ 
            url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"119",//getting the api
            type: 'get',
            success: function(data){
                console.log(data.result);
            }
            });

in above it only calls the profile 119 but i'd like to call 118 and 177 too, i'd like to know how to do it in a for loop, because in reality it the number of api we need to call will be unknown

url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"118",
url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"177",

The below is INCORRECT method i just want to give out my think

     $.ajax({ 
                    url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"119",
 '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"118",'/dashboard/getTrend'+'?period=30d' +"&profileId=" +"177",
//getting the api
                    type: 'get',
                    success: function(data){
                        console.log(data.result);
                    }
                    });

UPDATE 1:

//trend chart
        function trend1(){
        $.ajax({ 
        url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"119",//getting the api
        type: 'get',
        success: function(data){
            console.log(data.result) //correct
        }
        });
        }
        function trend2(){
        $.ajax({ 
        url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"120",//getting the api
        type: 'get',
        success: function(data){
            console.log(data.result) //correct
        }
        });
        }

        $.when( trend1(), trend2()).done(function(trend1_data, trend_data){

            console.log(trend1_data.result)
            console.log(trend2_data.result)
        });

i tried to do this is this correct?

UPDATE 2:

function trend1() {
            return $.ajax({
                url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + "119", //getting the api
                type: 'get',
                success: function(data) {
                    console.log(data.result)
                }
            });
        }

        function trend2() {
            return  $.ajax({
                url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + "120", //getting the api
                type: 'get',
                success: function(data) {
                    console.log(data.result)
                }
            });
        }

        $.when(trend1(), trend2()).done(function(trend1_data, trend2_data) {
            console.log(trend1_data.result) //undefined
            console.log(trend2_data.result)//undefined
        });

I tried to modify the function to this but the console.log() inside the when function are not defined, which means it read nothing.

Answer 1

You can't pass multiple URL to $.ajax() method, However jQuery.when() can be used.

$.when( 
    $.ajax( {url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"119", method:"GET"}), 
    $.ajax( {url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"177", method:"GET"}),
)
.done(function( a1, a2 ) {
   // a1 and a2 are arguments resolved for the url1 and url2 ajax requests, respectively.
   // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
});

---

You need to return the promise from your trend1 and trend2 method

//trend chart
function trend1() {
    return $.ajax({
        url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + "119", //getting the api
        type: 'get',
        success: function(data) {
            console.log(data.result)
        }
    });
}

function trend2() {
    return  $.ajax({
        url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + "120", //getting the api
        type: 'get',
        success: function(data) {

        }
    });
}

$.when(trend1(), trend2()).done(function(trend1_data, trend_data) {
    console.log(trend1_data.result)
    console.log(trend2_data.result)
});

Answer 2

You can use multiple url using $.each

var locationOne = '/dashboard/getTrend?period=30d&profileId=119';
var locationTwo = '/dashboard/getTrend?period=30d&profileId=120';
var multipleURL = [locationOne, locationTwo];

$.each(multipleURL, function (i, url) {
    $.ajax(url,
            {
                type: 'POST',
                data: {
                },
                success: function (data) {

                }
            }
    );
});