lundi 11 avril 2016

emberJS does not display model data

I am using emberJS to display data obtained from REST API. My ember app connects to REST server and server returns the JSON data, but when I try to display id of my restaurant in the template I get this output:

Restaurant id is: 

Here are my models:

import DS from 'ember-data';

//restaurant.js model
export default DS.Model.extend({
    restaurantId: DS.attr('int'),
    name: DS.attr('string'),
    rating: DS.attr('double'),
    phone: DS.attr('double'),
    reservationPrice: DS.attr('double'),
    workingHours: DS.attr('string'),
    deals: DS.attr('string'),
    image: DS.attr('string'),

    //Relations
    coordinates: DS.belongsTo('coordinates'),
    address: DS.belongsTo('address')
});

//coordinates.js model
import DS from 'ember-data';

export default DS.Model.extend({
    latitude: DS.attr("double"),
    longitude: DS.attr("double"),

    //Relations
    restaurant: DS.belongsTo('restaurant')
});

//address.js model
import DS from 'ember-data';

export default DS.Model.extend({
    streetName: DS.attr("string"),
    city: DS.attr("string"),
    country: DS.attr("string"),

    //Relations
    restaurant: DS.belongsTo('restaurant')
});

my template:

Restaurant id is: <br>
{{restaurant.restaurantId}}
<br>
{{model.restaurantId}}


{{#each model as |restaurant|}}
    <h2>{{restaurant.image}}</h2>
{{/each}}

and my route:

//restaurant.js route
import Ember from 'ember';

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

and of course, my serializer:

import DS from 'ember-data';

export default DS.RESTSerializer.extend({

    normalizeFindAllResponse(store, type, payload){
        return {
            id: "restaurantId",
            data: {
                type: type.modelName,
                id: "restaurantId",
                attributes: {
                    id: "restaurantId",
                    restaurantId: payload.restaurantId,
                    name: payload.name,
                    address: payload.address,
                    phone: payload.phone,
                    workingHours: payload.workingHours,
                    rating: payload.rating,
                    image: payload.image
                }
            }
        };
    }

});

Here is the JSON I get from server:

[ { "restaurantId" : 1, "name" : "Some name", "address" : { "streetName" : "some street", "city" : "some town", "country" : "some country" }, "phone" : 984894, "workingHours" : "08:00 - 23:00", "rating" : 3.0, "image" : "www.somelink.com" }, ... ]

I can see in Chrome inspector that my ember App makes a request to server and server responds with JSON. And there are no errors nor warnings, but my model data just does not get displayed. Any help is appreciated.




Aucun commentaire:

Enregistrer un commentaire