123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. // SETUP VARIABLES
  2. // ==========================================================
  3. // This variable will be pre-programmed with our authentication key (the one we received when we registered)
  4. // "b9f91d369ff59547cd47b931d8cbc56b:0:74623931"
  5. var authKey = "b9f91d369ff59547cd47b931d8cbc56b:0:74623931";
  6. // These variables will hold the results we get from the user's inputs via HTML
  7. var queryTerm = "";
  8. var numResults = 0;
  9. var startYear = 1984;
  10. var endYear = 1994;
  11. // Based on the queryTerm we will create a queryURL
  12. var queryURLBase = "https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=" + authKey + "&q=";
  13. // Array to hold the various article info
  14. var articleCounter = 0;
  15. // FUNCTIONS
  16. // ==========================================================
  17. // This runQuery function expects two parameters (the number of articles to show and the final URL to download data from)
  18. function runQuery(numArticles, queryURL){
  19. // The AJAX function uses the URL and Gets the JSON data associated with it. The data then gets stored in the variable called: "NYTData"
  20. $.ajax({url: queryURL, method: "GET"})
  21. .done(function(NYTData) {
  22. // Here we are logging the URL so we have access to it for troubleshooting
  23. console.log("------------------------------------")
  24. console.log("URL: " + queryURL);
  25. console.log("------------------------------------")
  26. // Here we then log the NYTData to console, where it will show up as an object.
  27. console.log(NYTData);
  28. console.log("------------------------------------")
  29. // Loop through and provide the correct number of articles
  30. for (var i=0; i<numArticles; i++) {
  31. // Add to the Article Counter (to make sure we show the right number)
  32. articleCounter++;
  33. // Create the HTML Well (Section) and Add the Article content for each
  34. var wellSection = $("<div>");
  35. wellSection.addClass('well');
  36. wellSection.attr('id', 'articleWell-' + articleCounter)
  37. $('#wellSection').append(wellSection);
  38. // Confirm that the specific JSON for the article isn't missing any details
  39. // If the article has a headline include the headline in the HTML
  40. if(NYTData.response.docs[i].headline != "null")
  41. {
  42. $("#articleWell-"+ articleCounter).append('<h3><span class="label label-primary">' + articleCounter + '</span><strong> ' + NYTData.response.docs[i].headline.main + "</strong></h3>");
  43. // Log the first article's Headline to console.
  44. console.log(NYTData.response.docs[i].headline.main);
  45. }
  46. // If the article has a Byline include the headline in the HTML
  47. if( NYTData.response.docs[i].byline && NYTData.response.docs[i].byline.hasOwnProperty("original"))
  48. {
  49. $("#articleWell-"+ articleCounter).append('<h5>' + NYTData.response.docs[i].byline.original + "</h5>");
  50. // Log the first article's Author to console.
  51. console.log(NYTData.response.docs[i].byline.original);
  52. }
  53. // Then display the remaining fields in the HTML (Section Name, Date, URL)
  54. $("#articleWell-"+ articleCounter).append('<h5>Section: ' + NYTData.response.docs[i].section_name + "</h5>");
  55. $("#articleWell-"+ articleCounter).append('<h5>' + NYTData.response.docs[i].pub_date + "</h5>");
  56. $("#articleWell-"+ articleCounter).append("<a href='" + NYTData.response.docs[i].web_url + "'>" + NYTData.response.docs[i].web_url + "</a>");
  57. // Log the remaining fields to console as well
  58. console.log(NYTData.response.docs[i].pub_date);
  59. console.log(NYTData.response.docs[i].section_name);
  60. console.log(NYTData.response.docs[i].web_url);
  61. }
  62. });
  63. }
  64. // METHODS
  65. // ==========================================================
  66. // On Click button associated with the Search Button
  67. $('#runSearch').on('click', function(){
  68. // Initially sets the articleCounter to 0
  69. articleCounter = 0;
  70. // Empties the region associated with the articles
  71. $("#wellSection").empty();
  72. // Search Term
  73. var searchTerm = $('#searchTerm').val().trim();
  74. queryURL = queryURLBase + searchTerm;
  75. // Num Results
  76. numResults = $("#numRecordsSelect").val();
  77. // Start Year
  78. startYear = $('#startYear').val().trim();
  79. // End Year
  80. endYear = $('#endYear').val().trim();
  81. startYear = 1984;
  82. endYear = 1994;
  83. // If the user provides a startYear -- the startYear will be included in the queryURL
  84. if (parseInt(startYear)) {
  85. queryURL = queryURL + "&begin_date=" + startYear + "0101";
  86. }
  87. // If the user provides a startYear -- the endYear will be included in the queryURL
  88. if (parseInt(endYear)) {
  89. queryURL = queryURL + "&end_date=" + endYear + "0101";
  90. }
  91. // Then we will pass the final queryURL and the number of results to include to the runQuery function
  92. runQuery(numResults, queryURL);
  93. // This line allows us to take advantage of the HTML "submit" property. This way we can hit enter on the keyboard and it registers the search (in addition to clicks).
  94. return false;
  95. });
  96. // This button clears the top articles section
  97. $('#clearAll').on('click', function(){
  98. articleCounter = 0;
  99. $("#wellSection").empty();
  100. })