Question

我在解析多个JSON文件时遇到了一些麻烦。

基本上，我有一个带有复选框的网络表单，可以控制在Google地图上绘制哪些多边形。

根据用户选择的内容，确定要获取和解析的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正在做的事情。每次创建一个新的var并为其分配状态更改处理程序，它应该工作。 E.g。

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();  

}}

当您在同一open上回忆XMLHttpRequest时，您正在放弃上一个请求，但如果您每次创建一个新请求，他们将分别处理自己的请求。

除此之外，如果您可以控制服务器端，那么接收一个文件数组的服务器方法在单个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();  
}}

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

2 个答案: