Can't get data from another models

Ember Data
1

Hello! I’m new with Ember and I need help to understand how to show data with multiple models. I’m using fixture adapter and there my models and fixtures

User model

App.User = DS.Model.extend({
    name: DS.attr(),
    phone: DS.attr(),
    comment: DS.attr(),
    city: DS.belongsTo('city'),
    type: DS.belongsTo('type')
});

App.User.FIXTURES = [
{
    id: 1,
    name: 'Roger Brown',
    phone: '+1 (218) 12345678',
    comment: 'Lorem ispum dolor sit amet in voluptate fugiat nulla pariatur.',
    city: 3,
    type: 1
},
{
    id: 2,
    name: 'Ashton Black',
    phone: '+7 (920) 12345678',
    comment: 'Lorem ispum dolor sit amet in voluptate fugiat nulla pariatur.',
    city: 4,
    type: 2
}
];

City model

App.City = DS.Model.extend({
    name: DS.attr(),
    user: DS.hasMany('user', {async: true})
});

App.City.FIXTURES = [
    {
        id: 3,
        name: 'Lisbon',
        user: [1]
    },
    {
        id: 4,
        name: 'Moscow',
        user: [2]
    }
];

Type model

App.Type = DS.Model.extend({
    name: DS.attr(),
    user: DS.hasMany('user', {async: true})
});

App.Type.FIXTURES = [
    {
        id: 1,
        name: 'individual',
        user: [1]
    },
    {
        id: 2,
        name: 'legal entity',
        user: [2]
    }
];

My user route

App.UserRoute = Ember.Route.extend({
    model: function(params){
        return this.store.find('user', params.user_id);
    }
});

User template

<div class="col-sm-12">
<div class="panel form-horizontal">
    <div class="panel-heading">
        <span class="panel-title">User View</span>
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
                <p>{{name}}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Phone</label>
            <div class="col-sm-10">
                <p>{{phone}}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Comment</label>
            <div class="col-sm-10">
                <p>{{comment}}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">City</label>
            <div class="col-sm-10">
                <p>
                    {{city}}
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Type</label>
            <div class="col-sm-10">
                <p>{{type}}</p>
            </div>
        </div>
        <div class="form-group">
            <button {{action 'deleteUser'}}>Delete</button>
        </div>
    </div>
</div>
</div>
{{outlet}}

And when I trying to show user detail I get something like that

City <App.City:ember385:3>
Type <App.Type:ember388:1>

Please help to understand how to get name of this fields! Thank you very much :smile:

2

I am a beginner too but I think it is city.city and type.type in your templates.

1 Like
3

I am also new to Ember. I can’t get discourse to format your code in a quote correctly so I’m going to just type it out myself, but I think the previous answer is heading in the right direction. Wouldn’t it be:

<p>
    {{city.city.name}}
</p>

What you see here “<App.City:ember385:3>” is Ember’s way of showing you the object reference. Like in Java if you:

Object aObject = new Object();
System.out.println(aObject);

You get: Object@1922321, which is (the default toString()) of “classname + hashcode”.

1 Like
4

Yes I think my city.city must be city.name and type type.name

1 Like
5

Thank you very much for your answers!

I get fields by adding {async: true} to User model

App.User = DS.Model.extend({
    name: DS.attr(),
    phone: DS.attr(),
    comment: DS.attr(),
    city: DS.belongsTo('city', {async: true}),
    type: DS.belongsTo('type', {async: true})
});

And all works perfectly :smile: