从API中提取数据的两个脚本单独工作，但不在同一页面上

时间：2018-03-31 11:42:50

标签： javascript html-table

我有一个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>

1 个答案:

答案 0 :(得分：0)

请看下面的代码。我添加了一个额外的参数来区分当前和旧的URL，并基于在displaysList（）中我们追加数据。 

    <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>
相关问题
最新问题