JQuery JSON data not displaying

Question

I am having trouble displaying some jason from a page.

The data is there but I think it might have to do with this line:

document.write(fbResults.cats[0].title);

Here is the full html source:

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

    $(document).ready(function() {
        $.getJSON('http://mydomain.com/api/get_cats', function(fbResults) {
            document.write(fbResults.cats[0].title);
        });
    });
</script>

</head>
<body>

</body>
</html>

And here is the data that it's reading:

{"cats":[

{"id":"1","title":"mytitle1","colour":"#EE297C"},
{"id":"2","title":"mytitle2","colour":"#EE412F"},
{"id":"3","title":"mytitle3","colour":"#F5821F"},
{"id":"4","title":"mytitle4","colour":"#00AEEF"},
{"id":"5","title":"mytitle5","colour":"#00B495"},
{"id":"6","title":"mytitle6","colour":"#006476"}

]}

It is not displaying anything on the page.

On firebug console I get this error:

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.

No traces of the json data there

What I'm I doing whong?

John Green · Accepted Answer · 2012-08-09 20:29:47Z

5

You shouldn't document.write after the page has loaded (which is certainly the case here).

If you want to write it to the page, you'll need to create HTML and append it. Just replace the document.write:

$('body').append('<p>'+fbResults.cats[0].title+'</p>');

Update:

Your example makes a fully qualified URL call. Is that server the exact same one that you're running the page from? If it isn't the XHR will just eat the request (and sometime not tell you). If you need to go cross domain, you'll need to use JSONp. If you're attempting to run this locally while pulling data from the net, it'll break.

edited Aug 9, 2012 at 20:29

answered Aug 9, 2012 at 20:15

John Green

13.5k3 gold badges31 silver badges52 bronze badges

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

2 Comments

MrOBrian Over a year ago

According to MDN you can, but I agree that it's better to append a new element, or update an existing one, rather than use document.write

John Green Over a year ago

Hmm. You're right on both counts (although... anyone who uses document.write on a document that has already been closed is in for trouble).

Shyju · Accepted Answer · 2012-08-09 20:18:46Z

0

Try this

 $.each(fbResults.cats,function(index,item){
    document.write(item.title);       
  });

Working sample : http://jsfiddle.net/zWhEE/8/

answered Aug 9, 2012 at 20:18

Shyju

220k106 gold badges420 silver badges499 bronze badges

8 Comments

Satch3000 Over a year ago

OK, your code works when I add the data to the actual page as you did but when I change the code and add "$.getJSON('mydomain.com/api/get_cats', function(fbResults) ... instead it's not reading it although the data is exactly the same. Could it be because I'm running the page on my pc desktop and not on any server?

Shyju Over a year ago

Are you doing a cross domain call ?

Satch3000 Over a year ago

Well, my html page is on my pc desktop and I'm trying to get the data from an online page...is this a problem?

Shyju Over a year ago

you can not do that becuase of same origin policy en.wikipedia.org/wiki/Same_origin_policy

Satch3000 Over a year ago

so I need to download the json data locally?

|

Muthukumar M · Accepted Answer · 2012-08-09 20:21:13Z

0

its seems work for me please check this http://jsfiddle.net/TxTCs/1/

answered Aug 9, 2012 at 20:21

Muthukumar M

1,13610 silver badges19 bronze badges

Collectives™ on Stack Overflow

JQuery JSON data not displaying

3 Answers 3

2 Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related