Parse JSON from twitter using JQUERY

Question

I want to search a tweet from twitter, it will depend on text or hashtag. Then Show it on <div id="result"> . but i get confused because my code doesn't show the tweet.

Here is my code to read JSON from twitter search :

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function()
    {

        $('#btn').click(function()
        {
            $.getJSON("http://search.twitter.com/search.json?q="+$('#search').val(),function(data)
            {
                $.each(data.results, function(i,data){
                    var from = data.from_user;
                    var tw_content = data.text;

                    $('#result').append("<p>User : "+from+"<br>Tweet : "+tw_content+"</p>");
                });
            });
        });

    });

</script>

<input type="text" id="search"/><input type="button" id="btn" value="cari"> 

<div id="result">

</div>

And while I run this, nothing happen. anyone can help me ?

Check your console log: "cannot load http://search.twitter.com/search.json?q=. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin." You may need to use JSONP. — Barmar, Nov 29 '12 at 07:26

score 0 · Answer 1 · edited May 23 '17 at 11:48

0

You should use jsonp to get the result, because jsonp provides a method to request data from a server in a different domain

Check this FIDDLE

I use $.ajax function with dataType: jsonp here

Check this and this for JSONP

edited May 23 '17 at 11:48

Community

1
1

answered Nov 29 '12 at 07:38

Usman

3,200
3
28
47

score 0 · Accepted Answer · answered Nov 29 '12 at 07:45

I would do something like below:

    $(document).ready(function() {
  // Declare variables to hold twitter API url and user name
  var twitter_api_url = 'http://search.twitter.com/search.json';
  var twitter_user = 'behudinnystrom';

  // Enable caching
  $.ajaxSetup({ cache: true });

  // Send JSON request
  // The returned JSON object will have a property called "results" where we find
  // a list of the tweets matching our request query
  $.getJSON(
    twitter_api_url + '?callback=?&rpp=5&q=from:' + twitter_user,
    function(data) {
      $.each(data.results, function(i, tweet) {
        // Uncomment line below to show tweet data in Fire Bug console
        // Very helpful to find out what is available in the tweet objects
        //console.log(tweet);

        // Before we continue we check that we got data
        if(tweet.text !== undefined) {
          // Calculate how many hours ago was the tweet posted
          var date_tweet = new Date(tweet.created_at);
          var date_now = new Date();
          var date_diff = date_now - date_tweet;
          var hours = Math.round(date_diff/(1000*60*60));

          // Build the html string for the current tweet
          var tweet_html = '<div class="tweet_text">';
          tweet_html += '<a href="http://www.twitter.com/';
          tweet_html += twitter_user + '/status/' + tweet.id + '">';
          tweet_html += tweet.text + '<\/a><\/div>';
          tweet_html += '<div class="tweet_hours">' + hours;
          tweet_html += ' hours ago<\/div>';

          // Append html string to tweet_container div
          $('#tweet_container').append(tweet_html);
        }
      });
    }
  );
});

DEMONSTRATION

Parse JSON from twitter using JQUERY

2 Answers2