调试Javascript变量传递

我有一个google地图，它显示了由makeRequest函数解析的网页上的经度和纬度信息的标记。此时，通过调用makeRequest在displayLocation调用中放置标记。我想要的确切的标记放在地图上。我的问题是试图为地图标记的信息窗口提供更多细节

我不了解participantName变量的范围。当我通过makeRequest调用传入participantName时，我接收到数组中最后一个participantName，该数组填充在每个标记的信息窗口中

我的目标完成了一半，每个标记对于参与者来说都是唯一的（长，lat）。我想循环遍历另一个包含参与者名称的数组，并将它们与每个标记一起填充

循环的输出显示数组中的姓氏，而它应该显示与第一个for循环对应的数组中participantNames[i]处的值

                var participantIDs = <?php echo json_encode($participantIDs) ?>;
                var participantNames = <?php echo json_encode($participantNames)?>;

                var participantID;
                var participantName;

                for(var i = 0; i < participantIDs.length; i++)
                {
                    participantID = participantIDs[i];
                    participantName = participantNames[i];

                    makeRequest('pageWithLocationInfo.php?participantID=' + participantID , function(data) 
                    {
                        var data = JSON.parse(data.responseText);

                        for(var i = 0; i < data.length; i++) 
                        {
                            displayLocation(data[i], participantName);
                        }
                    });
                }
            }

              function displayLocation(location, pName) {

                var content = '<div class="infoWindow">' + '<p>' + pName + '<br/>' + 'Latitude: '  +  location.latitude
                + '<br/>' + 'Longitude: ' + location.longitude + '</p>'
                +  '</div>';

                }

var participantIDs=；
var参与者名称=；
var参与者；
var参与者名称；
对于（变量i=0；i'+'纬度：'+location.Latitude
+“
”+”经度：“+location.Longitude+”
”
+  '';
}

听起来您希望每个迭代对

participantID

和

participantName

有一个单独的绑定。由于

var

具有功能范围且已被提升，因此应使用

const

或

let

。或者，更好的是，完全避免

for

循环，使用

forEach

，它不需要手动迭代，并且具有自动抽象。试着这样做：

const participantIDs = <?php echo json_encode($participantIDs) ?>;
const participantNames = <?php echo json_encode($participantNames)?>;
participantIDs.forEach((participantID, i) => {
  const participantName = participantNames[i];
  makeRequest('pageWithLocationInfo.php?participantID=' + participantID, function(response) {
    const data = JSON.parse(response.responseText);
    data.forEach(item => displayLocation(item, participantName));
  });
});

---

不要对内部循环和外部循环使用相同的迭代索引变量名；使用不同的名称。

您可以尝试以下方法并告诉我输出是什么。还需要知道

makeRequest

如何表示失败

var participantIDs = [];
var participantNames = [];

if(participantIDs.length!==participantNames.length){
  throw new Error("participants id's and names are not the same length");
}
Promise.all(
  participantIDs.map(//map names and id's to [[id,name],[id,name]]
    function(id,index){
      return [id,participantNames[index]]
    }
  ).map(
    function(idName){//in ES7 you can use ([id,name])=>new Promise...
      return new Promise(
        function(resole,reject){
          makeRequest(//What does makeRequest return to indicate failure?
            "pageWithLocationInfo.php?participantID=" + idName[0],
            function(data){
              resolve(data);
            }
          )
        }
      ).then(
        function(response){
          var data = JSON.parse(response.responseText);
          data.forEach(function(location){
            displayLocation(location, idName[1]);
          })
          return [data,idName];
        }
      )
    }
  )
).then(
  function(results){
    console.log("results is:",results)
  }
)

---

像这样动态创建Javascript不是一个好主意-如果您单独提供数据，然后让您的（静态、独立）脚本读取数据，那么调试可能会容易得多。我觉得我离得到结果太近了，以至于错过了一个小细节。当我传递参与者姓名[1]、[2]、[3]时，我不太了解如何为每个标记分配参与者姓名[8]。。。。使用静态字符串participantName=“Test”为所有标记指定“Test”名称。

var participantIDs = [];
var participantNames = [];

if(participantIDs.length!==participantNames.length){
  throw new Error("participants id's and names are not the same length");
}
Promise.all(
  participantIDs.map(//map names and id's to [[id,name],[id,name]]
    function(id,index){
      return [id,participantNames[index]]
    }
  ).map(
    function(idName){//in ES7 you can use ([id,name])=>new Promise...
      return new Promise(
        function(resole,reject){
          makeRequest(//What does makeRequest return to indicate failure?
            "pageWithLocationInfo.php?participantID=" + idName[0],
            function(data){
              resolve(data);
            }
          )
        }
      ).then(
        function(response){
          var data = JSON.parse(response.responseText);
          data.forEach(function(location){
            displayLocation(location, idName[1]);
          })
          return [data,idName];
        }
      )
    }
  )
).then(
  function(results){
    console.log("results is:",results)
  }
)