jquery div wrapper

[colleeno]

I'm appending google place results to my page, and trying to wrap each result in it's own div.

Lines 107 - 139 are where I pull the details, then display the results.
Repo: https://github.com/colleeno/weather-app
This is in the public/script.js file

Currently I'm just appending each item to the section id #placeResults.
What I'd like is to have lines 119-135 wrapped in a container div.

I tried using jquery's .wrap(), but can only apply that to each p. I tried creating a div as the first line in the display function, and appending each item to that, but that inserts them all into one overall div, not each individual place into a div.

I tried some forEach functions, couldn't get anything to work..

I could only make it work if I create a div and add the items within it like below, but then I can't include any of the conditional statements I need. But this is what I'm trying to do for each place.

$(<div>
<p>${place.name}</p>
<p>${place.formatted_address}</p>
</div>).appendTo('#placeResults')

Apologies in advance, this is not the cleanest right now -_-

[AndyWhitley]

@colleeno In https://github.com/colleeno/weather-app/blob/master/public/script.js#L117-L139 , couldn't you just use jquery to create a container element, append data elements to it, then append it to #placeResults ?

like so:

  function displayPlaces (place, status) {
    if (place !==  'undefined' && place) {
      var container = $('<div></div>').addClass('container')
      $(`<p>${place.name}</p>`).appendTo(container)
      $(`<p>${place.formatted_address}</p>`).appendTo(container)
      
      if (place.website){
        $(`<p>website: <a href="${place.website}">${place.website}</a></p>`).appendTo(container)
      }
      
      // also, I don't think you need an IIFE here
      if (place.rating > 1){
        $(`<p>${place.rating} stars</p>`).appendTo(container)
      }
      else if (place.rating === 1){
        $(`<p>${place.rating} star</p>`).appendTo(container)
      }
      else {
        $('<p>no stars yet</p>').appendTo(container)
      }
  
      if (place.reviews[0] && place.reviews[0].text.length > 0) {
        $(`<p>review: ${place.reviews[0].text}</p>`).appendTo(container)
      }
    }
    $('#placeResults').append(container)
    scrollPlace()
  }

[colleeno]

YASSSSSS! THANK YOU! I don't know why I couldn't get that to work last night. I don't think I tried storing as a variable and then appending it at the end. Believe I only tried setting the container and appending it at the same time, so appending the elements to it put them all in the same one.

Can't remember how I ended up with that IIFE in there either good point, pulled that out.