CODEWITHSUNDEEP
javascriptember.jsember-data
Jessiah
Jessiah

Reputation: 1644

Ember Data one to many relationship not working

I am pretty new to ember but I am wondering if this is an issue with my logic or if there is something not functioning correctly in ember.

When I try model.get('profile') I get null.

I have been able to retrieve a profile model like so: this.store.find('profile', 17); Also I can add a profile_id attribute to the location model and then use it 

var location = this.modelFor('location');
var profile =  this.store.find('profile', 17);

but from what I can find in the documentation I should be able to use .get('profile') on a location object to get its profile.

The strange thing is that my attachments relationship (location has many attachments) works perfectly.

Am I missing something? What am I doing wrong that is causing this relationship to fail?

I have three models:

locatons-> 

export default DS.Model.extend({
  image: DS.attr('string'),
  latitude:DS.attr('string'),
  longitude:DS.attr('string'),
  outlets:DS.attr('string'),
  parking:DS.attr('string'),
  internet:DS.attr('string'),
  credit_cards:DS.attr('string'),
  share_url:DS.attr('string'),
  roaster:DS.attr('string'),
  about:DS.attr('string'),
  name: DS.attr('string'),
  address: DS.attr('string'),
  images: DS.attr('string'),
  attachments: DS.hasMany('attachment'),
  profile: DS.belongsTo('profile'),
  curator_image: DS.attr('string'),
  curator_about: DS.attr('string'),
  curator_name: DS.attr('string'),
  style_image_url: function(){
    return "background-image:url('" + this.get("image") + "')";
  }.property("image"),
  style_profile_image_url: function(){
    return "background-image:url('" + this.get("curator_image") + "')";
  }.property("curator_image"),
});

attachments ->

export default DS.Model.extend({
    location: DS.belongsTo('location'),
    image:DS.attr('string')
});

profiles ->

export default DS.Model.extend({
    location: DS.hasMany('location'),
    name:DS.attr('string'),
    about:DS.attr('string'),
    image:DS.attr('string'),
});

here is a sample response from the server: locations.json

