两个脚本单独从API中摘下数据，但在同一页面上时不进行

Question

我有一个JS脚本，可以从API中提取数据并将其全部合并到表中，我需要对两次不同的数据进行两次此操作。单独地按预期工作，但是当它们在同一页面上运行时，只有一个显示任何数据。

我知道脚本标签不是使用JS的最佳方法，但是为了我的目的，所有内容都需要包含在HTML的一个块中。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  //Voting totals for current month
  var votingURLs = [
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=7ImLVCEQFgOq9Ugz5G569nQJ5akmta8C2ty&month=current&format=json&rank=steamid',
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=eJgmsMaw6Aor1bSD1r9wtyu1mBiLNjWSZW&month=current&format=json&rank=steamid',
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=current&format=json&rank=steamid'
  ];
  var votingLists = [];
  var counter = 0;
  var finalList = [];
  var voters = [];
  var votesOfVoters = [];
  $(document).ready(function() {
    $.each(votingURLs, function(index, value) {
      var data;
      $.ajax({
        dataType: "json",
        url: value,
        data: data,
        success: function(data) {
          votingLists[index] = data.voters;
          checkCompleteness();
        }
      });
    });
  });
  function checkCompleteness() {
    counter++;
    if (counter == (votingURLs.length)) {
      evalData();
    }
  }
  function evalData() {
    console.log("Start Evaluating");
    finalList = votingLists[0];
    $.each(votingLists, function(index, list) {
      if (index > 0) {
        $.each(list, function(index, value) {
          var steamid = value.steamid;
          var found = false;
          $.each(finalList, function(indexF, valueF) {
            if (steamid == valueF.steamid) {
              valueF.votes = parseInt(valueF.votes) + parseInt(value.votes);
              found = true;
              return false;
            }
          });
          if (!found) {
            finalList.push(value);
          }
        });
      }
    });
    displayingList(finalList);
  }
  function displayingList(list) {
    console.log("Start Displaying");
    list.sort(function(a, b) {
      return parseInt(b.votes, 10) - parseInt(a.votes, 10);
    });
    $.each(list, function(index, value) {
      var row = '<tr> <td>' + value.nickname + '</td> <td> ' + value.votes + '</td> </tr>';
      $('table[data="current_votes"] tbody').append(row);
    });
  }
</script>
<script>
  //Voting totals for previous month
  var votingURLs = [
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=7ImLVCEQFgOq9Ugz5G569nQJ5akmta8C2ty&month=previous&format=json&rank=steamid',
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=eJgmsMaw6Aor1bSD1r9wtyu1mBiLNjWSZW&month=previous&format=json&rank=steamid',
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=previous&format=json&rank=steamid'
  ];
  var votingLists = [];
  var counter = 0;
  var finalList = [];
  var voters = [];
  var votesOfVoters = [];
  $(document).ready(function() {
    $.each(votingURLs, function(index, value) {
      var data;
      $.ajax({
        dataType: "json",
        url: value,
        data: data,
        success: function(data) {
          votingLists[index] = data.voters;
          checkCompleteness();
        }
      });
    });
  });
  function checkCompleteness() {
    counter++;
    if (counter == (votingURLs.length)) {
      evalData();
    }
  }
  function evalData() {
    console.log("Start Evaluating");
    finalList = votingLists[0];
    $.each(votingLists, function(index, list) {
      if (index > 0) {
        $.each(list, function(index, value) {
          var steamid = value.steamid;
          var found = false;
          $.each(finalList, function(indexF, valueF) {
            if (steamid == valueF.steamid) {
              valueF.votes = parseInt(valueF.votes) + parseInt(value.votes);
              found = true;
              return false;
            }
          });
          if (!found) {
            finalList.push(value);
          }
        });
      }
    });
    displayingList(finalList);
  }
  function displayingList(list) {
    console.log("Start Displaying");
    list.sort(function(a, b) {
      return parseInt(b.votes, 10) - parseInt(a.votes, 10);
    });
    $.each(list, function(index, value) {
      var row = '<tr> <td>' + value.nickname + '</td> <td> ' + value.votes + '</td> </tr>';
      $('table[data="old_votes"] tbody').append(row);
    });
  }
