javascript - 在 javascript 中访问和迭代 json

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 10 年前。

我正在运行一个 HTML 文件，该文件出现错误“未捕获的类型错误:无法读取未定义的属性“0””

我的 JavaScript 代码是

function loadHeatMap(){
    xhr=new XMLHttpRequest();
    xhr.open('GET','/LinkedIn/heatMap.json',true);
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4&&xhr.status===200){
            heatData=JSON.parse(xhr.responseText).data;
            console.log("Heat Map JSON data");
        }};
    xhr.send(null);
}

loadHeatMap();
var name = heatData.set[0].name;

JSON 的结构如下

{"data":[{"set":[{"name":"Joe","sold":"100","target":"200"},{"name":"Tim","sold":"200","target":"100"}]}]}

错误发生在“heatData.set[0].name”行，表示 0 未定义。

有人可以让我知道我做错了什么吗？

Answer 1

XMLHttpRequest 是异步的，这意味着在您将数据分配给变量名称时，请求不会为 heatData 分配任何内容。

您必须确保在请求完成后对返回的数据进行任何处理。实现此目的的一个简单方法是仅向函数发送回调。

function loadHeatMap(callback) {
    xhr=new XMLHttpRequest();
    xhr.open('GET','/LinkedIn/heatMap.json',true);
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4&&xhr.status===200){
            heatData=JSON.parse(xhr.responseText).data;
            // Run your callback with the data
            callback instanceof Function && callback(heatData);
        }};
    xhr.send(null);
}

loadHeatMap(function(heatData) {
    // Do all your processing with heatData here
});