Search code examples
ember.jsember-data

Fetching data from other model Ember


I have a user model

export default DS.Model.extend({
    username : DS.attr('string'),
    numberOfQuotes: DS.attr('number'),
    numberOfFollowers: DS.attr('number'),
    numberOfFollowing: DS.attr('number')
});

and a quotes model

export default DS.Model.extend({
user: DS.belongsTo('user'),
text: DS.attr('string')
});

And i am getting quotes which also includes the user id and for this i am using

quotes :this.store.findAll('quote') But i am unable to get the user object so i am unable to retreive the data. Any help will work thanks.


Solution

  • 1) From ember local store:

    if you want to get the data from ember store you have to use peekAll. Use computed property in your controller or component,

    ...
    quotes: computed(function() {
      return this.store.peekAll('quote');
    }),
    ...
    

    Then you can fetch the user data in your template as follows,

    {{#each quotes as |quote|}}
      {{quote.user.username}}
    {{/each}}
    

    2) From server:

    note: findAll query expects the data to be in array.

    when using RESTAdapter,

    { quotes:
      [ {
         id: 1,
         text: "sample1",
         user: { username: "name1", numberOfQuotes: "5" }
        },
        {
         id: 2,
         text: "sample2",
         user: { username: "name2", numberOfQuotes: "8" }
        }
      ]
    }
    

    when using JSONAPIAdpater,

    { quotes:
      [ {
         id: 1,
         text: "sample1",
         user: 10
        },
        {
         id: 2,
         text: "sample2",
         user: 11
        },
        {
         id: 3,
         text: "sample3",
         user: 10
        }
      ],
      users:
      [ {
         id: 10,
         username: "name1",
         numberOfQuotes: "5"
         quotes: [1,3]
        },
        {
         id: 11,
         username: "name2",
         numberOfQuotes: "8"
         quotes: [2]
        }
      ]
    }
    

    When executing findAll query in your route model hook, any one of the above will be the kind of response you will be getting based on the APIAdapter you use.

    ...
    model: function() {
      return this.store.findAll('quote');
    }
    ...