</script>
<div>
  <table data="current_votes" id="current_totals">
    <tr>
      <th colspan="2">Totals</th>
    </tr>
    <tr>
      <th>Username</th>
      <th>Votes</th>
    </tr>
  </table>
</div>
<div>
  <table data="old_votes" id="old_totals">
    <tr>
      <th colspan="2">Totals</th>
    </tr>
    <tr>
      <th>Username</th>
      <th>Votes</th>
    </tr>
  </table>
</div>

Answer 1

请看以下代码。我添加了一个额外的参数，以区分当前和旧的URL，并基于DisplayList((我们附加数据。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  //Voting totals for current month
  var current_votingURLs = [
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=7ImLVCEQFgOq9Ugz5G569nQJ5akmta8C2ty&month=current&format=json&rank=steamid',
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=eJgmsMaw6Aor1bSD1r9wtyu1mBiLNjWSZW&month=current&format=json&rank=steamid',
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=current&format=json&rank=steamid'
  ];
  var old_votingURLs = [
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=7ImLVCEQFgOq9Ugz5G569nQJ5akmta8C2ty&month=previous&format=json&rank=steamid',
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=eJgmsMaw6Aor1bSD1r9wtyu1mBiLNjWSZW&month=previous&format=json&rank=steamid',
    'https://ark-servers.net/api/?object=servers&element=voters&limit=1000&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=previous&format=json&rank=steamid'
  ];
  var votingLists = [];
  var counter = 0;
  var finalList = [];
  var voters = [];
  var votesOfVoters = [];
  var apiCounter = 0;
  $(document).ready(function() {
    function baseFunction(votingURLs, urlType){
        $.each(votingURLs, function(index, value) {
          var data;
          $.ajax({
            dataType: "json",
            url: value,
            data: data,
            success: function(data) {
              apiCounter++;
              console.log(data);
              votingLists[index] = data.voters;
              checkCompleteness(votingURLs, urlType);
            }
          });
        });
    }
    baseFunction(current_votingURLs,'current');
    baseFunction(old_votingURLs,'old');
  });
  function checkCompleteness(votingURLs, urlType) {
    counter++;
    console.log('In checkCompleteness');
    //if (counter == (votingURLs.length)) {
      evalData(urlType);
    //}
  }

  function evalData(urlType) {
    console.log("Start Evaluating");
    console.log("Start Evaluating", urlType);
    finalList = votingLists[0];
    $.each(votingLists, function(index, list) {
      if (index > 0) {
        $.each(list, function(index, value) {
          var steamid = value.steamid;
          var found = false;
          $.each(finalList, function(indexF, valueF) {
            if (steamid == valueF.steamid) {
              valueF.votes = parseInt(valueF.votes) + parseInt(value.votes);
              found = true;
              return false;
            }
          });
          if (!found) {
            finalList.push(value);
          }
        });

      }
    });
    displayingList(finalList, urlType);
  }

  function displayingList(list, urlType) {
    console.log("Start Displaying");
    console.log("urlType", urlType);
    list.sort(function(a, b) {
      return parseInt(b.votes, 10) - parseInt(a.votes, 10);
    });
    if(urlType == 'current') {
        $.each(list, function(index, value) {
          var row = '<tr> <td>' + value.nickname + '</td> <td> ' + value.votes + '</td> </tr>';
          $('table[data="current_votes"] tbody').append(row);
        });
    }else {
        $.each(list, function(index, value) {
          var row = '<tr> <td>' + value.nickname + '</td> <td> ' + value.votes + '</td> </tr>';
          $('table[data="old_votes"] tbody').append(row);
        });
    }
    console.log(apiCounter);
  }
</script>
<div>
  <table data="current_votes" id="current_totals">
    <tr>
      <th colspan="2">Totals</th>
    </tr>
    <tr>
      <th>Username new</th>
      <th>Votes</th>
    </tr>
  </table>
</div>
<div>
  <table data="old_votes" id="old_totals">
    <tr>
      <th colspan="2">Totals</th>
    </tr>
    <tr>
      <th>Username</th>
      <th>Votes</th>
    </tr>
  </table>
</div>