Each within each handlebars file

jbculbertson commented 6 years ago

I've got a quirky issue with handlebars. I'm trying to call an #each within my overall #each, to display all of the contents of an array on the parent each.

When I do this, if prints over the word each time

<div class="overlay">
  {{#each likes as |like|}}
  <p class="like-hide" id="{{run.id}}">{{like._ownerFullName}}</p>
  {{/each}}
</div>

When I do this is doesn't display at all

<p class="overlay">
  {{#each likes as |like|}}
  <p class="like-hide" id="{{run.id}}">{{like._ownerFullName}}</p>
  {{/each}}
</p>

When I move the div to a sibling location, it prints them all out just fine

scottyscripts commented 6 years ago

can you post the entire handlebars file please?

jbculbertson commented 6 years ago

{{#each runs as |run|}}
<div class="panel panel-default">
<div class="overlay">
  {{#each likes as |like|}}
  <p class="like-hide">{{like._ownerFullName}}</p>
  {{/each}}
</div>
  <div class="panel-heading">
    <div class="col-sm-2">
      <i class="fa fa-user-circle-o fa-4x" id="user-icon" aria-hidden="true"></i>
    </div>
    <div class="col-sm-6">
      <h4>
      <strong>{{run.ownerName}}</strong> ran
      <strong>{{run.distance}}</strong> miles
    </h4>
      <p>
      {{#formatDate run.date}}
             {{/formatDate}}
      </p>
    </div>
    <div class="col-sm-4">
      <button class="btn btn-success btn-sm" id="show-one-run" data-id="{{run._id}}"
        data-toggle="modal" data-target="#show-run-modal">
        <i class="fa fa-map-marker"></i> Map</button>
      <button class="btn btn-danger btn-sm" id="delete-run" data-id="{{run._id}}">
        <i class="fa fa-trash-o"></i> Delete</button>
      <button class="btn btn-success btn-sm" id="like-run" data-id="{{run._id}}">
        <i class="fa fa-heart"></i>  {{run.likes.length}}</button>
        {{#each likes as |like|}}
        <p class="like-hide" id="{{run.id}}">{{like._ownerFullName}}</p>
        {{/each}}
    </div>
  </div>
  <div class="panel-body">
  <table class="table">
    <tr>
     <th><i class="fa fa-road fa-2x" aria-hidden="true"></i></th>
     <th><i class="fa fa-clock-o fa-2x" aria-hidden="true"></i></th>
     <th><i class="fa fa-tachometer fa-2x" aria-hidden="true"></i></th>
   </tr>
    <tr>
     <td><h4><strong>{{run.distance}}</strong></h4></td>
     <td><h4><strong>{{run.timeTaken}}</strong></h4></td>
     <td><h4><strong>{{run.avgPace}}</strong></h4></td>
   </tr>
    <tr>
     <td><h6>DISTANCE (MI)</h6></td>
     <td><h6>MINUTES</h6></td>
     <td><h6>AVERAGE PACE</h6></td>
   </tr>
  </table>
</div>
</div>
{{/each}}

payne-chris-r commented 6 years ago

What is likes in: {{#each likes as |like|}}

jbculbertson commented 6 years ago

thanks Chris - Scott just sat down with me and I think we got it worked out. likes is the array within runs (the overarching #each) that I want to display all of

ga-wdi-boston / capstone-project

Each within each handlebars file #873