Ember get filtered data from the store/mirage

Question

I am trying to build an app for smarthome devices with ember. I already have installed mirage and declare an array which is called data. It holds arrays like households, users and devices. Now I am stuck with get filtered data from the store and i am really confused by the behaviour of the store. For this reason I already read some equal topics like this Filtering store data in ember but this doesn´t work in my case.

Actually this is my router.js

Router.map(function() {
  this.route('about');
  this.route('users', function() {
  });
  this.route('households', function() {
    this.route('index', { path: '/:user_id' })
    this.route('rooms',{ path: '/:household_id' });
    this.route('devices');
  });
});

If I am going to households.index I want to see all households which have the user-id in his member-array. The following code snipped shows an example of my data-structure.

  "users": [
      {
          "id":101,
          "forename":"Peter",
          "surname":"Peterson",
          "memberIn":[
              501
          ]
      },
      {
          "id":102,
          "forename":"Anna",
          "surname":"Peterson",
          "memberIn":[
              501
          ]
      }
]

  "households":[
      {
          "id":501,
          "name":"Zuhause",
          "admin":131000,
          "member":[
              101,
              102
          ]
}

I am calling the route household.index like this {{#link-to "households.index" user.id}} and my route in household.index looks like this

model(params) {
    //holt alle Haushalte und gibt dann nur die Haushalte weiter, die auch den aktuellen Benutzer als Member haben.
   return this.get('store').findAll('household').then(results => results.filter((site) => {
       return site.get('member').filter(x => x == params.user_id).length > 0;
   }));
  } 

And my config.js part at mirage like this:

  this.get('/households', function(db, request) {
    return { households: data.households };   
});

This works fine! But in my opinion the server is responsible for giving me the data I am requesting for. So all I want is that I send a specific request and just get the households that I need.

My attempt: index.js:

export default Route.extend({
    model(params) {
        return this.get('store').find('household', params.user_id);
      }
});

config js part:

  this.get('/households/:id', function(db, request) {
      console.log('household get');
      console.log(data.households.filter(x => x.member.filter(x => x == request.params.id).length > 0));
    return  { households: data.households.filter(x => x.member.filter(x => x == request.params.id).length > 0) };   
});

Debug Error:

Error while processing route: households.index payload.data is null

I cant understand why this error occurs. The log gives me the array i want to return.

Answer 1

By default Ember Data ships with the JSONAPISerializer and this assumes a few things about the way your server (in this case mirage) is formatting data. In this case the document that mirage is returning is expected to generally conform to the JSON API Spec and have a top-level member data where the response's primary data resides.

If you're looking to stick to your custom formatted responses you may want to check out the Ember Data's JSONSerializer . Otherwise, returning the following should get you closer:

return  { data: db.households.filter(x => x.member.filter(x => x == request.params.id).length > 0) };

or you could leverage the JSONAPISerializer that ships with Mirage

See more here Ember Guides | Serializers

Answer 2

Make sure you are using RestSerializer in mirage,

// mirage/serializers/application.js
import { RestSerializer } from 'ember-cli-mirage';

export default RestSerializer;

and for the right format refer RESTAdapterAPI .

Just ensure are you returning data in the below format,

for the single response,

{
  "posts": {
    "id": 1,
    "title": "I'm Running to Reform the W3C's Tag",
    "author": "Yehuda Katz"
  }
}

and for more than one,

{
  "posts": [
    {
      "id": 1,
      "title": "I'm Running to Reform the W3C's Tag",
      "author": "Yehuda Katz"
    },
    {
      "id": 2,
      "title": "Rails is omakase",
      "author": "D2H"
    }
  ]
}