时间戳

首页 > 解决方案 > 与 2 API 出现错误的关系

ember.js - 与 2 API 出现错误的关系

问题描述

我有 2 个 API：

  1. http://example.api.com/api.json（这个文件大约有 5mb）
  2. 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）

模型/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'),
});

模型/item.js

import DS from 'ember-data';

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

路线/index.js

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

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

路线/item.js

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

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

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

序列化程序/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)
  }
});

模板/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}}

错误

标签： ember.jsember-dataember-cli

解决方案

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

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

使用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它的属性名称，并且模板也在访问 key item。这就是我说他们需要匹配时的意思

我注意到的第二件事是您的拍卖序列化程序没有说明任何关系。如果您查看JSON:API 规范，您将看到应该如何定义关系，即使用关系对象

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

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

正如我所说，这现在在本地为我工作，但如果您还有其他问题，请告诉我

推荐阅读