Decent tutorial on ember cli how to fetch JSON response

I've been wasting all my journey trying to find out a simple tutorial explaining how to make a simple app using ember cli for treating a basic json file...I've read www.ember-cli.com of course, they explain a lot things but..I don't know how to proceed. Is there a basic example explaining (dummies level) how you make a simple app that parses a json response? I've used the RESTAdapter, I have build muy model but I don't really know how to make in order to send a kind of response to my template..

this is my persons.js file under app/adapters folder

import DS from 'ember-data';

var ApplicationAdapter = DS.RESTAdapter.extend({  
    host: 'http://localhost:8000/persons',
   namespace: 'person'
});



export default ApplicationAdapter;

this is my persons.js model file under app/model

import DS from 'ember-data';

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  occupation: DS.attr('string')
});

This is my handlebars template persons-tmp.hbs file under app/templates/components

<ul>    
{{#each model as |item|}}
        <li>{{item.firstName}}</li>
      {{/each}}
</ul>

My persons.js file undert the folder app/routes

import Ember from 'ember';

    export default Ember.Route.extend({  
        model: function() {
            return this.store.findAll('persons');
        }
    })

and finally the json response of the call to http://localhost:8000/persons:

"person": {
    "firstName": "Barack",
    "lastName": "Obama",
    "occupation": "President"
  }

I don't know why but I don't get any data on my template result--..

I also have tried the twilio tutorial (wich is one the best that I've found) ...but even this doesn't work

Sorry for the simplicity!

Solution

Your template will not know about the model unless it is defined in your route. Each page of your application should have a corresponding route (if you are using default structure, look in app/routes/yourRoute.js; if you are using pod structure app/your-route/route.js). This is the file where you would hit your model.

If your model is called accounts:

export default Route.extend({
  model() {
    return this.store.findAll('accounts'),
  }
});

Now your template for that route will have access to the model, which comes from your store. Your store uses your adapter to hit the API. If results aren't being returned correctly, make sure the RESTAdapter is serializing the data correctly.

Your model

When you generate your model in ember-cli, you should have entered ember generate model accounts into your terminal/command line. This would create: app/model/accounts.js or (if using pod stucture) app/accounts/model.js.

This model will automatically look to app/adapters/accounts.js if it is there, otherwise it will default to app/adapters/application.js. However, you list a main.js file--which means you are most likely writing this all manually and not using the command line.

If you are using Ember-CLI, you should really try generating everything through the command line/terminal rather than manually adding it yourself. The resolver may give you some unexpected behavior if you are within in an Ember-CLI application.

For the adapter, if your model is called names, it will automatically append it to the namespace/host defined in your application adapter. If you need to get info from superapi.com/names/accounts for instance:

export default RESTAdapter.extend({
  host: 'http://superapi.com',
  namespace: 'names'
});

If you look in your console, it should tell you the domain you are trying to hit. If you are running on localhost and trying to hit an outside source, your browser may be stopping you for security reasons.

Serving your API locally

If your API is hosted locally on a different port (i.e. in localhost:8000) you can run your ember server through a proxy. When you run your server through the command line you can enter ember server --proxy http://localhost:8000. The benefit of doing this is that you can now update the host of your adapter to api/v1 if your api is normally localhost:8000/api/v1.

Async Data & Promise Chaining

If you aren't getting any errors, Ember is most likely not serving the data fast enough--i.e. it is loading the template before the data is returned from your API. This is when you want to do an RSVP on your model (http://guides.emberjs.com/v1.10.0/routing/asynchronous-routing/)

export default Ember.Route.extend({  
    model: function() {
        return Ember.RSVP.hash({
          this.store.findAll('persons')
        })
    },
    setupController: function(controller, hash) {
       Ember.setProperties(controller, hash);
    }
});

Essentially, it will tell your app not to load certain things until the data has been returned from your API--i.e. it promises to do something upon fetching the data and not before.