如何展示API返回的object对象数据表示

Question

下面是来自我的API的响应

"attributes": {
"original-data": "{\"name\":\"Foobarz\",\"updated_at\":\"2018-02-27 
08:06:14 UTC\"}",
"new-data": "{\"name\":\"Foobar\",\"updated_at\":\"2018-02-27 
10:55:17 UTC\"}",
"event-name": "update",
"ip-address": "121.58.201.106",
"user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 
Safari/537.36",
"created-at": "2018-02-27T10:55:17.477Z",
"updated-at": "2018-02-27T10:55:17.477Z"
},

下面是我的route.js上的模型钩子

model() {
  return this.store.findRecord('audit-trail', 41, {include: 'audit-trailable'});
}

当我执行{{model.eventName}}时，它会显示update形式的事件名称信息。然而，当我执行{{model.newData}}时，它返回了一个[object Object]。我的问题是，如何显示new-data属性字段值name和updated_at

​

​

Answer 1

你好啊。如果你负担得起的话，最好的办法就是使用https://github.com/lytics/ember-data-model-fragments

因此: models/audit-trial.js

import DS from 'ember-data';
import MF from 'ember-data-model-fragments';

export default DS.Model.extend({
    whatever_simple_attr: DS.attr(),
    new_data: Mf.fragment('new-data'),
});

使用:model/new-data.js

import MF from 'ember-data-model-fragments';
import DS from 'ember-data';

export default MF.Fragment.extend({
    name: attr(),
    updated_at: attr('date')
});

编辑:再次添加序列化程序:没有真正测试过，但想法在这里->

序列化程序/新的数据.js(使用underscore.js库)

重要提示:我在我的模型中使用了snake_case属性，如果你使用lowerCamelCase，你的代码可能会有所不同。

import JSONSerializer from 'ember-data/serializers/json';
/* global _ */

export default JSONSerializer.extend({
  normalize(typeClass, hash) {
    _.forEach(hash, (value, key) => {
      hash[key.underscore()] = value;
      // prevent kinda twins (my_key and my-key)
      if (key.underscore() !== key) {
        delete hash[key];
      }
    });
    return this._super.apply(this, arguments);
  }
});

序列化程序/audit-trial.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({

  normalize(_, data) {
    data.attributes["new-data"] = JSON.parse(data.attributes["new-data"])
    // maybe this too, with associated model and serializer
    data.attributes["original-data"] = JSON.parse(data.attributes["original-data"])
    return this._super(...arguments);
  },

});

Answer 2

Ember-data-model-fragments没问题。或者，您可以使用如下模型：

DS.Model.extend({
  originalData: DS.attr("string"),
  newData: DS.attr("string"),
  ...

然后在你的组件(或控制器)中使用：

originalData = JSON.stringify(model.get("originalData"))

在您的模板中：

{{originalData}}

Answer 3

如果你在你的模板中做了一个{{model.newData.name}}，事情能正常工作吗？Ember Data对任何对象的默认方法是在您从后端发送它时使其可用。这意味着它将有下划线的键(即model.newData.updated_at)，但应该可以工作。