Value is showing up as [object Object] ember.js

Question

I'm trying to set up the attributes to my model but having trouble when nesting objects. Here is what I have

App.Posts = DS.Model.extend({
        title:  DS.attr('string'),
        author: {
            name:   DS.attr('string')
        },
        date:   DS.attr('date'),
        excerpt:    DS.attr('string'),
        body:   DS.attr('string')
    });

How am I suppose to declare the author object?

In the ember inspector when I go under data and under App.post and select one of the rows. It has a property a property App.Post with an attribute author: { name: [Object] }

here is the JS Bin link http://jsbin.com/tesozepexaqi/2/

I'm just trying to go through the tutorials. Is there another way of doing it? — user3813559, Aug 17 '14 at 01:57

score 1 · Answer 1 · answered Aug 17 '14 at 00:25

1

Adjusting this example from the Ember docs like the below should work:

App.Post = DS.Model.extend({
  title:  DS.attr('string'),
  author: DS.belongsTo('author'),
  date:   DS.attr('date'),
  excerpt:    DS.attr('string'),
  body:   DS.attr('string')
});

App.Author = DS.Model.extend({
  post: DS.belongsTo('post')
})

answered Aug 17 '14 at 00:25

Dhaulagiri

3,281
24
26

This didn't fix the problem. – user3813559 Aug 17 '14 at 01:15
You're going to need to share more information then like a jsbin demonstrating the issue or a code repository. The issue may lie elsewhere in your code. – Dhaulagiri Aug 17 '14 at 01:17

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Ember works perfectly fine without Ember Data. Let's pretend we want to do it with Ember Data:

Ember Data's Records should be flat. This means all properties are at the top level. If you have a related data that exist deeper they generally live in a different record. If you're attempting to embed the record you'll need to look into the tricky world of embedded records (Ember-data embedded records current state?). At the very least these related records must have an id defined. So here's an example of what the data returned from server should look like.

  {
    posts:[
      {
        id: '1',
        title:  'My name is Django.',
        author: {
          id:1,
          name:   'D name'
        },
        date:   new Date('08-15-2014'),
        excerpt:    'The D is silent.',
        body:   'The D is silent.'
      }, 
      {
         id: '2',
         title:  'White horse',
         author: {
           id:2,
             name:   'horse name'
         },
         date:   new Date('08-15-2014'),
         excerpt:    'Is what I ride.',
         body:   'My horse likes to dance.'
     }
    ]
  }

Code

App.ApplicationAdapter = DS.RESTAdapter.extend();


App.PostSerializer = DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
  attrs: {
    author: {embedded: 'always'}
  }
});

App.Post = DS.Model.extend({
  title:  DS.attr('string'),
  author: DS.belongsTo('author'),
  date:   DS.attr('date'),
  excerpt:    DS.attr('string'),
  body:   DS.attr('string')
});

App.Author = DS.Model.extend({
  name: DS.attr()
});

Example: http://jsbin.com/vazada/1/edit

One other small tip, you'll not want to use globals when working with the routes, you can use modelFor to get the model from a different route.

App.PostsRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('post');
    }
});

App.PostRoute = Ember.Route.extend({
    model: function(params) {
      var posts = this.modelFor('posts');
      return posts.findBy('id', params.post_id);
    }
});

Personally, I think Ember Data is overkill. Ember works perfectly well with POJOs. If you need caching and the ability to rollback then Ember Data might be a good solution for you.

Example: http://jsbin.com/vazada/2/edit

Value is showing up as [object Object] ember.js

2 Answers2

Code