Jquery Get JSON Data

Question

Can somebody help me to get JSON with JQuery? I think I am making some mistakes in my JQuery code. Any help will be appreciated. Below is my JSON and 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 Code

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

You're trying to iterate over the entire JSON object - you should iterate over one of its keys instead. Try this:

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

If you want to add additional data, you can traverse over the entire hierarchy. For example:

$.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/>');
});

Finally, if you want to access the n-th record, using the syntax above, you could do:

// 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...

Working example here: http://livecoding.io/3495017