How to retrieve data from JSON with javascript and jQuery?

Question

Ok so I have been trying to retrieve a single string in JSON from this website: http://blog.teamtreehouse.com/api/get_recent_summary/?count=1

This is the snippet I have:

<html>
<head>
<title>Simple Page</title>
</head>
  <script src="jquery.js"></script>
    <script>
    $(document).ready(function() {
        $.getJSON('http://blog.teamtreehouse.com/api/get_recent_summary/?count=1', function(data) 
        { 
            alert(data.title)
        });     
    });
    </script>
</html>

Just trying to get a simple title and display it as an alert or just write it on the website, for some reason I can't get it right. I also checked that my jquery is working so it can't be that.

Thanks in advance!

Probably because there is no title attribute on the root JSON element, but on each element of the posts array — JCOC611
– JCOC611, Commented Dec 2, 2015 at 22:38
I would console.write(data) and see what's coming back, if anything. Might be Title instead of title or a JSON object not being returned. — jnoreiga
– jnoreiga, Commented Dec 2, 2015 at 22:40
This is what I get when I run the request: "XMLHttpRequest cannot load blog.teamtreehouse.com/api/get_recent_summary/?count=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. " so you are just not authorized to read this resource, unless the server gives you permission — MrE
– MrE, Commented Dec 2, 2015 at 22:45
I remember using this json data for an app sometime ago, I don't understand why it wouldn't let me access it now. — Noah-1
– Noah-1, Commented Dec 2, 2015 at 22:49
Check if they provide JSONP learn.jquery.com/ajax/working-with-jsonp — Jonathan
– Jonathan, Commented Dec 2, 2015 at 22:50

Maksym Kozlenko · Accepted Answer · 2015-12-03 02:47:04Z

4

No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS HTTP header is missing, so you can't do AJAX requests directly. You need to use server side proxy or use http://crossorigin.me/ service to fetch data from remote website.

Server you are accessing provides JSONP support, so you can convert it into JSONP call by adding callback=? to URL

$.getJSON('http://blog.teamtreehouse.com/api/get_recent_summary/?count=1&callback=?', function(data) 
{ 
    alert(data.posts[0].title)
});

In case if JSONP is not supported you can use crossorigin.me service, but I would not rely on this service for production use.

$.getJSON('http://crossorigin.me/http://blog.teamtreehouse.com/api/get_recent_summary/?count=1', function(data) 
        { 
            alert(data.posts[0].title)
        });

edited Dec 3, 2015 at 2:47

answered Dec 3, 2015 at 2:37

Maksym Kozlenko

10.4k2 gold badges69 silver badges55 bronze badges

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

Comments

Martin Schneider · Accepted Answer · 2015-12-02 22:41:06Z

0

Looking at the Data that is returned from the provided endpoint your callback should read alert(data.posts[0].title)

answered Dec 2, 2015 at 22:41

Martin Schneider

3,2784 gold badges21 silver badges30 bronze badges

1 Comment

Noah-1 Over a year ago

That makes sense, but for some reason it still doesn't get anything.

Community · Accepted Answer · 2017-05-23 11:44:40Z

0

for this type of error you need to pass header param also with request check below links...

How to allow CORS? Getting Cross Origin Block Request [CORS] error when using .getJSON to get Play Store App Details

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Dec 3, 2015 at 2:00

roshini

1127 bronze badges

Collectives™ on Stack Overflow

How to retrieve data from JSON with javascript and jQuery?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related