我有一个脚本,它读取一个JSON文件,然后用每个元素的name属性填充数组。
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var a = [];
var myMethod = function(){
$.ajax({
url : "numbers.json",
dataType : "json",
success : function(data){
for(i in data){
a.push(data[i].name);
}
}
});
}
myMethod();
console.log(a[2]); // console.log() returns "undefined"
</script>
JSON
[
{"name" : "One"},
{"name" : "Two"},
{"name" : "Three"},
{"name" : "Four"},
{"name" : "Five"}
]
我无法访问此数组的特定索引。控制台日志总是返回未定义的。我尝试在我的ajax调用之后添加.then()
,但它也不起作用。
你会想做这样的事情:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var a = [];
var myMethod = function() {
$.ajax({
url: "numbers.json",
dataType: "json",
success: function(data) {
for (i in data) {
a.push(data[i].name);
}
handleData();
}
});
}
function handleData() {
console.log(a[2]);
}
myMethod();
</script>
Javascript不会等待您的所有代码逐行运行,因此对于异步调用,您需要一个单独的函数来处理数据或在success回调中处理数据。另一个函数会更干净,但这取决于您想对数据做什么。
您的console.log(A[2]);
在Ajax
完成处理之前运行,由于Ajax
的异步性质,这就是它返回undefined
的原因。将console.log放入ajax
成功。请参阅工作代码段:
null
var a = [];
var myMethod = function(){
$.ajax({
url : "https://api.myjson.com/bins/b4bnr",
dataType : "json",
success : function(data){
for(i in data){
a.push(data[i].name);
}
console.log(a[2]);
}
});
}
myMethod();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>