Workflow with ember-data and ajax api call

Question

I have this code in routes/index.js:

model() {
  return Ember.RSVP.hash({
    maps: ajax({
      url: '*********************',
      type: 'get' 
    }).then(function(data) {
      console.log('maps: ', data);
      return data; 
    })
  });
}

which returns json data. Now I want to work with ember-data and a model, i have this code in models/map.js:

import DS from "ember-data";

export default DS.Model.extend({
  gmap_lat_center: DS.attr('string'), 
  gmap_long_center: DS.attr('string'), 
  hotspots: DS.attr('array'), 
  id: DS.attr('string'), 
  image: DS.attr('array'), 
  image_highres: DS.attr('string'), 
  image_lowres: DS.attr('string'), 
  map_background: DS.attr('string'), 
  ne_lat: DS.attr('string'), 
  ne_long: DS.attr('string'), 
  order: DS.attr('string'), 
  sw_lat: DS.attr('string'), 
  sw_long: DS.attr('string'), 
  timestmap: DS.attr('string'), 
  title: DS.attr('string'), 
  track_geojson: DS.attr('string'), 
  type: DS.attr('string'), 
  zoom: DS.attr('string')
});

Now what is supposed to be the workflow with ajax and ember-data? Where do I need to put the ajax call and where do I store it in the models?

EDIT: I managed to push them to the store, but when I try to access it:

this.store.pushPayload( normalizedData );;
console.log( "maps: ", normalizedData );
console.log(this.store.findAll('map'));
return normalizedData;

I get:

http://localhost:4200/maps 404 (Not Found)

I suppose I need to rewrite the findAll method in an adapter, but how would this method look like?

Answer 1

If you're requesting data from an external endpoint, I'd use pushPayload() to run the returned data through the map model's serializer:

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    const mapData = ajax({
      url: '*********************',
      type: 'get' 
    });

    return mapData.then((data) => {
      return this.store.pushPayload(data);
    });
  }
});

Once you have returned data from within the model hook on the route, it's automatically available in the corresponding controller via this.get('model') .

From your example, it looks like you might want to manipulate the data after it comes back from the server. There are a few common ways of doing this.

1. The route's setupController() and afterModel() hooks.
2. In the route's corresponding controller.

Here's an example of using setupController() :

import Ember from 'ember';

export default Ember.Route.extend({
  setupController(controller, model) {
    this._super(controller, model);
    this.set(controller, 'someAttrForTheController', 'anything');
    console.log('maps: ', model);
  }
});

And an example within the corresponding controller:

import Ember from 'ember';

export default Ember.Controller.extend({
  latLongCenters: Ember.computed('model', function() {
    const models = this.get('model');
    return model.map(function(map) {
      return [map.get('gmap_lat_center'), map.get('gmap_long_center')];
    });
  })
});