How to display objects from local storage on to the website?-CodePudding

So I have created this website which lets users search for the weather in different cities. These searches then get saved in an object which looks like this through the localstorage.

To display this on the website I've tried to make the following

    <div >
        <div >
            <h1>Latest requests</h1>
            <h5 id="get-weather">We remember your five last requests for you :)</h5>
            <div >
                <img src="" >
                <p  ></p>
                <p ></p>
                <p ></p>
                <p ></p>
            </div>
        </div>
    </div>

And the following 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()

Not quite sure where I'm doing something wrong, any help would be much appreciated.

CodePudding user response：

Your existing code will only show the last search as there's only one "cityname" to output to.

You can use HTML5 <template> to provide a ...well... template which you can copy and add as required.

Your for loop may also need to be for (.. of ..) rather than .. in .. which will give indexes rather than entries.

Updated code:

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 >
     <div >
       <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="" >-->
           <p ></p>
           <p ></p>
           <!--<p ></p>-->
           <!--<p ></p>-->
         </div>
       </template>
       <div > </div>
     </div>
   </div>