1

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!

Maksym Kozlenko
  • 10,273
  • 2
  • 66
  • 55
Noah-1
  • 396
  • 1
  • 5
  • 20
  • 1
    Probably because there is no `title` attribute on the root JSON element, but on each element of the `posts` array – JCOC611 Dec 02 '15 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 Dec 02 '15 at 22:40
  • This is what I get when I run the request: "XMLHttpRequest cannot load http://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 Dec 02 '15 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 Dec 02 '15 at 22:49
  • Check if they provide JSONP http://learn.jquery.com/ajax/working-with-jsonp/ – Jonathan Dec 02 '15 at 22:50
  • You have CORS issues, because the `Access-Control-Allow-origin:*` is not present in the response. – Danny Fardy Jhonston Bermúdez Dec 02 '15 at 22:58
  • If you access the data from a server or an app this problem won't appear because it is only relevant to JavaScript executed in a Browser. That is why you can use the data without any problems from within your app. See https://en.m.wikipedia.org/wiki/Cross-Origin_Resource_Sharing – Jonathan Dec 02 '15 at 23:06

3 Answers3

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)
        });
Maksym Kozlenko
  • 10,273
  • 2
  • 66
  • 55
0

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

Martin Schneider
  • 3,268
  • 4
  • 19
  • 29
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

Community
  • 1
  • 1
roshini
  • 112
  • 7