CODEWITHSUNDEEP
phpjavascriptjqueryhtmljson
Praveen S
Praveen S

Reputation: 10393

Error in displaying retrieved JSON content

In continuation to my question asked here, i have created a test app to check the json parsing using jquery. It doesnt seem to work. I can append data in the click function. However getting data from that url and parsing seems to fail. Can someone provide some useful hints?

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>");
    $.getJSON("http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=function&alt=jsonc&v=2", function(data) {
        var dataContainer = $("#data ul");
        $.each(data.data.items, function(i, val) {
         $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>");
if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') {
dataContainer.append("<li><a href = "+val.player.default+" target = '_blank'>"+val.title+"</a></li>");
        }
        });
        });


  });
});
</script>
</head>

<body>
<h2>Header</h2>
<p>Paragrapgh</p>
<p>Paragraph.</p>
<button>Click me</button>
</body>
</html>

TIA, Praveen S

Upvotes: 0

Views: 148

Answers (2)

Philar
Philar

Reputation: 3897

The callback is provided so that you can bypass the same origin policy. Thus retrieved JSON data is enclosed within the function name and cannot be parsed directly. Details of doing this with jquery are given here. Please refer the example given below

<script>
 $.ajax({
         url:'http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?alt=jsonc&v=2&callback=?',
         dataType: "jsonp",
         timeout: 5000,
         success: function(data){
                    alert(data.apiVersion);
                    //add your JSON parsing code here
                  }

 });

</script>

Please find the working example here.

Upvotes: 2

Daniel
Daniel

Reputation: 2381

the url does not return a json like you would like try without the callback=function with the callback it uses a method called jsonp: http://ajaxian.com/archives/jsonp-json-with-padding

Upvotes: 0

Related Questions