与 2 API 的关系出现错误

Question

我有 2 个 API：

http://example.api.com/api.json（这个文件有大约 5mb）
http://api.com/:itemId

第一个有我需要的所有数据，像这样：

{
"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"}
]}

第二个有项目的名称，但只有当我将 itemId 作为参数传递时它才会响应。比如item:76139，比如http://api.com/76139

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

我想显示项目名称和所有者，但我在项目字段中收到类似 <DS.PromiseObject:ember71726> 的错误，所有者字段正常。我怎样才能做到这一点？？（这是用于拍卖和物品的暴雪 API）

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}}

Answer 1

嘿 Cas，我将尽我所能尝试回答这个问题，同时尝试描述您在此过程中可能遇到的一些问题。我让它在本地工作，所以希望我能够与您交流如何让它在您身边工作。

首先，正如我在评论中提到的，在引用 items 时，您的 API、模型和模板之间似乎存在不匹配。您需要确保每个密钥都是正确的，以便它们都匹配。这是我的后端响应程序、我的模型和我的模板：

后端响应程序使用 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',
        },
        ...
      });
    },
  },
};

拍卖模型（Ember）

import DS from 'ember-data';

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

申请模板（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}}

如您所见，后端正在响应 item 作为拍卖的属性，模型使用 item 作为它的属性名称，模板也在访问键 item.这就是我说他们需要匹配时的意思

我注意到的第二件事是您的拍卖序列化程序没有说明任何关系。如果您查看 JSON:API spec you will see how relationships are supposed to be defined, i.e. with a relationships object

我能够使用以下代码让你的东西工作：

拍卖序列化程序（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',
              }
            }
          }
        }
      })
    };
  }
});

如您所见，我正在构建关系对象并确保 项目键匹配 。

我发现的最后一个问题是您的项目序列化程序无法正常工作，我假设这只是您没有走到这一步，因为您成功实施了拍卖序列化程序。这是我的实现：

项目序列化器（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',
      },
    };
  }
});

正如我所说，这现在在本地对我有用，但如果您还有任何问题，请告诉我

与 2 API 的关系出现错误

Relationship with 2 API's getting error

ember.js

ember-data

ember-cli

后端响应程序使用 express-autoroute:

拍卖模型（Ember）

申请模板（Ember）

拍卖序列化程序（Ember）

项目序列化器（Ember）：