How do I define a search term box to search for a user's specific timeline using a Twitter stream API and meteor.js

Question

Hi there I currently have a twitter stream npm package called twit retrieving a specifc users timeline and storing those tweets and pictures in arrays.

var x = [];
var y = [];
var z = [];
var imageUrl ;
var result;
var Stringify;


 if (Meteor.isServer) {

  var Twit = Meteor.npmRequire('twit');
  Future = Meteor.npmRequire('fibers/future');

Tweets = new Meteor.Collection("tweets");

    var twit = new Twit({
    consumer_key:         'xxxxxxxxxxxxxxxxxx'
  , consumer_secret:      'xxxxxxxxxxxxxxxxxx'
  , access_token:         'xxxxxxxxxxxxxxxxxx'
  , access_token_secret:  'xxxxxxxxxxxxxxxxxx'
    });


   twit.get('statuses/user_timeline', {screen_name: 'DopestClothes', count:20}, function(err, item) {
   console.log(err, item);

   for(var i=0 ; i < 19 ; i++)
     {    
        console.log(item[i].entities.media+"YES");
        console.log(item[i].entities.media+" media");
       if(item[i].entities.media) {

         imageUrl = item[i].entities.media[0].media_url;
         z.push(imageUrl);
         x.push(item[i].text+"\n");
         y.push(item[i].created_at+"\n");


       }

}




)}

This all works perfectly fine for me but my question is how would I make a user input box in the Meteor template HTML that would act re-actively to changing the variable screen_name used in the request whenever it was clicked.

In other words allowing the user to specify which user timeline should be retrieved and the response would refresh. And from that point storing the results of var z(The new twitter search Array result) into a mongoDB collection.

Any help or guidance would be truly appreciated.

Answer 1

I think what you need here its a meteor methods.

So you can elaborate this

<template name="example">
 <input type="text" id="testInput">
 <button type="submit" id="testButton">Click to change the screen_name</button>
</template>

on the server/server.js

use this

Meteor.methods({
    changeScreenName:function(newName){
     twit.get('statuses/user_timeline', {screen_name: newName, count:20}, function(err, item) {
   console.log(err, item);
    }
  })

And use this method inside an event handler

Template.example.events({
   'click #testButton':function(event,template){
    var newName = $('#testInput').val(), //jquery
        newNames = document.getElementById('testInput').value; //Javascript
       Meteor.call('changeScreenNsme',newName,function(err,result){
        if(!err){
             Collection.insert({etiquette:newName}); //and insert on the collection
             console.log("The screen name was changed to " + newName)
        }
     })
  }
})