We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.


Posted By

1man on 03/14/07


Tagged

javascript yahoo json api


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

d4rk
vali29


Pull in News from Yahoo API Using JSON


Published in: JavaScript 


Full function that pulls in info from the yahoo API and inserts it into the page. Uses the script tag hack to pull in external sources.

  1. /*Yahoo Search URL
  2.  * When you click the submit button, the query in the input box is passed to this
  3.  * function. It creates a URL including the query, output and callback(what will
  4.  * run once the response is recieved).
  5.  */
  6. function searchYahoo(query){
  7. var url="http://api.search.yahoo.com/NewsSearchService/V1/newsSearch?";
  8. url+= "appid=adactio";
  9. url+= "&query=" +escape(query);
  10. url+= "&output=json";
  11. url+= "&callback=parseResponse";
  12. getScript(url);
  13. }
  14. /*Generate Script Tag
  15.  * The URL that was created above is passed to this function. It creates a script
  16.  * tag that is then inserted into the page. This allows you to pull data from external
  17.  * domains.
  18.  */
  19. function getScript(url){
  20. var scriptTag = document.createElement("script");
  21. scriptTag.setAttribute("type", "text/javascript");
  22. scriptTag.setAttribute("src", url);
  23. document.getElementsByTagName("head")[0].appendChild(scriptTag);
  24. }
  25. /*The callback function
  26.  * A query has been sent to the server, the file has been generated with the results
  27.  * is inserted into the header of the page. This callback function is run and extracts
  28.  * the info you want and inserts it into the document using the DOM. Note the data
  29.  * variable which contains the information to be formatted.
  30.  */
  31. function parseResponse(data) {
  32. var results = document.getElementById("results");
  33.  
  34. while(results.hasChildNodes()){
  35. results.removeChild(results.lastChild);
  36. }
  37. for(i=0;i<data.ResultSet.Result.length;i++){
  38. var yhTitle = data.ResultSet.Result[i].Title;
  39. var yhSummary = data.ResultSet.Result[i].Summary;
  40.  
  41. //create the header
  42. var theHeader = document.createElement("h2");
  43. var theHeaderText = document.createTextNode(yhTitle);
  44. theHeader.appendChild(theHeaderText);
  45. results.appendChild(theHeader);
  46.  
  47. //create the summary
  48. var theSummary = document.createElement("p");
  49. var theSummaryText = document.createTextNode(yhSummary);
  50. theSummary.appendChild(theSummaryText);
  51. results.appendChild(theSummary);
  52. }
  53. }

Report this snippet 

You need to login to post a comment.