JavaScriptで約束を連鎖させるTrello API

Question

JavaScriptのTrello APIを使用して、 "todo"という名前のリストの下にあるユーザーのボードのカードのリストをコンパイルしようとしています。

「todo」という名前のすべてのボードからリストIDの配列を取得することに成功しました。

... 

}).then(function(list_data) { 

     console.log("List Data", list_data); 
     console.log("List Data Length", list_data.length); 

     var cards_arr = []; 

     $.each(list_data, function(index, value) { 

      Trello.get("/lists/" + value.id + "/cards?fields=name,shortUrl") 
      .then(function(cards) { 

       $.each(cards, function(index, card) { 
        cards_arr.push(card.id); 
       }) 

      }) 

     }) 

     console.log("Cards Array", cards_arr); 

     return cards_arr; 

    }) 

私はそれが私の「list_data」変数を示していますコンソールログを見ると、私は6つの項目の配列を取得しますが、何らかの理由で、配列の長さが0に等しいと私がすることはできません。空の配列をループします。

Console Log SnapShot

私は、私が最も効果的な方法でTrelloのAPIを使用していないことを感じるので、私は先に行くと、以下の完全なコードを掲載します。

ご協力いただければ幸いです。あなたは$.eachコールバック内で非同期操作（Trello.get）を実行しているので感謝

var boards_arr = []; 

    // ==== LOOP THROUGH BOARDS 
    Trello.get("/member/me/boards?fields=name,id,idOrganization") 
    .then(function(boards) { 

     $.each(boards, function(index, board) { 
      if (board.idOrganization != "5112df8dad3201247401349e") return; 
      boards_arr.push(board.id); 
     }); 

     return boards_arr; 

    }).then(function(board_data) { 

     var lists_arr = []; 

     console.log("Board Data", board_data); 

     $.each(board_data, function(index, value) { 

      Trello.get("/boards/" + value + "/lists?fields=id,name") 
      .then(function(lists) { 

       $.each(lists, function(index, list) { 

        var listName = list.name.replace(" ", "").toLowerCase(); 
        if (listName != "todo") return; 

        lists_arr.push(list.id); 
       }); 

      }); 

     }); 

     return lists_arr; 

    }).then(function(list_data) { 

     console.log("List Data", list_data); 
     console.log("List Data Length", list_data.length); 

     var cards_arr = []; 

     $.each(list_data, function(index, value) { 

      Trello.get("/lists/" + value.id + "/cards?fields=name,shortUrl") 
      .then(function(cards) { 

       $.each(cards, function(index, card) { 
        cards_arr.push(card.id); 
       }) 

      }) 

     }) 

     console.log("Cards Array", cards_arr); 

     return cards_arr; 

    }) 

Answer 1

は、要素が$.each後のリターンである、これらが完了するまで、アレイに追加されることはありません。したがって、console.log(cards_arr)に電話をかけた時点で要素が追加されていません。あなたの代わりに何をすべき

は、すべてが完了するのを待つためにPromise.allを呼び出して、配列内のあなたがTrello.getから取得する約束を格納することで、あなたはすべての結果を持っているとき、あなたがcards_arr配列を作成。これにより、非同期操作と同期操作が分離されるため、後でconsole.logを呼び出すと、実際にcards_arrが完了していることを確認できます。

promise 
    .then(function(list_data) { 
    console.log("List Data", list_data); 
    console.log("List Data Length", list_data.length); 

    // do all operations and store results in an array 
    var resultPromises = list_data.map(function(value) { 
     return Trello.get("/lists/" + value.id + "/cards?fields=name,shortUrl") 
    }); 

    // wait for all operations to complete 
    return Promise.all(resultPromises); 
    }) 
    .then(function(results) { 
    // create cards_arr from results 
    var cards_arr = []; 
    $.each(results, function(index, cards) { 
     $.each(cards, function(index, card) { 
     cards_arr.push(card.id); 
     }); 
    }); 

    // this should print the correct array 
    console.log("Cards Array", cards_arr); 

    return cards_arr; 
    })