在javascript中访问和迭代json

我正在运行一个HTML文件，该文件出现错误“UncaughtTypeError:无法读取未定义的属性“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”，“salled”：“100”，“target”：“200”}，{“name”：“Tim”，“salled”：“200”，“target”：“100”}]}

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

---

有人能告诉我我做错了什么吗。

您需要从

xhr

对象中侦听

onReadyStateChange

事件，并等待它变为'4'。这意味着数据已加载，响应已准备就绪。然后可以检查

heatData.set[0].name

。现在，您正在尝试在它有机会加载之前访问它。

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

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

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
});

这将返回此数组

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

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

heatData[0].set[0].name

---

希望它能有所帮助

您尝试使用异步Ajax调用，就好像它是同步的一样。任何需要对返回数据进行的处理都应该在readystatechange回调中完成（或者在从那里调用的函数中完成）。如果在调用

loadHeatMap（）

函数之后添加一些

console.log（）

语句，则可以看到异步执行序列。（顺便说一句：不迭代JSON，而是解析JSON并迭代结果对象。）

heatData['name']

除了@nnnnnn之外，您还应该确保

heatData

在访问它之前包含一些内容；如果ajax调用失败，一切都会失败。解决方法是不将Ajax更改为同步。这对用户来说是一个糟糕的体验。我确实尝试过使用回调函数，但正如我从David的有用代码片段中看到的，我需要复习一下我的回调+1、干净答案和代码+1。这是我自己都懒得写的答案。谢谢David，谢谢你费心帮助这个断开连接的节点。完美

heatData[0].set[0].name