Question

I try to display JSON data in html file with jQuery.

But in html I have nothing for output even null or unindefied

I try with external JSON data from Flickr and I see at least [Object]

Also I try to test both files – HTML and JSON on local server – again nothing

I add MIME Type on my server for application/json

I checked JSON- it’s valid

In Firebug I see JSON Response (see image below)

On same page I use and jQuery mobile and DW Fluid grid layout if it matters.

my JSON is generated with PHP json_encode:

({ "title": "Art and Culture",
"items": [
{"id":"kunst-im-tunnel","lat":"51.219917"},
{"id":"kunsthalle","lat":"51.227568"},
{"id":"kunstsammlung-nordrhein-westfalen","lat":"51.22841"}]
})

PHP code for JSON

<?php
header('Cache-Control: no-store, no-cache, must-revalidate, private, post-check=0, pre-check=0');
header('Pragma: no-cache'); 
header('Expires: Sat, 26 Jul 1997 05:00:00 GMT'); 
header('Content-type: application/json; charset=utf-8');
$out = json_encode($post);
echo "({ \"title\": \"Art and Culture\",\"items\": " .$out." })";
?> 

my javascript code is:

$.getJSON("http://example.com/app.php?cat=category&jsoncallback=?",
{format: "json"},
function(data){
    $.each(data.items, function(i,item){

        $('<li>' +  item.id + '</li>').appendTo("#list");

    });

});

Screenshot from Firebug:

Answer 1

({ "title": "Art and Culture",
"items": [
{"id":"kunst-im-tunnel","lat":"51.219917"},
{"id":"kunsthalle","lat":"51.227568"},
{"id":"kunstsammlung-nordrhein-westfalen","lat":"51.22841"}]
})

IS NOT VALID JSON.

But this one is Valid JSON

 { "title": "Art and Culture",
   "items": [
              {"id":"kunst-im-tunnel","lat":"51.219917"},
              {"id":"kunsthalle","lat":"51.227568"},
              {"id":"kunstsammlung-nordrhein-westfalen","lat":"51.22841"}]
 }

And it will work nicely. Here is the working sample http://jsfiddle.net/cqfQp/1/

Use jsonlint to validate JSON.

Another suggestion is, Try to avoid calling the append function in a loop. Create a variable and call the function only once. Something like this

     var strItems="";
     $.each(data.items, function(i,item){
         strItems+='<li>' +  item.id + '</li>';
     });
     $("#list").html(strItems); 

EDIT : Make sure you call the getJSON on document ready function

 $(function(){
      $.getJSON("http://example.com/app.php?cat=category&jsoncallback=?",function(data){
        var strItems="";
        $.each(data.items, function(i,item){
            strItems+='<li>' +  item.id + '</li>';
        });
        $("#list").html(strItems);    
     });
 });