jQuery getJSON output nothing

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: Firebug Net result

can you show your HTML or create a fiddle?

Hunter McMillen
– Hunter McMillen

2012-06-06 12:28:20 +00:00
Commented Jun 6, 2012 at 12:28 — Hunter McMillen
– Hunter McMillen, Commented Jun 6, 2012 at 12:28
link complete code

Deniz Fuchidzhiev
– Deniz Fuchidzhiev

2012-06-06 12:33:27 +00:00
Commented Jun 6, 2012 at 12:33 — Deniz Fuchidzhiev
– Deniz Fuchidzhiev, Commented Jun 6, 2012 at 12:33

Shyju · Accepted Answer · 2012-06-06 12:43:49Z

2

({ "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);    
     });
 });

edited Jun 6, 2012 at 12:43

answered Jun 6, 2012 at 12:29

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Deniz Fuchidzhiev Over a year ago

json output I fixed JSON code it but not works again

Shyju Over a year ago

@awenart : It works for me. Make sure you call that in the ready event. jsfiddle.net/8EY7B/3

Shyju Over a year ago

@awenart: Are you making a cross domain request ?

Deniz Fuchidzhiev Over a year ago

Yes I try it but not works. Both html and json are in the same domain

Deniz Fuchidzhiev Over a year ago

html with my json html with Flickr json - I see at least undefined

|

lanzz · Accepted Answer · 2012-06-06 12:26:20Z

0

You are generating invalid JSON — the parentheses enclosing your entire JSON expression should not be there.

answered Jun 6, 2012 at 12:26

lanzz

43.4k12 gold badges93 silver badges99 bronze badges

1 Comment

Deniz Fuchidzhiev Over a year ago

I try every variant with JSON formating but this not change anything

Collectives™ on Stack Overflow

jQuery getJSON output nothing

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related