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

        });
    });
});

Need to be more specific about the actual problem you're having. I do see one issue with how you're trying to access your json - video is an array - you need to index into your array to be able to use properties like the ones I believe you're trying to access. — kinakuta
– kinakuta, Commented Aug 28, 2012 at 4:38
Are you familiar with how arrays work? So data.video[0], for example, would reference the first element in the array. From that point data.video[0].id would reference the id property of the first element in the video array, etc. — kinakuta
– kinakuta, Commented Aug 28, 2012 at 4:59

Gabriel Florit · Accepted Answer · 2012-08-28 05:35:37Z

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

How can I get further more data point like comments/ data and author.... Also unable to get $('#stage').append('<p Name: ' + value.name+ '</p>');
Fixed the incorrect value.name. Regarding more data, exactly what structure do you want?
Just would like to spit data on page to have better understating of accessing data
Awesome, Last question :) how to get only one specific record from json?

nnnnnn · Accepted Answer · 2012-08-28 04:39:16Z

I'm guessing you're trying to loop through each item in the video array that is a property of your data object, given that within your $.each() loop you're trying to access .video, .name and .url properties. So instead of:

 $.each(data, function(video, data) {

...which is looping through each top-level property of data, try:

 $.each(data.video, function(video, data) {

...to loop just through the items in the data.video array.

Also, given that the two parameters in that callback are the current item index and the current item I'd probably rename the parameters from video and data to i and item. It's a little confusing having different variables both called data (one being the parameter of the $.getJSON() callback, the other being a parameter of your $.each() callback).

Paul Richter · Accepted Answer · 2012-08-28 04:39:56Z

1

It looks like you're trying to iterate over the wrong part of your JSON. I believe your $.each line should look like this:

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

answered Aug 28, 2012 at 4:39

Paul Richter

11.1k10 gold badges56 silver badges89 bronze badges

Collectives™ on Stack Overflow

Jquery Get JSON Data

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related