{
    attachments: [
    {
        id: 254,
        image: "https://dripper-dev.s3-us-west-1.amazonaws.com/uploads/large_9443c014-69e1-4616-943d-e627a47f8306.jpg?AWSAccessKeyId=AKIAJPYWBHET4VVL5NUA&Signature=nD3YMiuFiHtpuTPop77Q%2BS6N9HM%3D&Expires=1427847353"
    },
    {
        id: 250,
        image: "https://dripper-dev.s3-us-west-1.amazonaws.com/uploads/large_3e562933-5ce2-4f91-bb6f-6fe6883e0463.jpg?AWSAccessKeyId=AKIAJPYWBHET4VVL5NUA&Signature=ESbhuHNjx9kD63gJY3UVRsHs2B8%3D&Expires=1427847353"
    }],
    locations: [
    {
        id: 12,
        latitude: "45.550346",
        longitude: "-122.666584",
        address: "3808 North Williams Avenue, Portland, OR 97212, USA",
        outlets_text: "Yes",
        internet_text: "No",
        roaster: "Ristretto Roasters",
        parking_text: "Yes",
        credit_cards: true,
        image: "https://dripper-dev.s3-us-west-1.amazonaws.com/uploads/medium_9b676fc6-814c-4f5f-a03b-5a5f650fc7aa.jpg?AWSAccessKeyId=AKIAJPYWBHET4VVL5NUA&Signature=w5pSN5iJbtlWfiFo2UMcJMN6pAs%3D&Expires=1427847347",
        name: "Ristretto",
        twitter_username: null,
        curator_image: "https://dripper-dev.s3-us-west-1.amazonaws.com/uploads/basic_uploader/Profile/9d77af52-033b-4bd9-8cb4-8b961f366392.jpg?AWSAccessKeyId=AKIAJPYWBHET4VVL5NUA&Signature=YsgxmH%2B5wmlOpVSoti5kn0DozKQ%3D&Expires=1427847347",
        curator_name: "Jack White",
        curator_about: "this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test ",
        profile_id: 17,
        attachment_ids: [
            30
        ]
    },
    ...

Routes: /routes/location.js

export default Ember.Route.extend({
    model: function(params) {
        return this.store.find('location', params.location_id);
    }
});

/routes/location/index

export default Ember.Route.extend({
    model: function() {
        return this.modelFor('location').get('profile');
    }
});

UPDATE: I was able to get the profile model by changing my json to:

{
    attachments: [],
    locations: [
    {
        id: 12,
        latitude: "45.550346",
        longitude: "-122.666584",
        address: "3808 North Williams Avenue, Portland, OR 97212, USA",
        outlets_text: "Yes",
        internet_text: "No",
        roaster: "Ristretto Roasters",
        parking_text: "Yes",
        credit_cards: true,
        image: "https://dripper-dev.s3-us-west-1.amazonaws.com/uploads/medium_9b676fc6-814c-4f5f-a03b-5a5f650fc7aa.jpg?AWSAccessKeyId=AKIAJPYWBHET4VVL5NUA&Signature=bhPpdV6bxroZZ0Lfk2jN6aPht7A%3D&Expires=1427916453",
        name: "Ristretto",
        twitter_username: null,
        curator_image: "https://dripper-dev.s3-us-west-1.amazonaws.com/uploads/basic_uploader/Profile/9d77af52-033b-4bd9-8cb4-8b961f366392.jpg?AWSAccessKeyId=AKIAJPYWBHET4VVL5NUA&Signature=K1VuT3Oe8ncTdX%2FA9H7s4XJcQ84%3D&Expires=1427916453",
        curator_name: "Jack White",
        curator_about: "this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test ",
        profile_id: 17,
        profile: {
            id: 17,
            name: "Jack White",
            about: "this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test ",
            action_url: null,
            action_caption: null,
            published: null,
            image: {
                url: "https://dripper-dev.s3-us-west-1.amazonaws.com/uploads/basic_uploader/Profile/9d77af52-033b-4bd9-8cb4-8b961f366392.jpg?AWSAccessKeyId=AKIAJPYWBHET4VVL5NUA&Signature=E%2BgWHlMRcIXDeMOTmLhfdU8YyTc%3D&Expires=1427916459"
            },
            user_id: 9,
            created_at: "2015-03-24T20:07:31.043Z",
            updated_at: "2015-03-24T20:09:01.518Z"
        },
        attachment_ids: [
        30
        ]
    }, ...

saving my location object in my route to window.loc and then checking in the browser console: loc.get('profile').get('name') returns "Jack White" which is correct but I am unclear on why exactly this change makes a difference. Does side loading (putting the ids of the related objects and including a top level array of those objects) only work on one to many relationships in ember data?

Any and all input is welcome, I am still new to ember data.

Upvotes: 0

Views: 356

Answers (3)

Jessiah
Jessiah

Reputation: 1644

I found that the solution was renaming profile_id: xx to profile: xx in the json. I assumed that model_id was the correct way of noting belongs-to relationships but it turns out ember expects just the model name. Hopefully this helps someone in the future!

Upvotes: 1

kunerd
kunerd

Reputation: 1076

There is no side-loaded profile object in your locations.json, like it is for the attachment. It should look more like that:

{
   locations: [{
     id: 12,
     ...
     profile_id: 17,
     attachment_ids: [...]
   }],
   attachments: [...],
   profiles: [...]    /* for multiple profiles, or*/
   profile: {...}     /* for a single side-loaded model */
}
...

Otherwise, if you want to load the profile model asynchronous, you need to declare it in your location model as following:

profile: DS.belongsTo('profile', {
  async: true
}

Upvotes: 1

millerbr
millerbr

Reputation: 2961

I might be being dumb here, but your Location model doesn't have a Profile field - presumably because it belongs to Profile. But, without that field, you won't be able to perform .get('profile') on a Location.

Upvotes: 0

Related Questions