JavaScript JSON解析问题（$ .getJSON）

Question

我似乎无法获得以下代码输出任何内容到屏幕上。 JavaScript不是我的强项！

这是调用本地文件的JavaScript代码，该文件输出房间列表

$.getJSON('roomupdate.php?level=1&div=1&callback=json',function(res){
console.log(res.rooms.name[0]);
});

在上面我只是试图在控制台中看到第一个房间的名称。 这是JSON输出（我可以确认脚本可以看到并加载）

json(
{
        "rooms":
        [
            { "name" : "Bedroom" },
            { "name" : "Living Room" },
            { "name" : "Lounge" },
            { "name" : "Kitchen" }
        ]
})

有谁能建议我做错了什么？ 甚至在控制台中查看？

最后，你可以遍历数组吗？

Answer 1

您的JSON数据包含一个对象rooms ，该对象实际上包含一个数组[] ，因此要访问数组中的数据，您需要将索引放在rooms ：

console.log(res.rooms[0].name);

Answer 2

使用callback=? 而不是callback=json以便jQuery知道你正在使用JSONp并且可以为回调函数选择它自己的名字。

$.getJSON('roomupdate.php?level=1&div=1&callback=?',function(res){
    //alert('Your name is '+res.rooms);

    console.log(res.rooms.name[0]);
});

有关详细信息，请参阅http://api.jquery.com/jQuery.getJSON/#jsonp 。

编辑：

再看一下，您需要更改访问数据的方式。 res.rooms.name[0]应该是res.rooms[0].name因为rooms是一个列表，每个房间都有一个name属性。

Answer 3

这将遍历房间数组并记录每个房间的名称：

$.each( res.rooms, function( i, room ) {
    console.log( room.name );
});

如果这不起作用，那么在回调开始时添加此语句（现在您可以调用console.log() ）：

debugger;

在打开开发人员工具的情况下加载/运行您的页面，它将在您拥有该语句的调试器中停止。 现在，您可以详细查看所有变量，尝试表达式以查看它们的作用，单步执行代码等。