getJson problems returning array

Question

I'm trying to parse some data from a JSON file. The JSON file in question can be seen here: http://api.bandsintown.com/artists/weezer/events.json

I use jQuery to retrieve the JSON file with the $.getJSON function, but nothing happens when i try to append the data or try to show it in a alert box.

Code:

$.getJSON("api.bandsintown.com/artists/weezer/events.json", function(result) {

    $.each(result, function(key, val) {
        alert(key + val);
    });

});

I have used several approaches but I can't seem to find the problem.

Have you tried "http://api.bandsintown.com/artists/weezer/events.json" instead? — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Nov 28, 2013 at 12:36
Yeah i did try with http in front of the url without luck. I get no errors in my browser console. I have several other getJson functions where i pull stuff from Freebase, Facebook & Youtube without any problems. — Karsten Tietje
– Karsten Tietje, Commented Nov 28, 2013 at 12:41
You cannot make Ajax requests to external domains, unless they explicitly allow it. Learn more about the same-origin policy: en.wikipedia.org/wiki/Same-origin_policy. It looks like the API supports JSONP, but it then asks for an app ID. I suggest you read the documentation: bandsintown.com/api/overview, bandsintown.com/api/requests#artists-get. — Felix Kling
– Felix Kling, Commented Nov 28, 2013 at 12:42
Seems theres still a lot for me to learn. I thought as long as i could view it in my browser i could also retrieve it via getJson. I will look into it. Thx — Karsten Tietje
– Karsten Tietje, Commented Nov 28, 2013 at 12:46

Ramesh · Accepted Answer · 2013-11-28 13:02:41Z

2

Looks like you are doing a cross domain request in AJAX. So it is not working.

Try jsonp:

$.getJSON("http://api.bandsintown.com/artists/weezer/events.json?callback=? 
&app_id=ramesh", function(result) {

    $.each(result, function(key, val) {
      alert(key + val);
    });

});

Working fiddle: http://jsfiddle.net/WtaPu/1/

app_id is sent referring http://www.bandsintown.com/api/authentication

edited Nov 28, 2013 at 13:02

answered Nov 28, 2013 at 12:56

Ramesh

4,3032 gold badges20 silver badges24 bronze badges

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

2 Comments

Karsten Tietje Over a year ago

Thx taht did it. So by adding the callback you are using jsonp? I'm still a bit confused. I would rather understand the mechanics than just copy other peoples code.

Ramesh Over a year ago

"If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead.". - from api.jquery.com/jQuery.getJSON

leaksterrr · Accepted Answer · 2013-11-28 12:59:43Z

0

Whenever you do a cross-browser request in AJAX you need to be using JSONP: http://api.jquery.com/jQuery.getJSON/

answered Nov 28, 2013 at 12:59

leaksterrr

4,1667 gold badges37 silver badges69 bronze badges

1 Comment

Felix Kling Over a year ago

No, CORS is an alternative. And JSONP only works if the server supports it.

wwmoraes · Accepted Answer · 2013-11-28 13:32:25Z

0

Trying on my console, I get the following:

[Error] XMLHttpRequest cannot load http://api.bandsintown.com/artists/weezer/events.json. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

This "problem" is called Cross-Origin Resource Sharing (a.k.a. CORS):

This document defines a mechanism to enable client-side cross-origin requests. Specifications that enable an API to make cross-origin requests to resources can use the algorithms defined by this specification. If such an API is used on example.org resources, a resource on hello-world.example.org can opt in using the mechanism described by this specification (e.g., specifying Access-Control-Allow-Origin: example.org as response header), which would allow that resource to be fetched cross-origin from example.org.

This is a security mecanism that, per default, browsers and servers apply when retrieving data cross-site. The W3C recommendation of CORS says that the server must implement the header Access-Control-Allow-Origin, either specifying your server as allowed, or allow everyone to fetch data from it (using the wildcard *):

User agents commonly apply same-origin restrictions to network requests. These restrictions prevent a client-side Web application running from one origin from obtaining data retrieved from another origin, and also limit unsafe HTTP requests that can be automatically launched toward destinations that differ from the running application’s origin.

This applies only to user agents (browsers, mostly) though. So, trying to fetch the data through ruby, for example, yields it accordingly:

require 'open-uri'
open("http://api.bandsintown.com/artists/weezer/events.json"){|f| f.read()}

This will return a string containing the JSON.

About JSONP: You won’t be able to use it as well - the server must return the JSON data inside a callback function:

my_callback([{"valid_json":"no!"},{"valid_javascript":"yes!"}])

Which would be done (if supported) through a script tag:

<script type="text/javascript" src="http://api.bandsintown.com/artists/weezer/events.json?jsonp=my_callback"></script>

Source: W3C

edited Nov 28, 2013 at 13:32

answered Nov 28, 2013 at 13:12

wwmoraes

11 bronze badge

2 Comments

Felix Kling Over a year ago

I'd say the problem is called same-origin policy and one solution is called CORS.

wwmoraes Over a year ago

This policy is part of CORS, which points out possible problems of doing cross-domain requests, the history behind this not being possible and now it includes specifications to allow doing so. If the policy weren’t part of CORS, we’d be unable to hotlink files from, for example, CDN’s. Sounds like the common sense around XHR: it’s mostly related to asynchronous calls (AJAX), but it can also be used to make under-the-hood synchronous requests (like on workers/load/unload).

AAA · Accepted Answer · 2013-12-03 12:07:39Z

0

Use curl

$to=curl_init('http://api.bandsintown.com/artists/weezer/events.json');

curl_setopt( $to, CURLOPT_POST, true );
curl_setopt( $to, CURLOPT_RETURNTRANSFER, true );
curl_setopt( $to, CURLOPT_POSTFIELDS, $post );
curl_setopt( $to, CURLOPT_SSL_VERIFYPEER, false);
$result = curl_exec( $to);// final result

edited Dec 3, 2013 at 12:07

answered Nov 28, 2013 at 12:42

AAA

1427 bronze badges

3 Comments

Felix Kling Over a year ago

The actual problem is that the OP cannot make an Ajax request to the URL.

Karsten Tietje Over a year ago

Still doesn't return anything.

Karsten Tietje Over a year ago

I now use app id and the api version in the url but still doesn't return anything.

Collectives™ on Stack Overflow

getJson problems returning array

4 Answers 4

2 Comments

1 Comment

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related