Question

我正在运行一个HTML文件，出现错误“Uncaught TypeError：无法读取未定义的属性'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的结构如下

{ “数据”：[{ “设定”：[{ “名称”： “乔”， “卖”： “100”， “目标”： “200”}，{ “名称”： “添”， “出售”： “200”， “目标”： “100”}]}]}

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

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

Answer 1

XMLHttpRequests是异步的，这意味着在您将数据分配给变量名时，请求不会为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
});

Answer 2

您需要从onReadyStateChange对象中侦听xhr事件并等到它为'4'。这意味着数据已加载且响应已准备就绪。然后，您可以查看heatData.set[0].name。现在你正试图在它有机会加载之前访问它。

Answer 3

heatData=JSON.parse(xhr.responseText).data;

这应该返回此数组

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

所以我认为你必须这样做：

heatData[0].set[0].name

希望有所帮助

在javascript中访问和迭代json

3 个答案: