getjson関数が成功してボディに追加された後divを3で分割する

Question

これは、FreeCodeCampプロジェクトの一部であるtwitch.tvストリーマーのリストの試行です。 document.ready関数がdivs（bs4カード）にデータを追加した後、3のオーダでカードデッキに積み重ねる必要があります。 splitByThree関数を試していますが、うまくいきません。 約束を使ってこれを行うには？どんな助けでも大歓迎です。

let streamers = ["ESL_SC2", 
 
     "ESL_CSGO", "freecodecamp", "GeoffStorbeck", "terakilobyte", "habathcx", "notmichaelmcdonald", "RobotCaleb", "medrybw", "thomasballinger", "joe_at_underflow", "noobs2ninjas", "mdwasp", "beohoff", "xenocomagain" 
 
    ]; 
 
    
 
    let getDATA = function(arr) { 
 
     let cb = '?client_id=c292fn290f4pac7cpk4j4t137uk3tn&callback=?'; 
 
     let url = 'https://api.twitch.tv/kraken/'; 
 

 
     arr.forEach(function(stream) { 
 

 
      let newUrl = url + 'streams/' + stream + cb; 
 

 

 
      $.getJSON(newUrl).success(function(data) { 
 
       let obj = {}; 
 
       let streaming = (data.stream === null) ? false : true; 
 
       if (streaming) { 
 
        obj.theme = 'card-success'; 
 
        obj.username = stream; 
 
       } else { 
 
        obj.theme = 'card-danger'; 
 
        obj.username = stream; 
 
       } 
 
       
 
       $.getJSON(url + 'users/' + stream + cb).done(function(data, textStatus, jqXHR) { 
 
        obj.logo = data.logo; 
 
        $(".streamers").append('<div class="streamer card col-4 ' + obj.theme + '"><img class="rounded w-25" src=' + obj.logo + '>' + obj.username + '</div>'); 
 
       }); 
 
      });    
 
     }); 
 
    }; 
 

 
    function splitByThree() { 
 
     var divs = $(".streamers > .streamer"); 
 
     for (var i = 0; i < divs.length; i += 3) { 
 
      divs.slice(i, i + 3).wrapAll("<div class='card-deck'></div>"); 
 
     } 
 
    } 
 

 
    let readyFN = function() { 
 
     getDATA(streamers).then(function(){return splitByThree()}); 
 
     
 
    }; 
 
    $(document).ready(readyFN); 
 

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="streamers"></div>

Answer 1

：

getDATA(streamers).then(function(){return splitByThree()}); 

機能函はdeferredオブジェクトの配列を返さなければなりません。 Whenこの配列は、あなたがsplitByThree機能を実行することができますdoneを持っています。

doneとfailを処理するためにdeferred thenを使用する場合は、失敗が発生したときに遅延要素を解決する代わりに拒否できます。

このように、コードのあなたの行は次のようになります。

$.when.apply($, getDATA(streamers)).done(function() { 
    splitByThree() 
}); 

スニペット：

let streamers = ["ESL_SC2", 
 
       "ESL_CSGO", "freecodecamp", "GeoffStorbeck", "terakilobyte", "habathcx", "notmichaelmcdonald", "RobotCaleb", "medrybw", 
 
       "thomasballinger", "joe_at_underflow", "noobs2ninjas", "mdwasp", "beohoff", "xenocomagain" 
 
       ]; 
 

 

 
