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, Nov 28 '13 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, Nov 28 '13 at 12:41
You cannot make Ajax requests to external domains, unless they explicitly allow it. Learn more about the **same-origin policy**: http://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: http://www.bandsintown.com/api/overview, http://www.bandsintown.com/api/requests#artists-get. — Felix Kling, Nov 28 '13 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, Nov 28 '13 at 12:46
check this link to http://www.bandsintown.com/api/authentication — rynhe, Nov 28 '13 at 12:47
No. While the browser can make HTTP requests to any URL, **Ajax** requests can only be made to the same host the page was loaded from, unless the external URL has CORS enabled. There is also JSONP which is a workaround and works well in most cases, but it's not Ajax. In both cases the external has to support these methods, otherwise you cannot access the information. You might want to read [Ways to circumvent the same-origin policy](http://stackoverflow.com/q/3076414/218196). — Felix Kling, Nov 28 '13 at 12:50
I now use an app id and the api version in the url but still doesn't return anything.Code: $.getJSON("http://api.bandsintown.com/artists/weezer/events.json?api_version=2.0&app_id=music_db", function(result) { $.each(result, function(key, val) { alert(key + val); }); }); — Karsten Tietje, Nov 28 '13 at 12:56

Ramesh · Accepted Answer · 2013-11-28T13:02:41.190

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 '13 at 13:02

answered Nov 28 '13 at 12:56

Ramesh

4,223
2
16
24

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. – Karsten Tietje Nov 28 '13 at 13:06
"If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead.". - from http://api.jquery.com/jQuery.getJSON/ – Ramesh Nov 28 '13 at 13:20

AAA · Answer 2 · 2013-12-03T12:07:39.523

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 03 '13 at 12:07

answered Nov 28 '13 at 12:42

AAA

142
7

The actual problem is that the OP cannot make an Ajax request to the URL. – Felix Kling Nov 28 '13 at 12:44
Still doesn't return anything. – Karsten Tietje Nov 28 '13 at 12:45
I now use app id and the api version in the url but still doesn't return anything. – Karsten Tietje Nov 28 '13 at 12:56

score 0 · Answer 3 · answered Nov 28 '13 at 12:59

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 '13 at 12:59

leaksterrr

3,800
7
34
65

No, CORS is an alternative. And JSONP only works if the server supports it. – Felix Kling Nov 28 '13 at 18:23

wwmoraes · Answer 4 · 2013-11-28T13:32:25.597

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

I'd say the problem is called *same-origin policy* and one solution is called *CORS*. — Felix Kling, Nov 28 '13 at 18:23
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). — wwmoraes, Dec 04 '13 at 01:22

getJson problems returning array

4 Answers4