Model propertery call another model

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


          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: ""

So I built two models


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


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('') + ', ' + this.get('address.state') + ' '
      + this.get('address.zipcode');

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

You probably should do this:

addressline: Ember.computed('', 'address.state', function() {
    return `${this.get('')}, ${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

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

let record ='provider');
record.address ='address');

return record;

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

Yes, sorry, I meant template