如何正确解析XML API内容到EmberJS?

时间:2017-01-24 17:22:06

标签: javascript ember.js ember-data javascript-framework

我正在尝试构建一个将运行第三方站点数据库和管理控制台的前端Web系统。 API似乎完全依赖于GET调用,要么通过定位特定URL来请求或更改信息。

API返回XML,例如:

<responseITEMs xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <ITEMs>
    <ITEM libraryid="e3712df592253fcb4" featured="false" releasedate="2017-24-01 00:00:00" code="ABC001" detail="Some text" name="Dummy One" displaytitle="Dummy One" keywords="" id="1fef760bc1d61c8c" status="active" lastupdated="2016-24-01 04:53:28"/>
    <ITEM libraryid="e3712df592253fcb4" featured="false" releasedate="2017-24-01 00:00:00" code="ABC003" detail="Some text" name="Dummy Three" displaytitle="Dummy Three" keywords="" id="3e35wba1d9b32a45" status="active" lastupdated="2016-24-01 04:53:15"/>
    <ITEM libraryid="e3712df592253fcb4" featured="false" releasedate="2017-24-01 00:00:00" code="ABC002" detail="Some text" name="Dummy Two" displaytitle="Dummy Two" keywords="" id="cca6f0cab9defe80" status="active" lastupdated="2017-24-01 01:57:37"/>
  </ITEMs>
</responseITEMs>

我之前没有使用过EmberJs,但有人向我建议过。我不确定它是否可以与XML一起使用,因此我目前在不同的本地服务器上运行PHP脚本,该服务器调用固定的API URL端点并将响应转换为JSON: / p>

$Json = json_encode(simplexml_load_string($data));
echo $Json;

我最终得到的JSON看起来像这样:

ITEMs: {
  ITEM: [
    {
      @attributes: {
        libraryid: "e3712df592253fcb4",
        featured: "false",
        releasedate: "2017-24-01 00:00:00",
        code: "ABC001",
        detail: "Some text",
        name: "Dummy One",
        displaytitle: "Dummy One",
        keywords: "",
        id: "1fef760bc1d61c8c",
        status: "active",
        trackcount: "0",
        lastupdated: "2016-24-01 04:53:28"
      }
    },
  {
    @attributes: {..... etc

我正在尝试编写一个Ember规范化程序,这意味着我可以在Ember模板上运行项目(实际术语不是ITEM)的简单循环。目前它是:

import DS from 'ember-data';
export default DS.RESTSerializer.extend({
  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    payload = {
      ITEM: {
        id: payload.ITEMs.ITEM[0]["@attributes"].id,
        type: requestType.modelName,
        name: payload.ITEMs.ITEM[0]["@attributes"].name
      }
    };
    return this._super(store, primaryModelClass, payload, id, requestType);
  }
});

此时Ember检查员显示我在“数据”选项卡下获取了ID和名称,但是我无法将它们放到我的模板上,或者由于硬编码的ITEM,显然检索的内容超过了第一项[0 ]

路线:

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

型号:

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

模板:

<strong>{{ model.name }}</strong>

<ul>
  {{#each model.ITEM as |one|}}
    <li>{{one.name}}</li>
  {{/each}}
</ul>

显然我不是那么远,根本不了解Ember。我很乐意接受并希望得到更好的解决方案来解决这个问题以及对我当前代码的技术投入。

1 个答案:

答案 0 :(得分:1)

如果你使用的是php-script,你可以将XML转换为正确的PHP响应,为什么要使用序列化器?

其他解决方案是创建新的适配器和序列化程序,以便在没有php-convertion的情况下处理XML响应。

您可能会发现此链接很有用:https://bendyworks.com/blog/old-new-soap-ember-js