Question

I found a jquery function online that i then tweaked a little, but it takes a youtube channels feed data and turns it into a json object. It then stores data from the objects arrays. I need to store extra data that IS given, but I dont know how to display the data so I can see the data in its arrays. Im sure this sounds confusing and that is because I dont know about json objects or how to print out the data in jquery. Ive done it before in php with the print function I believe.

This is the function mentioned:

$j(function() {
    $j.getJSON('http://gdata.youtube.com/feeds/users/iCallOfDutyFILMS/uploads?orderby=published&alt=json-in-script&callback=?&max-results=1', function(data) {
        $j.each(data.feed.entry, function(i, item) {
            var updated = item.updated;
            var url = item['media$group']['media$content'][0]['url'];
            var thumb = item['media$group']['media$thumbnail'][0]['url'];
            var numViews = item['yt$statistics']['viewCount'];
            //var vidDescription = item[''][''];
            var width = 710; //only change this number
            var height = width*9/16;
            //...rest left out...

        });
    });
});

I want to print out the array to see how to grab the video description. I just dont know the path to it through the array. Is there a way in jquery to print out the arrays similar to how I was able to in php?

Answer 1

In Chrome or Firefox, Press F12, This will bring up the Inspector. Click on ‘Console’ to show the console window.

Now in your javascript code, whatever variable or object you want to print or ‘inspect’. Pass it into the console log method.

var your_array_variable = "a string variable";  
console.log(your_array_variable); //<-- This is what you want to do!

Now refresh the page and run the event or function that you are building.

Voila!… In your console window you should see >Object (If you print a Object).

Or in the example above.. You would see a string variable in the console.

Click on the expand tree node, (>) to view the object/variables details.

You can console.log almost anything!.. Its a great way to learn whats going on.

You can also set ‘breakpoints’, but this is a whole other question!..

I think what your looking for is:

console.log(data); // To show the JSON data received

---

Update
Try this, It worked for me, in console you will see 2 objects you can click on and inspect. The first is the data from the json request, the second is the item looped in the $.each.
This worked for me, On click of anything with the id="get_json". This will make the request, and log the response to the console.

    $('#get_json').click(function(e){
        e.preventDefault();
        $(function() {
            var json_url = 'http://gdata.youtube.com/feeds/users/iCallOfDutyFILMS/uploads?orderby=published&alt=json-in-script&max-results=1&callback=?';
            $.getJSON(json_url, function(data) {
                console.log(data); // Here we log to our console
                $.each(data.feed.entry, function(i, item) {
                    console.log(item); // This is what you want i think
                    var updated = item.updated;
                    var url = item['media$group']['media$content'][0]['url'];
                    var thumb = item['media$group']['media$thumbnail'][0]['url'];
                    var numViews = item['yt$statistics']['viewCount'];
                    //var vidDescription = item[''][''];
                    var width = 710; //only change this number
                    var height = width*9/16;
                    //...rest left out...

                });
            }).success(function() { alert("success"); })
            // Errors are your friend!.. Use them..
              .error(function(jqXHR, textStatus, errorThrown) {
                        console.log("error " + textStatus);
                        console.log("error throw " + errorThrown);
                        console.log("incoming Text " + jqXHR.responseText);
                    }) // End of .error
              .complete(function() { alert("complete"); });
            });
        });