Load multiple model data in same api call emberjs?

Question

So here is two models that i have defined in emberjs

match.js

import DS from 'ember-data';

export default DS.Model.extend({
  team: DS.belongsTo('team', {async:true}),
  opponent: DS.belongsTo('team', {async: true}),
  type: DS.attr('string'),
  squad: DS.attr('boolean')
});

and

team.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  logo: DS.attr('string')
});

I am already loading the match as a model. In the same api call i also want to load the model data for team. The api response that i have till now is

{
  "meta":{
    "type":"match"
  },
  "data":[
    {
      "id":1119536,
      "type":"match",
      "attributes":{
        "id":1119536,
        "team":{
          "type":"team",
          "id":1,
          "attributes":{
            "id":1,
            "name":"England",
            "logo":null
          }
        },
        "opponent":{
          "type":"team",
          "id":3,
          "attributes":{
            "id":3,
            "name":"Pakistan",
            "logo":null
          }
        }
      }
    }
  ]
}

The match model data get loaded properly but i am having issues for the same with team data. The response is from network in browser and i already checked the model using ember plugin on browser that team data doesn't load. How can i use the same api call to load multiple models.

Answer 1

a few things to notice:

• dont put the id in attributes
• dont name an attribute type. Really dont! It's a reserved keyword.
• relationships are not attributes and should be under relationships
• use the included array to sideload data
• ids must be strings

so for example this would be a valid payload:

{
  "meta": {
    "type": "match"
  },
  "data": [
    {
      "id": "1119536",
      "type": "team",
      "attributes": {
        "match-type": "match"
      },
      "relationships": {
        "team": {
          "data": {
            "type": "team",
            "id": "1"
          }
        },
        "opponent": {
          "data": {
            "type": "team",
            "id": "3"
          }
        }
      }
    }
  ],
  "included": [
    {
      "type": "team",
      "id": "1",
      "attributes": {
        "name": "England",
        "logo": null
      }
    },
    {
      "type": "team",
      "id": "3",
      "attributes": {
        "name": "Pakistan",
        "logo": null
      }
    }
  ]
}