find and findAll return an empty array

Question

In an ember 1.13.3 app, I have this route :

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.find('skill');
  }
});

And this model :

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string'),
  link: DS.attr('string'),
  acquired_skills: DS.hasMany('users', { async: true, inverse: 'acquired_skills' } ),
  searched_skills: DS.hasMany('users', { async: true, inverse: 'searched_skills' } )
});

This is the result returned by the api :

{"skills":[{"id":1,"name":"Ember","description":"JS Framework","link":null}]}

The array is empty. I can check it with this console.log(this.store.find('skill').get('length')); and I have 0.

What's wrong?

Andrey Mikhaylov - lolmaus · Accepted Answer · 2015-07-27 10:44:23Z

5

store.find() is an asynchronous operation. It returns a promise. To access the actual data you have to pass a callback to the promise. When the data is fetched from the backend, the promise resolves and executes the callback, passing the data into it:

var foo = this.store.find('skill');

console.log("typeof foo", typeof foo);

foo.then( function(result) {
  console.log("result", result);
});

console.log("end of script");

The above code would produce the following output:

typeof foo, Promise
end of script
result, Object

UPD 1

You're using a JSONAPIAdapter. The payload you've shown does not comply with the JSON API spec. You should update your backend to conform to the spec.

If you can't, use the RESTAdapter and RESTSerializer as a workaround:

app/adapters/application.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'http://localhost:3000',
  namespace: 'api/v1'
});

app/serializers/application.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  isNewSerializerAPI: false
});

More info here: http://emberjs.com/blog/2015/06/18/ember-data-1-13-released.html

edited Jul 27, 2015 at 10:44

answered Jul 26, 2015 at 20:25

Andrey Mikhaylov - lolmaus

24k8 gold badges91 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dougui Over a year ago

I did console.log("result", result.get('length')) and I have 0. Anyway, {{#each model as |skill|}}{{skill.name}}{{/each}} Show nothing.

Andrey Mikhaylov - lolmaus Over a year ago

Well, then you have to share the payload you're receiving from the backend.

Tom Netzband Over a year ago

Can you replicate this in a JSbin or anything? I used your code to create a small app on my computer and I'm not having any problems. Are you getting any console errors or warnings? My {{#each}} is printing out the skill name as expected.

Andrey Mikhaylov - lolmaus Over a year ago

store.find() makes a request to the backend. Do you have a backend or a backend mock to serve some data?

Dougui Over a year ago

Yes I have, this is the result of the backend : {"skills":[{"id":1,"name":"Ember","description":"JS Framework","link":null}]}. I can share the source code but I'm not sure than it can be useful.

Collectives™ on Stack Overflow

find and findAll return an empty array

1 Answer 1

UPD 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPD 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related