Resolve related models promises to show it on handlebars templates

Ember Data
1

Hey there! I have relationships like these on my models:

    //app/models/veiculo.js
    export default DS.Model.extend({
      atendimento: DS.belongsTo('atendimento-veiculo'),
      atividade: DS.belongsTo('atividade-veiculo'),
    });


    //app/models/atendimento-veiculo.js
    import DS from 'ember-data';

    export default DS.Model.extend({
      atendimento: DS.attr('string')
    });


    //app/models/atividade-veiculo.js
    import DS from 'ember-data';

    export default DS.Model.extend({
      atividade: DS.attr('string')
    });

And I have a payload like this:

"data": [
{
    "attributes": {
        "placa": "JJJ1111",
        "placa-vinculada": "JJJ5555",
        "atendimento": {
            "data": {
                "attributes": {
                    "atendimento": "Atendimento Teste"
                },
                "id": "1",
                "links": {
                    "self": "/api/v1.0/atendimentos-veiculo/1"
                },
                "type": "atendimento_veiculo"
            },
            "links": {
            "self": "/api/v1.0/atendimentos-veiculo/1"
            }
        },
        "atividade": {
            "data": {
                "attributes": {
                    "atividade": "Atividade Teste"
                },
                "id": "1",
                "links": {
                    "self": "/api/v1.0/atividades-veiculo/1"
                },
                "type": "atividade_veiculo"
            },
            "links": {
            "self": "/api/v1.0/atividades-veiculo/1"
            }
        },
    },
    "id": "6",
    "links": {},
    "type": "veiculo"
}]

I’m trying to show these data on handlebars templates like this {{model.atendimento}} or {{model.atividade}} but it’s not rendered corretly. Instead of the value I get a promisse <DS.PromiseObject:ember642>.

I’m not sure what’s wrong because I’m using the default JSONAPISerializer and the documentation says it’ll be loaded automagically. Does it have something to do with attributes types? Am I supposed to change the payload data? I have tried to load the related models with RSVP after the main model is loaded but it didn’t work.

2

Looks like you need to specify relationships according to the spec instead of being nested in attributes. See the example payload at http://jsonapi.org/ and how there is that “relationships” key. :slight_smile:

1 Like
3

To add a little more color to what @skaterdav85 said, the JSONAPISerializer is meant to work out of the box with a JSON API backend. The JSON API is a very explicit spec, so if your backend doesn’t return data that meets the spec (most don’t by default), you’ll have to use customized serializers. Alternatively you could of course change your backend response format but in most cases that’s not the right solution. Once the data is correctly munged by your serializer the relationships should work automagically like you expect.

1 Like
4

YES YES YES! Thank you so much! It worked!

Actually I’m developing both the back-end and the front-end. I just changed my payload to something like this:

"data": [
    {
      "attributes": {
        "placa": "JJJ1111", 
        "placa-vinculada": "JJJ5555", 
        "renavam": "312", 
      }, 
      "relationships": {
        "atendimento": {
          "data": {
            "id": "1", 
            "type": "atendimento_veiculo"
          }, 
          "links": {
            "related": "/api/v1.0/atendimentos-veiculo/1"
          }
        }, 
        "atividade": {
          "data": {
            "id": "1", 
            "type": "atividade_veiculo"
          }, 
          "links": {
            "related": "/api/v1.0/atividades-veiculo/1"
          }
        }
      }, 
      "type": "veiculo",
      "id": "6", 
      "links": {
        "self": "/api/v1.0/veiculos/6"
      }, 
    },

And now I don’t have broken promises anymore (Haha!). Thank you so much guys! =D

1 Like