Question

有人可以帮我用JQuery获取JSON吗？我想我在JQuery代码中犯了一些错误。任何帮助将不胜感激。下面是我的JSON和JQuery：

JSON：

{
    "video": [
        {
            "id": "12312412312",
            "name": "Ecuaciones Diferenciales",
            "url": "/video/math/edo/12312412312",
            "author": {
                "data": [
                    {
                        "name_author": "Alejandro Morales",
                        "uri": "/author/alejandro-morales",
                        "type": "master"
                    }
                ]
            },
            "comments": {
                "data": [
                    {
                        "id": "367501354973_12216733",
                        "from": {
                            "name": "Doug Edwards",
                            "id": "628675309"
                        },
                        "message": "Make sure you don't, as they say, go whole hog...\nhttp://www.youtube.com/watch?v=U4wTFuaV8VQ",
                        "created_time": "2010-03-06T03:24:46+0000"
                    },
                    {
                        "id": "367501354973_12249673",
                        "from": {
                            "name": "Tom Taylor",
                            "id": "1249191863"
                        },
                        "message": "Are you and Karen gonna, as they say, pig out?",
                        "created_time": "2010-03-06T21:05:21+0000"
                    },
                    {
                        "id": "367501354973_12249857",
                        "from": {
                            "name": "Sheila Taylor",
                            "id": "1315606682"
                        },
                        "message": "how did it turn out? Sounds nummy!\n",
                        "created_time": "2010-03-06T21:10:30+0000"
                    }
                ]
            }
        },
        {
            "id": "12312412311",
            "name": "Ecuaciones Diferenciales : El arte de las diferenciaciones",
            "url": "/video/math/edo/1231241231212",
            "author": {
                "data": [
                    {
                        "name_author": "Alejandro Morales",
                        "uri": "/author/alejandro-morales",
                        "type": "master"
                    }
                ]
            },
            "comments": {
                "data": [
                    {
                        "id": "367501354973_12216733",
                        "from": {
                            "name": "Doug Edwards",
                            "id": "628675309"
                        },
                        "message": "Make sure you don't, as they say, go whole hog...\nhttp://www.youtube.com/watch?v=U4wTFuaV8VQ",
                        "created_time": "2010-03-06T03:24:46+0000"
                    },
                    {
                        "id": "367501354973_12249673",
                        "from": {
                            "name": "Tom Taylor",
                            "id": "1249191863"
                        },
                        "message": "Are you and Karen gonna, as they say, pig out?",
                        "created_time": "2010-03-06T21:05:21+0000"
                    },
                    {
                        "id": "367501354973_12249857",
                        "from": {
                            "name": "Sheila Taylor",
                            "id": "1315606682"
                        },
                        "message": "how did it turn out? Sounds nummy!\n",
                        "created_time": "2010-03-06T21:10:30+0000"
                    }
                ]
            }
        }
    ]
}

jQuery代码

var url = 'result.json';
$(document).ready(function() {
    $.getJSON(url, function(data) {
        $.each(data, function(video, data) {
            $('#stage').html('<p> ID:' + data.video + '</p>');
            $('#stage').append('<p Name: ' + data.name+ '</p>');
            $('#stage').append('<p> URL: ' + data.url+ '</p>');

            console.log("========================");
            console.log(data);

        });
    });
});

Answer 1

我猜测您正在尝试遍历video数组中属于data对象属性的每个项目，因为在$.each()内.video 1}}循环您尝试访问.name，.url和$.each(data, function(video, data) {属性。所以而不是：

data

...循环遍历$.each(data.video, function(video, data) {的每个顶级属性，尝试：

data.video

...仅循环遍历video数组中的项目。

另外，假设该回调中的两个参数是当前项目索引和当前项目，我可能会将参数从data和i重命名为item和{{ 1}}。使用名为data的不同变量（一个是$.getJSON()回调的参数，另一个是$.each()回调的参数），这有点令人困惑。

Answer 2

您正在尝试迭代整个JSON对象 - 您应该迭代其中一个键。试试这个：

$.each(data.video, function(index, video) {
  $('#stage').append('<p> Name: ' + video.name+ '</p>');
  $('#stage').append('<p> URL: ' + video.url+ '</p>');
});

如果要添加其他数据，可以遍历整个层次结构。例如：

$.each(data.video, function(index, video) {
  $('#stage').append('<p> Name: ' + video.name + '</p>');
  $('#stage').append('<p> URL: ' + video.url + '</p>');

  $.each(video.author.data, function(index, author) {
    $('#stage').append('<p> Author: ' + author.name_author + '</p>');
  });

  $('#stage').append('<br/>');
});

最后，如果你想使用上面的语法访问第n条记录，你可以这样做：

// n is the 0-based position of the json record you're interested in displaying
var video = data.video[n];
$('#stage').append('<p> Name: ' + video.name + '</p>');
$('#stage').append('<p> URL: ' + video.url + '</p>');
// etc...

这里的工作示例：http://livecoding.io/3495017

Answer 3

看起来你正在尝试迭代JSON的错误部分。我相信你的$ .each行应该是这样的：

$.each(data.video, function(index, video){
  // video.name, video.url, etc
}

Jquery获取JSON数据

3 个答案: