views:

277

answers:

1

Hey there! I have a question about using Javacript to return search results from twitter. The idea is to use arrays, but we have not really covered them in class. Can anyone suggest how I might get started writing these functions?

Below is the template we are supposed to use:

/* This function takes an array of "tweets" and converts them to a single string of HTML where each paragraph is a single tweet.

Each element of the array has a javascript object. This object contains only 
one attribute that you care about, and it is called "text".

Example input:
 [ { "text" : "My mom just came into the room" },
  { "text" : "I just ran over my room with a tractor" },
  { "text" : "I enjoy fun things" } ]
Example output:
 <p>My mom just came into the room</p>
 <p>I just ran over my room with a tractor</p>
 <p>I enjoy fun things</p>

HINT: Since the input is an array of objects, you should look up both how to iterate
 over arrays and how to find a particular key for an object.

*/

 function parseTwitterResults(twitterResults) {
return "Implement Parse Twitter Results";
 }

/* This function accepts an array of objects, each of which is a "trending topic" on Twitter.

What you need to do is return them as a list of links. The links should
all have class "trending_topic" and the actual trending topic as the 
text of the link. This way, the code we wrote will make it so that
when you click the link, it gets processed by the search method
you wrote above! 

Example input:
 [ { "name" : "#Balloonboy" },
  { "name" : "Anne Frank" } ]
Example output:
 <ul>
  <li><a href = "#" class = "trending_topic">#Balloonboy</a></li>
  <li><a href = "#" class = "trending_topic">Anne Frank</a></li>
 </ul>

*/

  function parseTrendingTopics(trendingTopics) {
return "Implement Parse Trending Topics";
   }

/* This function builds on what parseTwitterResults does.

Here, you want to return a string containing only the LONGEST tweet (in terms of message length). Wrap the longest tweet in a <p class='longest_tweet'> tag.

Example input:
 [ { "text" : "My mom just came into the room" },
  { "text" : "I just ran over my room with a tractor" },
  { "text" : "I enjoy fun things" } ]
Example output:
 <p class = 'longest_tweet'>I just ran over my room with a tractor</p>

*/

 function findLargestTwitterResult(twitterResults) {
return "Implement Find Largest Twitter Result";
 }

/* This function accepts an array of Twitter results, and it returns an array of these results in the opposite order. Do not use a library function like Array.reverse! Do it yourself!

Example input:
 [ { "text" : "My mom just came into the room" },
  { "text" : "I just ran over my room with a tractor" },
  { "text" : "I enjoy fun things" } ]

Example output:
 [ { "text" : "I enjoy fun things" }, 
  { "text" : "I just ran over my room with a tractor" },
  { "text" : "My mom just came into the room" } ]

HINT: Do not worry about what the array contains - just copy whatever
 it is over. And be sure to test thoroughly! Make sure your twitter
 results are actually being reversed!

*/

function reverseTwitterResults(twitterResults) {
return twitterResults;
}

/* You do not need to edit anything below this line */
$(document).ready(function() {
$("form").submit(function() {
 var form = $(this).attr("id");
 if (form == 'search_twitter') {
  var userInput = $("input#q").val();
  $.ajax({
   type: "GET",
   url: "http://search.twitter.com/search.json",
   data: {
    q : userInput
   },
   success: function(data, textStatus) {
    $("div#twitter_answer").html   
(findLargestTwitterResult(data["results"]));
    $("div#twitter_answer").append
(parseTwitterResults(data["results"]));
    $("div#twitter_answer").append("<p><b>Same  thing but reversed!</b></p>");
    data["results"] = reverseTwitterResults(data
["results"]);
    $("div#twitter_answer").append
(parseTwitterResults(data["results"]));
   },
   dataType: "jsonp",
   error: function(XMLHttpRequest, textStatus, errorThrown){
    console.log("error.");
   }
  });
 }

 return false;
});

$.ajax({
 type: "GET",
 url: "http://search.twitter.com/trends.json",
 success: function(data, textStatus) {
  $("div#trending_topics").html(parseTrendingTopics(data["trends"]));
  $("a.trending_topic").click(function() {
   $("input#q").val($(this).text());
   $("form#search_twitter").submit();
  });
 },
 dataType: "jsonp",
 error: function(XMLHttpRequest, textStatus, errorThrown){
  console.log("error.");
 }
});

});

+1  A: 

in order to iterate over an array in javascript you can simply use a for loop.

function iterateOverArray() {
    //declare some variables
    var arrayToIterateOver = ["stuff", "in", "array"];
    for (var i = 0; i < arrayToIterateOver.length; i++) {
        var item = arrayToIterateOver[i];
        //do Something with item;
    }
    //return some results
}

fill in the // areas to suit your needs.

barkmadley
Office hours - thats a good idea. So the Twitter results will be returned as an array, which I can then display or iterate over with a stringlength function and use those to sort them by length?
Albert