Javascript 组合来自不同范围的多个数组

Question

下面是一个函数，它应该使用 chaptersArry 获取每个章节的项目并将它们放入一个新数组*将原始章节数据和项目数据放在一起*调用itemsArr

function get_items(chaptersArry){
  for ( var ii = 0, l = chaptersArry.length; ii < l; ii++ ) {
    console.log(chaptersArry[ii].id+" *****");  // this returns the correct data


    // now I am using each chapter ID from above to $.get the chapter items..... 
    var api_url = '/collections/' + chaptersArry[ii].id + '/contents.json';
    $.get(api_url, function(items) {
      // for each chapter loop through items and push them to itemsArr.
      for ( var i = 0, l = items.collection_contents.length; i < l; i++ ) {
        console.log(chaptersArry[ii].id); // returns incorrect data 
        itemsArr.push({
            series_id : chaptersArry[ii].series_id, 
            series_name : chaptersArry[ii].series_name,
            chapter_id : chaptersArry[ii].id, 
            chapter_name : chaptersArry[ii].name,
            chapter_display_name : chaptersArry[ii].display_name,
            chapter_data : items.collection_contents[i]
        });
      }
    });

  }
}

Answer 1

与 Kamyar Infinity 的回答一样，您需要使用闭包或使用 let 的 block 作用域来在 $.get() 回调中获取正确的数据，但是，这不是问题的关键。由于您需要异步返回数据，因此需要使用 promises。以下是您可以如何做到这一点:

Working Demo

function get_items(chaptersArry){
  return new Promise(function (resolve, reject) {
    var promises = [];
    for (let ii = 0, l = chaptersArry.length; ii < l; ii++ ) {
      console.log(chaptersArry[ii].id+" *****");  // this returns the correct data

      // now I am using each chapter ID from above to $.get the chapter items..... 
      var api_url = '/collections/' + chaptersArry[ii].id + '/contents.json';
      var promise = new Promise(function (_resolve, _reject) {
        $.get(api_url, function(items) {
          var itemsArr = [];
          // for each chapter loop through items and push them to itemsArr.
          for ( var i = 0, l = items.collection_contents.length; i < l; i++ ) {
            itemsArr.push({
              series_id : chaptersArry[ii].series_id, 
              series_name : chaptersArry[ii].series_name,
              chapter_id : chaptersArry[ii].id, 
              chapter_name : chaptersArry[ii].name,
              chapter_display_name : chaptersArry[ii].display_name,
              chapter_data : items.collection_contents[i]
            });
          }
          _resolve(itemsArr);
        });
      });
      promises.push(promise);
    }
    Promise.all(promises).then(function (values) {
      resolve(values);
    });
  });
}

get_items(chaptersArry).then(function (results) {
  // flatten array of results from each $.get()
  console.log([].concat(...results));
});