handlebars results not displaying in browser

[3point14guy]

I can't seem to get a particular handlebars table to output to the browser. There are many issues in the queue about this and I feel like I have implemented the results others have found useful. I am pretty sure it is the way I am passing the data that is the problem.

{{#each vegetables as |vegetable|}}

<div class="your-list">
      <li><h3>{{vegetable.name}}</h3></li>
      <li><img class="thumbnail" src={{vegetable.image}}></li>
      <br/>
      <li><textarea rows="4" cols="20">{{vegetable.comment}}</textarea></li>
      <br/>
      <li><button data-id="{{vegetable.id}}" class="update-comments-button dropbtn"> Edit Comments </button></li>
      <li><button data-id="{{vegetable.id}}" class="delete-veggie-button dropbtn"> Delete </button></li>
</div>

{{/each}}

const getGardenSuccess = function (data) {
  console.log('getGardenSuccess', data)
  console.log('store.garden is ', data.vegetable)
  const displayGardenHTML = displayGardenTemplate({ vegetables: data.vegetable })
  $('.your-list').empty()
  $('.your-list').append(displayGardenHTML)
  $('.your-list').show()
}

console output:

[3point14guy]

Update:

I changed

const displayGardenHTML = displayGardenTemplate({ vegetables: data.vegetable })

to

const displayGardenHTML = displayGardenTemplate({ vegetables: data })

as data.vegetable was undefined. Now, only the first item displays. To me, this confirms that there is something wrong with the way I am passing the data.

[scottyscripts]

are you trying to render data about vegetables or gardens. Your logged data object looks like it is a list of gardens data.gardens but the helper looks like you are working with vegetables?

[scottyscripts]

data.vegetables is undefined, what about data.gardens

[3point14guy]

So my thought process is that I could use the data from the vegetables table since it is the same information that is going into a garden.

data.garden is also undefined

[scottyscripts]

ahhh i see. So data.garden is undefined. Look at the object you logged. What is the name of the property it has. Not data.garden but it is very close.

[3point14guy]

The darn plural/singular thing bit me again!!

data.gardens (plural) fixes things:

const getGardenSuccess = function (data) {
  console.log('getGardenSuccess data is ', data.gardens)
  const displayGardenHTML = displayGardenTemplate({ gardens: data.gardens })
  $('.your-list').empty()
  $('.your-list').append(displayGardenHTML)
  $('.your-list').show()
}

[3point14guy]

test