Jump to content



Photo

Loading tweets & limiting characters with JSON


  • Please log in to reply
1 reply to this topic

#1 Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 28 September 2012 - 23:42

This script basically lets me load tweets and user info with jQuery. The problem is, I don't have the right url to load the timeline instead of the public search query, I do, but it doesn't load. Also, I'm able to use the substring, but I don't know how to make "..." happen when the length has reached. I'm guessing I'd have to make an if/else statement to match the length for equal to or less using .length.

I uploaded a screenshot of what I basically have for my site, the results of the tweet bar.

<ul id="illest-tweets">
<script id="tweets-template" type="text/x-handlebars-template">
  {{#each this}}
  <li>
   <img src="{{thumb}}" alt="{{author}}">
   <b>{{author}}</b><br />
   <a href="{{url}}">{{tweet}}</a>
  </li>
  {{/each}}
</script>
</ul>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script>
(function(){
var Twitter = {
init: function( config ) {
this.url = 'http://search.twitter.com/search.json?q=' + config.query + '&callback=?&rpp=4';
this.template = config.template;
this.container = config.container;
this.fetch();
},
attachTemplate: function() {
var template = Handlebars.compile( this.template );
this.container.append( template( this.tweets ) );
},
fetch: function() {
var self = this;
$.getJSON( this.url, function( data ) {
self.tweets = $.map( data.results, function( tweet ) {
return {
author: tweet.from_user,
tweet: tweet.text.substring(0,100),
thumb: tweet.profile_image_url,
url: 'http://twitter.com/' + tweet.from_user + '/status/' + tweet.id_str
};
});
// For future lessons, research $.deferred, viewers. <img src='http://www.neowin.net/forum/public/style_emoticons/<#EMO_DIR#>/smile.png' class='bbc_emoticon' alt=':)' />
self.attachTemplate();
});
}
};
Twitter.init({
template: $('#tweets-template').html(),
container: $('#illest-tweets'),
query: 'illest'
});
})();
</script>

Attached Images

  • Untitled.png



#2 OP Mr.XXIV

Mr.XXIV

    Shine bright like Iron Man.

  • Tech Issues Solved: 1
  • Joined: 30-April 11
  • Location: Durham, North Carolina
  • OS: OS X Mountain Lion 10.8.5
  • Phone: iPhone 5

Posted 29 September 2012 - 00:54

Sorry for the double post, the forum wouldn't let me edit it anymore.

I know that this would work. But, I don't know where to put since it will cause an error within the function.

var tt = tweet: tweet.text

if(tt.length === 80) {
	 tweet: tt.substring(0,100)
} else {
	 tweet: tt.text
}

Edit: Actually no, I have a part of it, but I'd need to add "...".