使用jQuery在javascript中解析JSON

Question

我正在为这个问题苦恼。我正在使用jQuery.getJSON()方法从服务器获取响应。以下是一个示例响应：

{
  "playlist": {
      "track": {
          "song": "Wake me up",
          "albumart": "http://example.com/image.png",
          "videoid": "CDsKBof4iMA"
      }
  }
}

响应中将会有多个音轨，但只有一个播放列表。我使用以下方式进行请求：

$.getJSON("api/playlist/get.php", {artist: "artist+name" })

我该如何解析这些数据？

- James Walker

---

你需要在你的getJSON调用中添加一个成功函数。JSON字符串将被解析为一个对象，你可以像访问任何其他JS对象一样访问它的属性。getJSON的jquery api有一个示例：http://api.jquery.com/jQuery.getJSON/ - scrappedcola

Answer 1

假设您的JSON结果如下所示：

{

    "playlist": {
        "track": {
            "song": "Wake me up",
            "albumart": "http://example.com/image.png",
            "videoid": "CDsKBof4iMA"
        },
        "track": {
            "song": "Wake me up 2",
            "albumart": "http://example.com/image2.png",
            "videoid": "CDsKBof4iMA2"
        },
        "track": {
            "song": "Wake me up 3",
            "albumart": "http://example.com/image3.png",
            "videoid": "CDsKBof4iMA3"
        }
    }
}

更新:

这个JSON格式无效，因为它有多个具有相同属性名称的子对象。 如果可以的话，请将服务器响应更改为以下格式：

{
    playlist: {
        tracks: [{
            "song": "Wake me up",
            "albumart": "http://example.com/image.png",
            "videoid": "CDsKBof4iMA"
        }, {
            "song": "Wake me up 2",
            "albumart": "http://example.com/image2.png",
            "videoid": "CDsKBof4iMA2"
        }, {
            "song": "Wake me up 3",
            "albumart": "http://example.com/image3.png",
            "videoid": "CDsKBof4iMA3"
        }]
    }
}

然后你就能从传递的数组中获取每个track对象：

你应该像这样使用你的$.getJSON函数：

$.getJSON("api/playlist/get.php", function (data) {

    for (var key in myObj.playlist.tracks) {
        //do something with your track object
        console.log(myObj.playlist.tracks[key].song)
    }

})

这里有一个 JsFiddle 链接给你: http://jsfiddle.net/zur4ik/Fy6ud/1/

- zur4ik

---

我一直收到未定义的错误，这个错误在console.log()行上。 - James Walker

@JamesWalker，我刚刚更新了我的帖子。你之所以得到 undefined，是因为你的JSON响应格式无效。它具有相同属性名称的多个对象。如果您能够更改来自服务器的JSON发送器文件，请将其更改为正确的格式，建议将对象放入数组中。 - zur4ik

非常感谢！我甚至没有想到JSON响应可能是不正确的。 - James Walker

Answer 2

试试这个：

$.getJSON("api/playlist/get.php", function(data) {
    var responseObject = JSON.parse(data);
    // do stuff with responseObject
});

- Lars Anundskås

Answer 3

根据文档，

 jQuery.getJSON( url [, data ] [, success( data, textStatus, jqXHR ) ] )

在这里，如果 JSON 加载成功，则 success( data, textStatus, jqXHR ) 是回调函数。

- Litmus

Answer 4

使用$.parseJSON()来获取JSON的JavaScript对象。 http://api.jquery.com/jQuery.parseJSON/

- summerbulb

---

如果您使用getJSON，它会在成功函数中返回一个对象，因此您不需要使用parseJSON。 - scrappedcola