2016-05-09 9 views
0

私はチャートを作るために、データのブランチを呼び出す必要があるので、私は10以上の異なるAPIを呼び出す必要があるので、私はこのアヤックス:で複数のAPIを呼び出すforループ

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

    } 
    }); 
} 

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

    } 
    }); 
} 

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

    } 
    }); 
} 

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

    } 
    }); 
} 

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

    } 
    }); 
} 

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

    } 
    }); 
} 

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

    } 
    }); 
} 

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

    } 
    }); 
} 

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

    } 
    }); 
} 

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

    } 
    }); 
} 

$.when(trend1(), trend2(), trend3(), trend4(), trend5(), trend6(), trend7(), trend8(), trend9(), trend10()).done(function(trend1_data, trend2_data, trend3_data, trend4_data, trend5_data, trend6_data, trend7_data, trend8_data, trend9_data, trend10_data) { 
    //do something        
}) 

どのように月と同様の機能を作成しました私はこの大規模なコードをforループに入れますか?アヤックスは私にこれをさせるのですか?

UPDATE 1:

function trend0()... 
function trend1()... 
function trend2()... 
function trend3()... 
.... 

$.when(trend1(), trend2()).done(function(trend1_data, trend2_data) { 
for (var i = 0; i<N; i++) // with N your n* of cycles 
    eval("trend" + i + "()"); 
} 

}

私は以下のような何かをやっていますか?

ソリューション:

   var i = ""; 
       for (var i=0; i<5; i++) { 
       var trend = function(i) { 
        if ($(".numberOfProfile"+i).length) { 
         return $.ajax({ 
          url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile"+ i).html(), //getting the api 
          type: 'get', 
          success: function(data) { 

          } 
         }); 
        } 
        else 
        { 
         return false; 
        } 
       } 
        i++ 
       } 

答えて

1

重要次第です:彼らはすべてが似ているようですので、あなたはすべての機能を書くべきではありません!将来的にメンテナンスするのが難しくなる

既存の配列からプロファイルのクラス数を知っている場合は、実際にそれをループする必要があります。それは単に上記のように0から10に行く場合は、この道を行くことがあります。

var responses = []; 

for (var i=0; i<10; i++) { 
responses[i] = $.ajax({ 
    url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile" + i).html(), 
    type: 'get', 
    success: function(data) { 

    } 
} 

注実際の応答日がresponses[i]['response']で見つかった、または可能性が高いresponses[i]['responseJSON']

EDITされます:$ .whenさを使用して良いアイデアだが、あなたはかなり長いAjax呼び出しをしているように思えるので、最終的なアプリケーションを知らないので最終決定を下すことはできない。上記の例からは、次のようになります。

var trend = function(profileNo) { 
    return $.ajax({ 
    url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile" + profileNo).html(), 
    type: 'get', 
    success: function(data) { 

    } 
} 

$.when(trend(0), trend(1), ..., trend(10)).done(function(t1, ..., t10) { 
     //handle the results here 
}) 

EDIT2:私は実際にあなたの新しいソリューションの動作に驚いています。あなたはそれを試しましたか?その魂の中で私はそうするでしょう:

var trend = function(profileNo) { 
     return $.ajax({ 
     url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile" + profileNo).html(), 
     type: 'get', 
     success: function(data) { 
      //You could also use this callback to assign the retrieved to a "global" variable for instance 
     } 
    }); 
} 

var i=0; 
var responses = []; 

while($(".numberOfProfile"+i).length) { 
    responses[i] = trend(i); 
    i++; 
} 
+0

私はもはや$ .when()を使う必要はありませんか? – anson920520

+0

私の解決策を見てもらえますか?ありがとう! – anson920520

1

API呼び出しを使用すると、それらが異なる場合は、あなたが何かを行うことができますループ

for (var i = 0; i<N; i++) // with N your n* of cycles 
    trend(); 
} 

のために何ができるすべての時間と同じである場合(上のベースあなたのコード)

function trend0()... 
function trend1()... 
function trend2()... 
function trend3()... 
.... 

for (var i = 0; i<N; i++) // with N your n* of cycles 
    eval("trend" + i + "()"); 
} 

eval will javascript as strings RIPTコードhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

ところで本当にそのような何かを行っていない、私はあなたが行うことができ、ページの読み込みにこの関数を呼び出したい場合は、別の方法

を見つけるためにあなたをお勧め:

function trend0()... 
function trend1()... 
function trend2()... 
function trend3()... 
.... 

jQuery(document).ready(function(){ 
    for (var i = 0; i<N; i++) // with N your n* of cycles 
     eval("trend" + i + "()"); 
    } 
}); 

、またはクリックアクションの可能性がありますか?

function trend0()... 
function trend1()... 
function trend2()... 
function trend3()... 
.... 

jQuery(document).ready(function(){ 
    jQuery('#myButtonId').click(function(e){ 
     e.preventDefault(); 
     for (var i = 0; i<N; i++) // with N your n* of cycles 
      eval("trend" + i + "()"); 
     } 
    }); 
}); 

これはあなたのアプリケーションロジック

+0

ここで私はfor(var i = 0; i anson920520

+0

あなたが好きなところは、グローバル関数なので、全体的に見ることができます。これはあなたのアプリケーションロジックまでです –

+0

私の返信をいくつかの例で更新しました –

0

あなたのフォーマットはこのようにすることができます。

function trend() { 
    var trends = []; 
    for(var i=0;i<10;i++) 
    { 
     var urlX = '/dashboard/getTrend' + '?period=30d' + "&profileId="+$(".numberOfProfile"+i).html(), //getting the api 

     $.ajax({ 
      url: urlX 
      type: 'get', 
      success: function(data) { 
          trends.push(data);  
         } 
       }); 
     } 
} 

$.when(trend()).done(function(trendsData){ 
    // you have all the trends now 
}); 
+0

しかし、私は別の機能でそれを置く必要があります – anson920520

関連する問題