unable to parse API response in ember

Question

I am trying to learn EmberJS and restify. I have get method API with following response :

 {"products":[{"id":1,"name":"lappy1"},{"id":2,"name":"lappy2"}]}

This response I am getting in my browser's network log.

My product route is like :

 import Ember from 'ember';
      export default Ember.Route.extend({
          model() {
              return {
                  products :this.get('store').findAll('product')
              };
          }
      });

My product.hbs is :

<div>
<div class="row">
    <div class="col-md-4"><b>id</b></div>
    <div class="col-md-4"><b>Name</b></div>     
</div>
{{#each model.products as |product|}}
    <div class="row">
        <div class="col-md-4">{{product.id}}</div>
        <div class="col-md-4">{{product.name}}</div>
    </div>
{{/each}}
</div>

My product model is :

import DS from 'ember-data';

export default DS.Model.extend({
    name:  DS.attr('string')
});

There is no any error on log, but my page only shows header part i.e

<div class="col-md-4"><b>id</b></div>
<div class="col-md-4"><b>Name</b></div> 

which thing I am missing ?

Answer 1

Install Chrome Ember plugin and use Chrome for debugging.

I assume you are using the RESTAdapter?

Your Route's model hook returns an object, not a promise. This is a little odd, I would recommend using a Hash:

model() {
  return Ember.RSVP.hash({
    products: this.store.findAll('product')
  });
}

Alternately, you could just return the result of calling the store:

model() {
  return this.store.findAll('product');
}

But in this case, you would change your templates to just use model instead of model.products.