I've built and app using javascript /firebase and would like to have it return the last 5 searches and make each of them clickable

Question

I've built an app that is working fine. The only problem is that I'm trying to have it display the last 5 searches in my HTML div with the id of recentSearches. I would like each of them to be clickable and return the result they previously returned. I refered to my HTML div toward the bottom as: let recentSearchesDiv = $('#recentSearches')

 <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script> var config = { apiKey: "AIzaSyCzaNmYb94HQPR70d6Omy5kP1d0kw5NLkc", authDomain: "eventtraveler-69f59.firebaseapp.com", databaseURL: "https://eventtraveler-69f59.firebaseio.com", projectId: "eventtraveler-69f59", storageBucket: "eventtraveler-69f59.appspot.com", messagingSenderId: "73086206077" }; firebase.initializeApp(config); var database = firebase.database(); // slider functionality $(document).ready(function () { $('.slider').slider({ full_width: true }); }); var $hotelsContainer = $("#hotel-results"); var $eventsContainer = $("#events-results"); // input fields var $city = $("#location-input"); var $checkInDate = $("#start-date-input"); var $checkOutDate = $("#end-date-input"); var $submit = $("#add-event"); // make global variable so functions can access var city = ""; var checkin = ""; var checkout = ""; var pleaseWait = ""; // CORS un-blocker for eventful API jQuery.ajaxPrefilter(function(options) { if (options.crossDomain && jQuery.support.cors) { options.url = "https://cors-anywhere.herokuapp.com/" + options.url; } }); function getHotels(city) { // find location code $.ajax({ url: "https://apidojo-kayak-v1.p.rapidapi.com/locations/search?where=" + city, method: "GET", headers: { "X-RapidAPI-Host": "apidojo-kayak-v1.p.rapidapi.com", "X-RapidAPI-Key": "811b0b509bmshf44ab7ab1214e55p19e182jsnc61a98a0c578" } }).then(function(response) { console.log(response); console.log(response[0].ctid); // MAKE SURE IT'S A CITY // make sure it's a city (response returns city and airport codes) $.each(response, function(i, value) { if (response[i].loctype === "city") { console.log("this is a city"); console.log(i + ", " + value); citycode = response[i].ctid; console.log(citycode); return false; } }); // now that we have the location code, we can use it to find hotels $.ajax({ url: "https://apidojo-kayak-v1.p.rapidapi.com/hotels/create-session?rooms=1&citycode=" + citycode + "&checkin=" + checkin + "&checkout=" + checkout + "&adults=1", method: "GET", headers: { "X-RapidAPI-Host": "apidojo-kayak-v1.p.rapidapi.com", "X-RapidAPI-Key": "811b0b509bmshf44ab7ab1214e55p19e182jsnc61a98a0c578" } }).then(function(response) { console.log("kajak success"); console.log(response); console.log(response.hotelset); // reference for hotel list var hotelListMain = response.hotelset; var hotelList = response.hotelset; // only keep 10 results if (hotelList.length > 10) { hotelList.length = 10; } console.log(hotelList); // if no results if (hotelList.length === 0) { console.log("no results"); var newP = $("<p>").text("No results."); $hotelsContainer.append(newP); } // go through each hotel and show on page $.each(hotelList, function(i, value) { console.log("hotel " + i); // get relevent info if (response.hotelset[i].brand !== undefined) { var hotelName = response.hotelset[i].brand; } else { var hotelName = response.hotelset[i].name; } var hotelAddress = response.hotelset[i].displayaddress; var hotelRating = response.hotelset[i].ratinglabel; var hotelStarCount = response.hotelset[i].stars; var hotelThumbnail = "https://kayak.com" + response.hotelset[i].thumburl; // if cheapest provider object is included console.log("t/f: " + response.hotelset[i].cheapestProvider !== undefined); if (response.hotelset[i].cheapestProvider !== undefined) { var cheapestProviderName = response.hotelset[i].cheapestProvider.name; var bestPrice = response.hotelset[i].cheapestProvider.displaybaseprice; var linkToHotel = "https://kayak.com" + response.hotelset[i].cheapestProvider.url; } else { var cheapestProviderName = response.hotelset[i].brand; var bestPrice = response.hotelset[i].price; var linkToHotel = "https://kayak.com" + response.hotelset[i].shareURL; } //create elements for html var newTitle = $("<h5>").text( hotelName + " (via " + cheapestProviderName + ")" ); var newAddress = $("<p>").text(hotelAddress); var newPrice = $("<p>").text(bestPrice); var newRating = $("<p>").text( hotelRating + ", " + hotelStarCount + " stars" ); var newImage = $("<img>").attr("src", hotelThumbnail); var newLink = $("<a>") .attr("href", linkToHotel) .text("see hotel"); // img container var imgContainer = $("<div>") .addClass("card-image") .append(newImage); var content = $("<div>") .addClass("card-content") .append(newTitle, newAddress, newPrice, newRating); var action = $("<div>") .addClass("card-action") .append(newLink); // content container var allContentContainer = $("<div>") .addClass("card-stacked") .append(content, action); // make parent div for this hotel var newHotelDiv = $("<div>") .append(imgContainer, allContentContainer) .addClass("card horizontal"); // add this hotel's div to the hotel container $hotelsContainer.append(newHotelDiv); // remove wait message pleaseWait.remove(); }); }); }); } function displayEvent() { $("#events-results").empty(); var where = $("#location-input") .val() .trim(); var start = moment($("#start-date-input").val()).format("YYYYMMDD00"); var end = moment($("#end-date-input").val()).format("YYYYMMDD00"); // search for button name in omdb and show info underneath var queryURL = "https://api.eventful.com/json/events/search?" + "app_key=n69CWBNZRrGZqdMs" + "&l=" + where + "&t=" + start + "-" + end; console.log(queryURL); $.ajax({ url: queryURL, method: "GET" }).then(function(response) { var schema = JSON.parse(response); console.log(schema.events); console.log(schema.events.event); // if no results if (schema.events.event.length === 0) { console.log("no event results"); var newP = $("<p>").text("No results."); $eventsContainer.append(newP); } for (var i = 0; i < schema.events.event.length; i++) { total = parseFloat(i) + 1; //create elements for html var eventTitle = $("<h5>").text(schema.events.event[i].title); var eventAddress = $("<p>").text( schema.events.event[i].venue_address + ", " + schema.events.event[i].city_name + ", " + schema.events.event[i].postal_code ); var eventLink = $("<a>") .attr("href", schema.events.event[i].url) .text("see event"); // img container if (schema.events.event[i].image !== null) { var eventimage = schema.events.event[i].image.medium.url; if (eventimage.includes("http")) { var neweventImage = $("<div>") .addClass("card-image") .append("<img src='" + eventimage + "'/>"); } else { var neweventImage = $("<div>") .addClass("card-image") .append("<img src='https:" + eventimage + "'/>"); } } // start time var begins = schema.events.event[i].start_time; var days = schema.events.event[i].all_day; if (begins.includes("00:00:00")) { var date = begins.slice(0, 10); var startTime = $("<p>").text("Starts on " + date + ". Happening for " + days + " days"); } else { var date = begins.slice(0, 16); var startTime = $("<p>").text(begins); } //build container var eventContent = $("<div>") .addClass("card-content") .append(eventTitle, eventAddress, startTime); var eventAction = $("<div>") .addClass("card-action") .append(eventLink); // content container var eventContentContainer = $("<div>") .addClass("card-stacked") .append(eventContent, eventAction); // make parent div for this event var newEventDiv = $("<div>") .append(neweventImage, eventContentContainer) .addClass("card horizontal"); // add this event's div to the event container $("#events-results").append(newEventDiv); } }) } $submit.on("click", function (event) { event.preventDefault(); // clear out current results $hotelsContainer.empty(); $eventsContainer.empty(); // save their inputted data city = $city.val().trim(); checkin = $checkInDate.val(); checkout = $checkOutDate.val(); var citycode = ""; // if user filled out all fields if (city !== "" && checkin !== "" && checkout !== "") { // show message that results are being generated - so user knows button did submit if ($(".please-wait").length === 0) { console.log("results are generating....please wait"); pleaseWait = $("<p>").text("Searching for results...").addClass("please-wait"); $(document.body).append(pleaseWait); pleaseWait.insertAfter($submit); } // get hotel results and display them //getHotels(); // get event results and display them //displayEvent(); // construct object literal for firebase let travelEvent = { city, checkin, checkout }; // add event to firebase database.ref().push(travelEvent) database.ref().limitToLast(5).on("value", snapshot => { let keys = Object.keys(snapshot.val()) let recentSearchesDiv = $('#recentSearches'); recentSearchesDiv.empty(); for(let i = 0; i < keys.length; i++) { let val = snapshot.val()[keys[i]] let city = val.city let checkin = val.checkin let checkout = val.checkout let search = $(`<div><span>City: ${city} </span><span>Check-in: ${checkin} </span><span>Check-out: ${checkout}</span></div>`); search.addClass('recentSearch') search.on('click', function(){ }) recentSearchesDiv.append(search) } }); // clear inputs $city.val(""); $checkInDate.val(""); $checkOutDate.val(""); } else { // show error message if ($(".required-error").length === 0) { var required = $("<p>").text("* All fields are required").addClass("required-error"); $("#event-form").prepend(required); } } }); 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>EventTraveler</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <link rel="stylesheet" type="text/css "href="assets/css/style.css"> </head> <body> <div class="container"> <nav> <!--Creating NavBar--> <div class="nav-wrapper"> <img src="assets/images/logo2.png" class="brand-logo"> </div> </nav> <!-- Slider Images --> <div id="slider-container"> <div class="slider"> <ul class="slides"> <li> <img src="assets/images/beach.png"> </li> <li> <img src="assets/images/concert.png"> </li> <li> <img src="assets/images/mountain.png"> </li> <li> <img src="assets/images/attraction.png"> </li> </ul> </div> </div> <div> <h1>Search for hotels and events</h1> <!-- Create the form --> <form id="event-form"> <label for="location-input" id="location">Enter city and state</label> <input type="text" id="location-input" /><br /> <label for="start-date-input" id="checkin">Check In</label> <input type="date" id="start-date-input" /><br /> <label for="end-date-input" id="checkout">Check Out</label> <input type="date" id="end-date-input" /><br /> <!-- Button triggers new event to be added --> <input id="add-event" class="btn btn-info" type="submit" value="Search" /> </form> </div> <div> <h4>Recent Searches</h4> <div id="recentSearches"> </div> </div> <div class="banner-div"> <img src="assets/images/banner.jpg" id= "banner"> </div> <!-- create cards right --> <div class="row"> <div class="col s6" id = "right"> <h3 class="header">Hotels</h3> <div id = "hotel-results"> <div class="card horizontal"> <div class="card-image"> <img src="assets/images/hotels.jpg"> </div> <div class="card-stacked"> <div class="card-content"> <p>Use the search form above to see results</p> </div> </div> </div> </div> </div> <!-- create cards right --> <div class="col s6" id = "Left"> <h3 class="header">Events</h3> <div id="events-results"> <div class="card horizontal"> <div class="card-image"> <img src="assets/images/events.jpg"> </div> <div class="card-stacked"> <div class="card-content"> <p>Use the search form above to see results</p> </div> </div> </div> </div> </div> </div> <footer class=“page-footer”> <div class=“footer-copyright”> <div class=“container”> © 2019 Los Cinco </div> </div> </footer> </div> <script src="https://code.jquery.com/jquery-3.4.0.min.js"integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script> <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script> <script src="assets/javascript/main.js"></script> </body> </html> 

Answer 1

If I understand it correctly, your only problem is that there are more then 5 Elements displayed? You can set a limit on the results returned.

https://dinosaur-facts.firebaseio.com/yourJson.json? 
orderBy="price"&limitToLast=5;

As you can see, you can also sort it by a Property, eg Price and then query only a set number of items. It is also possible to specify if it should be ordered ASC oder DESC.