获取数据后如何对来自不同ajax调用的数据进行排序

Question

当数据来自不同的 ajax 调用（调用它们之后）时，我需要按字母顺序对数据进行排序。 对于每个数据，都有一个唯一的 id(movie1,movie2..)，数据从 ajax 调用存储在其中。

如何在点击按钮时使用这些 id 对数据进行排序？

window.onload = function() {
  $.ajax({
    url: "http://www.omdbapi.com/?t=frozen&y=&plot=full&r=json",
    crossDomain: true,
    dataType: "json",
    success: fetch1
  });

  $.ajax({
    url: "http://www.omdbapi.com/?t=despicable+me&y=&plot=full&r=json",
    crossDomain: true,
    dataType: "json",
    success: fetch2
  });

  $.ajax({
    url: "http://www.omdbapi.com/?t=2012&y=&plot=full&r=json",
    crossDomain: true,
    dataType: "json",
    success: fetch3
  });

  $.ajax({
    url: "http://www.omdbapi.com/?t=freaky+friday&y=&plot=full&r=json",
    crossDomain: true,
    dataType: "json",
    success: fetch4
  });

}

//For fetching data on success

function fetch1(e) {
  var result1 = "";

  result1 += "<p>Title: " + e.Title + "</p>";

  $('#movie1').html(result1); //For storing result in html

}


//For fetching data on success
function fetch2(e) {
  var result2 = "";

  result2 += "<p>Title: " + e.Title + "</p>";

  $('#movie2').html(result2); //For storing result in html

}

//For fetching data on success
function fetch3(e) {
  var result3 = "";

  result3 += "<p>Title: " + e.Title + "</p>";

  $('#movie3').html(result3); //For storing result in html

}

//For fetching data on success
function fetch4(e) {
  var result4 = "";

  result4 += "<p>Title: " + e.Title + "</p>";

  $('#movie4').html(result4); //For storing result in html

}

.card {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  margin-left: 20px;
  margin-bottom: 90px;
  margin-right: 0px;
  margin-top: 60px;
  width: 20%;
  height: 50%;
  float: left;
  position: relative;
}
.card-footer {
  padding: 0.01em 16px;
  background: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="panel">
  <button class="button" id="name" style="background: #3F51B5;">Search by Name</button>
</div>

<div class="card">
  <div class="card-container1">
  </div>
  <footer class="card-footer" id="movie1">
  </footer>
</div>

<div class="card">
  <div class="card-container2">
  </div>
  <footer class="card-footer" id="movie2">
  </footer>

</div>

<div class="card">
  <div class="card-container3">
  </div>
  <footer class="card-footer" id="movie3">
  </footer>
</div>
<div class="card">
  <div class="card-container4">
  </div>
  <footer class="card-footer" id="movie4">
  </footer>
</div>

<!-- Latest compiled and minified JavaScript -->

Answer 1

你可以使用jQueryajaxComplete()函数。

var titleArray = [];
var movieArray = ['frozen', 'despicable', '2012', 'freaky+friday'];
$(document).ajaxComplete(function() {
  $.each(titleArray, function(i, val) {
    $ele = $('#movie' + (i + 1));
    $ele.data({'year': val.year, 'name': val.title});
    $ele.html("<p>Title: " + val.title + "</p>")
  })
})
$.each(movieArray, function(i, val) {
  $.ajax({
    url: "http://www.omdbapi.com/?t=" + val + "&y=&plot=full&r=json",
    crossDomain: true,
    dataType: "json",
    success: fetch
  });
});
$('#year, #name').click(function(){
  var id = this.id
  $newCard = $('.card').sort(function(a, b){
    $aF = $(a).find('footer');
    $bF = $(b).find('footer');
    return $aF.data(id) < $bF.data(id) ? -1 : 1;
  });
  $('.card').detach();
  $('#panel').after($newCard);
})

function fetch(e) {
  titleArray.push({title:e.Title, year : e.Year})
}

.card {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  margin-left: 20px;
  margin-bottom: 90px;
  margin-right: 0px;
  margin-top: 60px;
  width: 20%;
  height: 50%;
  float: left;
  position: relative;
}
.card-footer {
  padding: 0.01em 16px;
  background: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="panel">
  <button class="button" id="year" style="background: #3F51B5;">Search by Year</button>
  <button class="button" id="name" style="background: #3F51B5;">Search by Name</button>
</div>
<div class="card" id="mov1">
  <div class="card-container1"></div>
  <footer class="card-footer" id="movie1"></footer>
</div>
<div class="card" id="mov2">
  <div class="card-container2"></div>
  <footer class="card-footer" id="movie2"></footer>
</div>
<div class="card" id="mov3">
  <div class="card-container3"></div>
  <footer class="card-footer" id="movie3"></footer>
</div>
<div class="card" id="mov4">
  <div class="card-container4"></div>
  <footer class="card-footer" id="movie4"></footer>
</div>

<!-- Latest compiled and minified JavaScript -->