Search code examples
ember.jsember-dataember-cli

Relationship with 2 API's getting error

I have 2 API's:

  1. http://example.api.com/api.json (this file have aprox 5mb)
  2. http://api.com/:itemId

The 1st one have all data that i need, like this:

{
"realms": [
{"name":"Azralon","slug":"azralon"}],
"auctions": [
{"auc":828911977,"item":76139,"owner":"Bloodkina","bid":15294990,"buyout":16099990,"quantity":10,"timeLeft":"VERY_LONG"},
{"auc":828911979,"item":10000,"owner":"Bloodkina", "bid":15294990,"buyout":16099990,"quantity":100,"timeLeft":"VERY_LONG"},
{"auc":829305192,"item":98828,"owner":"Tempestivå","bid":15294990,"buyout":16099990,"quantity":5,"timeLeft":"VERY_LONG"},
{"auc":829305193,"item":98728,"owner":"Tempestivå", "bid":15294990,"buyout":16099990,"quantity":2,"timeLeft":"VERY_LONG"}
]}

The 2nd one have the name of the Items, but it only responds when i pass itemId as parameter. For example the item:76139, like http://api.com/76139

{
    "id": 76139,
    "description": "",
    "name": "Wild Jade",
    "icon": "inv_misc_gem_x4_rare_uncut_green",
}

I want to show the name of item and owner, but i getting an error like <DS.PromiseObject:ember71726> im my item field, the owner field is ok. How can i do this?? (it's the Blizzard API for auctions and items)

model/auction.js

import DS from 'ember-data';

export default DS.Model.extend({
  auc: DS.attr('number'),
  item: DS.belongsTo('item'), //items: DS.belongsTo('item'),
  owner: DS.attr('string'),
});

model/item.js

import DS from 'ember-data';

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

routes/index.js

import Route from '@ember/routing/route';

export default Route.extend({
  model(){
    return this.store.findAll('auction');
  }
});

routes/item.js

import Route from '@ember/routing/route';

export default Route.extend({
  model(params){
    return this.store.findRecord('item', params.item_id)
  },
});

serializers/auction.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  normalizeResponse (store, primaryModelClass, payload, id, requestType) {
    return {
      realms: payload.realms,
      data: payload.auctions.map(ah=>{
        return {
        id: ah.auc,
        type:'auction',
        attributes: ah,
        //Added this
        relationships: {
          item:{
          data: {
          id: ah.item,
          type: 'item',
      }
    }
  }
        }
      })
    };
  }
});

serializers/item.js

import DS from 'ember-data';

export default DS.JSONSerializer.extend({
  normalizeResponse (store, primaryModelClass, payload, id, requestType) {
    payload = {
      data : payload,
      id: payload.id,
      name: payload.name
    };
    return this._super(store, primaryModelClass, payload, id, requestType)
  }
});

templates/index.hbs

{{#each model as |auction|}}
<ul>
 <li>{{auction.items.name}}</li>
 <li>{{auction.quantity}}</li>
 <li>{{auction.bid}}</li>
 <li>{{auction.buyout}}</li>
 <li>{{auction.timeLeft}}</li>
 <li>{{auction.owner}}</li>
</ul>
{{/each}}

Error

Solution

  • Hey Cas 👋 I'm going to try and answer this one as best I can while trying to describe some of the issues that you were probably facing along the way. I have it working locally so hopefully I am going to be able to communicate how you can get it working on your side.

    Firstly, as I mentioned in my comment you seemed to have a missmatch between your API, your model and your template when it came to how you were referencing items. You need to make sure that each key is correct so they all match up. Here is my backend responder, my model and my template:

    Backend responder using express-autoroute:

    module.exports.autoroute = {
  get: {
    '/auctions': function getThings(req, res) {
      res.json({
        realms: [{
          name: 'Azralon',
          slug: 'azralon',
        }],
        auctions: [{
          auc: 828911977,
          item: 76139,
          owner: 'Bloodkina',
          bid: 15294990,
          buyout: 16099990,
          quantity: 10,
          timeLeft: 'VERY_LONG',
        },
        ...
      });
    },
  },
};

    Auction model (Ember)

    import DS from 'ember-data';

export default DS.Model.extend({
  auc: DS.attr('number'),
  item: DS.belongsTo('item'),
  owner: DS.attr('string'),
});

    Application template (Ember)

    {{#each model as |auction|}}
  <ul>
   <li>{{auction.item.name}}</li>
   <li>{{auction.quantity}}</li>
   <li>{{auction.bid}}</li>
   <li>{{auction.buyout}}</li>
   <li>{{auction.timeLeft}}</li>
   <li>{{auction.owner}}</li>
  </ul>
{{/each}}

    As you can see the backend is responding with item as an attribute to an auction, the model is using item as it's attribute name and the template is also accessing the key item. This is what I meant when I said they needed to match 🙂

    The second thing that I noticed is that your auction serialiser isn't saying anything about relationships. If you check out the JSON:API spec you will see how relationships are supposed to be defined, i.e. with a relationships object

    I was able to get your thing working using the following code:

    Auction Serializer (Ember)

    import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
  normalizeResponse (store, primaryModelClass, payload, id, requestType) {
    return {
      realms: payload.realms,
      data: payload.auctions.map(ah => {
        return {
        id: ah.auc,
          type:'auction',
          attributes: ah,
          relationships: {
            item: {
              data: {
                id: ah.item,
                type: 'item',
              }
            }
          }
        }
      })
    };
  }
});

    as you can see I'm building the relationships object and making sure that the item key matches.

    The last issue I found was that your item serialiser wasn't working, I'm assuming that this is just that you didn't get this far because you successfully implemented the Auction Serializer. Here is my implementation:

    Item Serializer (Ember):

    import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
  normalizeResponse (store, primaryModelClass, payload, id, requestType) {
    return {
      data : {
        attributes: payload,
        id: payload.id,
        type: 'item',
      },
    };
  }
});

    As I said this is now working for me locally but let me know if you have any more issues 🙂