如何使用Get解析多個JSON文件？

Question

我在一次解析多個JSON文件時遇到了一些麻煩。

基本上，我有一個帶有復選框的Web表單，用於控制要在Google Map上繪制哪些多邊形。

根據用戶選擇的內容，確定要獲取和解析的JSON文件（和地理坐標）。 下面的腳本除最后一步外均有效-無論選擇多少，它始終僅返回最后一個JSON文件。

這是我對Stackoverflow的第一篇文章，並且是JS的新手，因此，對解決此問題的任何建議或不同方式都將不勝感激！

var xmlhttp = new XMLHttpRequest(); //

    xmlhttp.onreadystatechange = function() { //parse json file
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              var myArr = JSON.parse(xmlhttp.responseText);
              console.log(myArr);
         }
    }

function goCheck() { 
var input = document.getElementsByTagName('input');
var checkboxCount = 0;
var selections = [];
var urlArray = [];

for (var i=0, length = input.length; i<length; i++) { 
     if (input[i].checked === true) {
     j = input[i].value;
     selections.push(j); // store values for checkbox selections in array
     checkboxCount++; // keep track how many were checked

     var url = "https://mywebsite.ca/" + j + ".txt";
     urlArray.push(url); // store urls in array
   }
}

console.log(checkboxCount); // number of boxes checked
console.log(selections); // array with the selection values
console.log(urlArray); // an array with the json urls

// 2nd Loop  - iterate over URL array and call function to get json object

for (var i=0, length = urlArray.length; i<length; i++) {

      console.log(urlArray[i]);// check that loop is working
      xmlhttp.open("GET", urlArray[i], true);
      xmlhttp.send();  

}}

Answer 1

您正在重新分配xmlhttp每次在做什么。 每次創建一個新的變量，並為其分配狀態更改處理程序，它應該可以工作。 例如

for (var i=0, length = urlArray.length; i<length; i++) {    
      console.log(urlArray[i]);// check that loop is working
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() { //parse json file
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var myArr = JSON.parse(xmlhttp.responseText);
            console.log(myArr);
         }
      }; 
      xmlhttp.open("GET", urlArray[i], true);
      xmlhttp.send();  

}}

當您在同一XMLHttpRequest上調用open時，您將放棄最后一個請求，但是如果您每次創建一個新請求，它們將各自處理自己的請求。

另外，如果您可以控制服務器端，則服務器方法需要一個文件數組以在單個AJAX調用中獲取並返回json數組，這似乎是一種長期的方法。

Answer 2

您需要為每個文件創建一個新的XMLHttpRequest。 將您的最后一個循環替換為：

 var xmlhttp; for (var i=0, length = urlArray.length; i<length; i++) { xmlhttp = new XMLHttpRequest(); // xmlhttp.onreadystatechange = function() { //parse json file if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var myArr = JSON.parse(xmlhttp.responseText); console.log(myArr); } } console.log(urlArray[i]);// check that loop is working xmlhttp.open("GET", urlArray[i], true); xmlhttp.send(); }}