首页 > 解决方案 > 如何用 http 请求的响应填充数组?

问题描述

我想用一些被 http 请求捕获的对象填充一个 JavaScript 数组。不幸的是,我不知道应该使用哪个 ArrayMethod。我尝试了 splice(),但它似乎不接受变量(用于 http 输出)作为输入。有没有人有一些技巧或知道怎么做?

在我的代码示例中,我想用内容填充数组,如“id01”所示。

谢谢你的帮助!

<html>
<body>

<div id="id01"></div>


<script>
var xmlhttp = new XMLHttpRequest(); 
var url = "https://waterfallexpress2020.s3.eu-central-1.amazonaws.com/myTutorial.txt"; 
xmlhttp.onreadystatechange = function() { 
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText); 
    myFunction(myArr);
  }
};
xmlhttp.open("GET", url, true); 
xmlhttp.send();

function myFunction(arr) { 

  var out = "";
  var i;
  for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + 
    arr[i].display + '</a><br>';
  }
  document.getElementById("id01").innerHTML = out;   
  return out;
}

var test =[];

test.splice(0,0,myFunction); //DOESN'T FILL MY ARRAY WITH THE OUTPUT OF myFunction()

document.write(test);

</script>

标签: javascripthtmlarrays

解决方案


您发出了异步请求,因此您必须等待响应。您使用 xmlhttp 请求和语句完成了它myFunction(myArr)。因此,为了保持这个返回响应,您应该在请求之前启动变量并用响应填充它:

var test;
...
xmlhttp.onreadystatechange = function() 
...
test = myFunction(myArr);
...
document.write(test);

小心拼接,它会创建初始变量的新实例,并且会丢失 getter 和 setter。


推荐阅读