CODEWITHSUNDEEP
ember.jsember-datajson-api
Christian Fazzini
Christian Fazzini

Reputation: 19723

How should I filter items of a user?

I am using Ember 1.13.2 and Ember Data 1.13.4. The API conforms to JSON API format (http://jsonapi.org/format).

A user has many items. Doing {{model.items}} in the template will return ALL items of the user.

What if I also need to display ONLY blue items from the user. How should I go about this?

// Route
import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
     // Executes: http://localhost:3099/api/v1/users/5
    return this.store.findRecord('user', params.user_id);
  }
})

// Template
firstName: {{model.firstName}} - works
<br>items: {{model.items}} - works
<br>blue items: {{model.items}} - what do we do about this?

// app/models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
  items:        DS.hasMany('item', { async: true }),
  firstName:    DS.attr('string')
});

// app/models/item.js
import DS from 'ember-data';
export default DS.Model.extend({
  user:           DS.belongsTo('user', { async: true }),
  name:           DS.attr('string')
});

Upvotes: 0

Views: 479

Answers (1)

GJK
GJK

Reputation: 37389

I misunderstood the original question. It seems as if you want to fetch only the items where the color is blue (and avoid fetching the rest). For this, you'll need to query the server, which requires server-side code. But, once you have the server-side code done, you can do something like this:

blueItems: Ember.computed('[email protected]', {
    get() {
        const query = {
            user: this.get('id'),
            color: 'blue'
        };

        return this.get('store').find('item', query);
    }
})

But again, you'll need your server to support querying for that data. (The JSON API states how you need to return the data, but you'll need to implement the query yourself.)

Old answer that filters the items after fetching for display (just for reference):

I would use a computed property:

blueItems: Ember.computed('[email protected]', {
    get() {
        return this.get('items').filter((item) => {
            return item.get('color') === 'blue';
        });
    }
})

Or the shorthand ;)

blueItems: Ember.computed.filterBy('items', 'color', 'blue')

Not every operation has an Ember shorthand which is why I gave the full example first.

Using computed properties with promises is sometimes tricky, but this computed property should update whenever your items array updates.

Upvotes: 2

Related Questions