CODEWITHSUNDEEP
javascriptajaxjsonjquery
Jalaa Zahwa
Jalaa Zahwa

Reputation: 538

Can't load json data in jquery

I am trying to get json data from twitter . http://api.twitter.com/1/statuses/public_timeline.json this is my code 

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function(){

            $("button").click(function(){
                $.getJSON("http://api.twitter.com/1/statuses/public_timeline.json",function(result){
                    $.each(result, function(i, field){
                        $("div").append(field + " ");
                    });
                });
            });
        });
    </script>
</head>
<body>

<button>Get JSON data</button>
<div></div>

</body>
</html>

it is from http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_getjson but it is not working !

Upvotes: 3

Views: 1969

Answers (4)

Jijo John
Jijo John

Reputation: 1375

You can Access json data from other domain using $.ajax() jquery method .See the code example below

   $.ajax({

   url : " // twitter api url",
   dataType : "JSON",
   cache : false,
   success : function(success)
    {
     $.each(success, function(index,value) {$("div").append(value + ""); })
    }

   error : function() { //Statements for handling ajax errors }

   });

The url you are using in that ajax request is returning a json array which contains an error

{"errors": [{"message": "The Twitter REST API v1 is no longer active. Please       
migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.", "code": 68}]}

You need to migrate to API v1.1 before process the request , Replace the twitter api url with the new json url which is provided in API v1.1

Upvotes: 0

Sirko
Sirko

Reputation: 74036

You are running in the same origin policy in JavaScript. This basically says, that you can't access resources from different domains (in your case the other domain would be twitter.com).

One solution is to use JSONP. The twitter API supports this. You can run a JSONP-request with jQuery in your case like this:

$.ajax({
  url: "http://api.twitter.com/1/statuses/public_timeline.json",
  cache: false,
  dataType: 'jsonp',
  success: function( result ){
    $.each(result, function(i, field){
                        $("div").append(field + " ");
                    });
  }
});

Besides, w3schools is no reliable source for information. Better use something like the Mozilla Developer Network.

Upvotes: 1

ajtrichards
ajtrichards

Reputation: 30565

Your trying to get a document from a different domain and the requested URL is blocking your request due to Cross-Origin Resource Sharing. You can read up on that here: http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

You can use JSONP with jQuery which should allow you to complete the request but that page you are requesting gets a 404 error so there's probably not much you can do with the result anyway.

Upvotes: 0

rdrkt
rdrkt

Reputation: 138

Check out the json document you are trying to load. It returns the following error when I try to access it:

{"errors":[{"message":"Sorry, that page does not exist","code":34}]}

I would try replacing the url with a working api call to twitter before you worry about whether the code snippet is working. :)

Upvotes: 0

Related Questions