Así que he creado este sitio web que permite a los usuarios buscar el clima en diferentes ciudades. Estas búsquedas luego se guardan en un objeto que se ve así a través del almacenamiento local.
Para mostrar esto en el sitio web, he intentado hacer lo siguiente
<div class="jumbotron bg-white"> <div class="container"> <h1>Latest requests</h1> <h5 id="get-weather">We remember your five last requests for you :)</h5> <div class="last-requests"> <img src="" class="imgs"> <p class="cityname" class="mr-3"></p> <p class="cityweather"></p> <p class="citytemp"></p> <p class="citywind"></p> </div> </div> </div>Y el siguiente JS
// Displays last 5 requests/searches function displayLastRequests() { const lastReq = JSON.parse(localStorage.getItem('last-requests')) console.log(lastReq) if (displayLastRequests > 0) { // for loop request for (req in lastReq) { $(".imgs").attr('src', req.imgurl); $(".cityname").text(req.city_name); $(".cityweather").text(req.city_weather); $(".citytemp").text(req.city_temp + " °C"); $(".citywind").text(req.city_wind + " m/s"); } } }; displayLastRequests()No estoy muy seguro de dónde estoy haciendo algo mal, cualquier ayuda sería muy apreciada.
Su código existente solo mostrará la última búsqueda, ya que solo hay un "nombre de ciudad" para generar resultados.
Puede usar HTML5 <template> para proporcionar una... bueno... plantilla que puede copiar y agregar según sea necesario.
Es posible que su ciclo for también deba ser for (.. of ..) en lugar de .. in .. lo que proporcionará índices en lugar de entradas.
Código actualizado:
function displayLastRequests() { //const lastReq = JSON.parse(localStorage.getItem('last-requests')) // Sample data const lastReq = [ {city_name:"Istanbul", weather:"Cloudy"}, {city_name:"Madrid", weather:"Stormy"}, {city_name:"London", weather:"Sunny"} ]; console.log(lastReq) for (req of lastReq) { var clone = $($("#last-request-template").html()); clone.appendTo(".last-requests"); clone.find(".cityname").text(req.city_name); clone.find(".cityweather").text(req.weather); //clone.find(".imgs").attr('src', req.imgurl); //clone.find(".citytemp").text(req.city_temp + " °C"); //clone.find(".citywind").text(req.city_wind + " m/s"); } }; displayLastRequests() .last-requests { border: 1px solid #CCC; } .last-request+.last-request { border-top: 1px solid #CCC; } p { padding:5px; margin: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="jumbotron bg-white"> <div class="container"> <h1>Latest requests</h1> <h5 id="get-weather">We remember your five last requests for you </h5> <template id='last-request-template'> <div class='last-request'> <!--<img src="" class="imgs">--> <p class="cityname"></p> <p class="cityweather"></p> <!--<p class="citytemp"></p>--> <!--<p class="citywind"></p>--> </div> </template> <div class="last-requests"> </div> </div> </div>