let getDATA = function (arr) { 
 
    // 
 
    // create and initialize the deferred array to return 
 
    // 
 
    var deferredArr = []; 
 
    arr.forEach(function (ele, idx) { 
 
    deferredArr.push($.Deferred()); 
 
    }); 
 

 

 
    let cb = '?client_id=c292fn290f4pac7cpk4j4t137uk3tn&callback=?'; 
 
    let url = 'https://api.twitch.tv/kraken/'; 
 

 
    arr.forEach(function (stream, idx) { 
 
    let newUrl = url + 'streams/' + stream + cb; 
 
    $.getJSON(newUrl).success(function (data) { 
 
     let obj = {}; 
 
     let streaming = (data.stream === null) ? false : true; 
 
     if (streaming) { 
 
     obj.theme = 'card-success'; 
 
     obj.username = stream; 
 
     } else { 
 
     obj.theme = 'card-danger'; 
 
     obj.username = stream; 
 
     } 
 

 
     $.getJSON(url + 'users/' + stream + cb).done(function (data, textStatus, jqXHR) { 
 
     obj.logo = data.logo; 
 
     $(".streamers").append('<div class="streamer card col-4 ' + obj.theme + '"><img class="rounded w-25" src=' + obj.logo + '>' + obj.username + '</div>'); 
 
     // 
 
     // resolve the current deferred element 
 
     // 
 
     deferredArr[idx].resolve(); 
 
     }).fail(function() { 
 
     // 
 
     // resolve (reject using then instead of done) 
 
     // the current deferred element 
 
     // 
 
     deferredArr[idx].resolve(); 
 
     }); 
 
    }).fail(function() { 
 
     // 
 
     // resolve (reject using then instead of done) 
 
     // the current deferred element 
 
     // 
 
     deferredArr[idx].resolve(); 
 
    }); 
 
    }); 
 
    return deferredArr; 
 
}; 
 

 
function splitByThree() { 
 
    console.log('splitByThree runs....'); 
 
    var divs = $(".streamers > .streamer"); 
 
    for (var i = 0; i < divs.length; i += 3) { 
 
    divs.slice(i, i + 3).wrapAll("<div class='card-deck'></div>"); 
 
    } 
 
} 
 

 
let readyFN = function() { 
 
    $.when.apply($, getDATA(streamers)).done(function() { 
 
    splitByThree() 
 
    }); 
 
}; 
 
$(document).ready(readyFN);

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="streamers"></div>

Answer 2

あなたはgetDATA関数内にsplitByThree機能を移動する必要があります。 JSONデータが一度だけ取得されると、splitByThree関数が呼び出される必要があります。それ以外の場合は、splitByThree関数が動作するデータが無効であるため、実行の非同期性が原因でsplitByThree関数が正しく機能しません。実行するために

let streamers = ["ESL_SC2", 
     "ESL_CSGO", "freecodecamp", "GeoffStorbeck", "terakilobyte", "habathcx", "notmichaelmcdonald", "RobotCaleb", "medrybw", "thomasballinger", "joe_at_underflow", "noobs2ninjas", "mdwasp", "beohoff", "xenocomagain" 
    ]; 

     let streamers = ["ESL_SC2", 
     "ESL_CSGO", "freecodecamp", "GeoffStorbeck", "terakilobyte", "habathcx", "notmichaelmcdonald", "RobotCaleb", "medrybw", "thomasballinger", "joe_at_underflow", "noobs2ninjas", "mdwasp", "beohoff", "xenocomagain" 
    ]; 

    let getDATA = function(arr) { 
     let cb = '?client_id=c292fn290f4pac7cpk4j4t137uk3tn&callback=?'; 
     let url = 'https://api.twitch.tv/kraken/'; 

     arr.forEach(function(stream) { 

      let newUrl = url + 'streams/' + stream + cb; 


      $.getJSON(newUrl).success(function(data) { 
       let obj = {}; 
       let streaming = (data.stream === null) ? false : true; 
       if (streaming) { 
        obj.theme = 'card-success'; 
        obj.username = stream; 
       } else { 
        obj.theme = 'card-danger'; 
        obj.username = stream; 
       } 

       $.getJSON(url + 'users/' + stream + cb).done(function(data, textStatus, jqXHR) { 
        obj.logo = data.logo; 
        $(".streamers").append('<div class="streamer card col-4 ' + obj.theme + '"><img class="rounded w-25" src=' + obj.logo + '>' + obj.username + '</div>'); 
        splitByThree(); 
       }); 
      });    
     }); 

    }; 

    function splitByThree() { 
     var divs = $(".streamers > .streamer"); 
     for (var i = 0; i < divs.length; i += 3) { 
      divs.slice(i, i + 3).wrapAll("<div class='card-deck'></div>"); 
     } 
    } 

    let readyFN = function() { 
     getDATA(streamers); 

    }; 
    $(document).ready(readyFN);