Ember.js get nested resources attributes from parent

Question

I have these models:

TravelClient.Tour = DS.Model.extend({
  title: DS.attr('string'),
  description: DS.attr('string'),
  seats: DS.attr('number'),
  takenSeats: DS.hasMany('TravelClient.TakenSeat', {embedded:'always'})

  TakenSeats: function() {
    console.log(this.get('takenSeats').toArray())
  }.property('takenSeats')
});

TravelClient.TakenSeat = DS.Model.extend({
  tour: DS.belongsTo('TravelClient.Tour'),
  number: DS.attr('number')
});

JSON looks like this:

{
  "tours": [
    {
      "id": "5110e8b5a8fefe71e0000197",
      "title": "qui deserunt dolores",
      "description": "Id velit nihil.",
      "seats": 12,
      "taken_seats": [
        {
          "id": "5110e8b5a8fefe71e0000196",
          "number": "5"
        },
        {
          "id": "5110e8b5a8feffffe0000196",
          "number": "2"
        }]
}

But yeah, when I do console.log(this.get('takenSeats').toArray() in Tour model's method, it returns Uncaught TypeError: Cannot call method '_create' of undefined, so, it seems that takenSeats did not load with parent model. What's wrong?

UPDATE

added tour_id to JSON, but now, when I want to use calculated property:

  freeSeats: function() {
    var seats = this.get('seats');
    var takenSeats = this.get('takenSeats');
    if (takenSeats) {
      return (seats - takenSeats.length);
    }
    else {
      return seats;
    }
  }.property('seats', 'takenSeats')

takenSeats is undefined.

UPDATE 2:

TravelClient.RESTSerializer = DS.RESTSerializer.extend({
  init: function() {
    this._super();

    this.map('TravelClient.Tour',{
      images:{embedded:'always'},
      options:{embedded:'always'},
      takenSeats:{embedded:'always'}
    });
  }
});

TravelClient.CUSTOMAdapter = DS.RESTAdapter.extend({
  bulkCommit: false,
  serializer: TravelClient.RESTSerializer.create(),
  url: "http://192.168.1.27:3000",    
  buildURL: function(record, suffix) {
    var s = this._super(record, suffix);
    return s + ".json";
  }
});

TravelClient.Store = DS.Store.extend({
  revision: 11,
  adapter: TravelClient.CUSTOMAdapter.create()
});

TravelClient.store = TravelClient.Store.create();

albertjan · Accepted Answer · 2013-02-12T13:59:23.083

1

the TakenSeats computed property is perceived as a class because it's capitalized. Next to that embedded loading has to configured differently. Like so: This way the tour object becomes dirty when a takenseat changes.

DS.RESTAdapter.map('TravelClient.Tour', {
    takenSeats: { embedded: 'always' },
});

Or: This way the tour doesn't become dirty.

DS.RESTAdapter.map('TravelClient.Tour', {
    takenSeats: { embedded: 'load' },
});

Do this before you initialize your Store and Adapter. This will make the computed property unnecessary. You can just do tour.get('takenSeats');

Oh and you don't have to specify that the type is embedded anymore. The id's in the taken_seats array that link back to the tour need to be called tour_id.

{
  "tours": [{
    "id": "5110e8b5a8fefe71e0000197",
    "taken_seats": [{
      "id": "5110e8b5a8fefe71e0000196",
      "tour_id": "5110e8b5a8fefe71e0000197"
      "number": "5"
    }]
  }]
}

edited Feb 12 '13 at 13:59

answered Feb 12 '13 at 13:41

albertjan

7,739
6
44
74

Thanks, should I define tour_id on the server-side or add this in the DS.Model somehow? – xamenrax Feb 12 '13 at 13:54
On the server. If you want to be able to see to which `tour` a `takenseat` is linked to. – albertjan Feb 12 '13 at 13:57
Added tour_id to responding JSON. – xamenrax Feb 12 '13 at 14:18
Did you add the mappings of your adapter **before** initializing the store and adapter? – albertjan Feb 12 '13 at 14:38
@albertjan, assuming i want to get only the 'tour_id', using your examples above, will I do: **tour.get('takenSeats').get('tour_id')** or **tour.get('takenSeats').tour_id**. Thanks. – brg Mar 21 '13 at 14:57
@brg `tour.get('takenSeats.tourId')` or `tour.get('id')` – albertjan Mar 21 '13 at 15:46

Blair Anderson · Answer 2 · 2013-07-13T06:14:23.103

I had a similar problem to this. ember-model doesn't map through nested objects.

Your JSON output currently has all the data nested beneath the tours root.

If you have access to the API, then i suggest trying to remove the root, otherwise look into using your as the main object and then grabbing all the nested objects from there on down.

instead of this:

"tours": [{
    "id": "5110e8b5a8fefe71e0000197",
    "taken_seats": [{
      "id": "5110e8b5a8fefe71e0000196",
      "tour_id": "5110e8b5a8fefe71e0000197"
      "number": "5"
    }]
  }]

make it look like this:

  [{
    "id": "5110e8b5a8fefe71e0000197",
    "taken_seats": [{
      "id": "5110e8b5a8fefe71e0000196",
      "tour_id": "5110e8b5a8fefe71e0000197"
      "number": "5"
    }]
  }]

its possible my syntax is off, but this similar idea worked for me.

Ember.js get nested resources attributes from parent

2 Answers2