Accessing JSON service from localhost or file://

Question

I am making a html page intended to be run locally on a PC, preferably without a local server runing (file://). I am also using jQuery to make manipulation/AJAX a little easier.

I am trying to load 2 results from the twitter API, but I get an error. The code is as follows:

$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=someuser&count=9", {},
    function (data) {
        $.each(data.items, doSomething1);
    });
$.getJSON("http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9", {},
    function (data) {
        $.each(data.items, doSomething2);
    });

I also tried the following code, but it didn't change the outcome.

$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json",
    {
        count:          "9",
        screen_name:    "someuser"
    },
    function(data) {
        $.each(data.items, updateAWTweets);
    });
$.getJSON("http://search.twitter.com/search.json",
    {
        q:              "somequery",
        result_type:    "recent",
        count:          "9"
    },
    function(data) {
        $.each(data.items, updateHashTagTweets);
    });

I get the following error in chrome (on a localhost server):

XMLHttpRequest cannot load http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9. Origin http://localhost:62153 is not allowed by Access-Control-Allow-Origin.

or (with a file:// link)

XMLHttpRequest cannot load http://api.twitter.com/1/statuses/user_timeline.json?screen_name=someuser&count=9. Origin null is not allowed by Access-Control-Allow-Origin.

Does anyone know how I can fix this?

possible duplicate of [jQuery.getJSON not working for twitter](http://stackoverflow.com/questions/5183831/jquery-getjson-not-working-for-twitter) — epascarello, Mar 14 '11 at 14:31

no.good.at.coding · Accepted Answer · 2011-03-14T14:31:32.823

11

You're running into the same-origin policy restriction - your script can't access any other domain apart from the one it was loaded from.

You could give JSONP a try - that's one common solution to getting data across domains:
- http://www.chazzuka.com/blog/?p=221
- http://jquery-howto.blogspot.com/2009/04/twitter-jsonjsonp-api-url.html
Your code would look something like this (note the addition of callback=? to the URL):
```
$.getJSON("http://search.twitter.com/search.json?q=somequery&result_type=recent&count=9&callback=?", 
          {},
          function (data) {
                  $.each(data.items, doSomething2);  
     });
```
Another option is to setup a proxy - you can use Apache httpd as a proxy/reverse proxy to get around this restriction.

edited Mar 14 '11 at 14:31

answered Mar 14 '11 at 14:10

no.good.at.coding

20,221
2
60
51

Seems reasonable but now I get a different error: "Uncaught TypeError: Cannot read property 'length' of undefined" – dtech Mar 14 '11 at 20:07
It seems like you're trying to access the `length` property on what you think is an array but is actually `undefined`. Ensure that your data actually exists (`if(!assumedArray){//handle missing data}else{//do usual processing}`. What does Twitter return when there are no results for a search query? Also, take a look at http://stackoverflow.com/questions/3040069/uncaught-typeerror-cannot-read-property-length-of-undefined-jquery for some suggestions on how to debug this (and other) exceptions. – no.good.at.coding Mar 14 '11 at 20:37
1

Here's a [bare-bones fiddle](http://jsfiddle.net/nogoodatcoding/reJN6/4/) that fetches tweets for a particular user and also displays results of a search. It that of any help? – no.good.at.coding Mar 14 '11 at 20:47
I was just using the built-in jQuery functions and didn't access length myself at all. But nevermind, I found the solution to my asking problem, thx :) – dtech Mar 14 '11 at 21:03

score 6 · Answer 2 · answered Mar 14 '11 at 14:21

6

Add the JQuery's JSONP callback to the URL

$.getJSON("http://search.twitter.com/search.json?callback=?", {

answered Mar 14 '11 at 14:21

epascarello

204,599
20
195
236

score -2 · Answer 3 · answered Jan 28 '13 at 10:20

-2

Don't use this $.getJSON() Its not flexible.. You can use

$.ajax({
    url:"test.json",
    dataTypr:"json",
    async:false
}).responseText;

this can easily accessed by the html coding....

answered Jan 28 '13 at 10:20

Abi

65
1
6

Accessing JSON service from localhost or file://

3 Answers3

Linked

Related