Model propertery call another model

Ember Data
1

Ok so I have the follow API response and I am trying to build an appropriate model for it.

Mirage

{
          type: 'providers',
          id: 2,
          attributes: {
            category: "Handy",
            status: true,
            name: "John's Service",
            address: {
              street: "125 DeKalb Pike",
              city: "King of Prussia",
              state: "PA",
              zipcode: "19406"
            },
            phone: "215-555-5555",
            email: "john@test.com"
          }
        }

So I built two models

address

export default DS.Model.extend({
  street: DS.attr(),
  city: DS.attr(),
  state: DS.attr(),
  zipcode: DS.attr()
});

provider

export default DS.Model.extend({
  category: DS.attr(),
  status: DS.attr(),
  name: DS.attr(),
  address: DS.belongsTo('address'),
  phone: DS.attr(),
  email: DS.attr(),
  addressline: Ember.computed('address', function() {
    return this.get('address.city') + ', ' + this.get('address.state') + ' '
      + this.get('address.zipcode');
  })
});

On my view the address property is empty. What am I doing wrong?

2

You probably should do this:

addressline: Ember.computed('address.city', 'address.state', function() {
    return `${this.get('address.city')}, ${this.get('address.state')} ${this.get('address.zipcode')}`;
  })

I updated it to use ES6 template strings, but the important part is to actually depend on the properties on the relationship, not the relationship itself on the computed property.

1 Like
3

Thank you for the help. I also had to do this to the model that I pass into the view

let record = this.store.createRecord('provider');
record.address = this.store.createRecord('address');

return record;
4

By view, do you mean template? Views have been deprecated in Ember.

5

Yes, sorry, I meant template