mardi 24 janvier 2017

How to properly parse XML API content into EmberJS?

I am attempting to build a front end web system that will run off of a third party sites database and administration console. The API seems to be entirely reliant upon GET calls, either requesting or altering information by targeting specific URLs.

The API returns XML, example:

<responseITEMs xmlns:xsd="http://ift.tt/tphNwY" xmlns:xsi="http://ift.tt/ra1lAU">
  <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>

I have not used EmberJs before, but it was suggested to me. I'm not sure it's possible to use with XML, so I currently have a PHP script running on a different local server that's calling a fixed API URL endpoint and converting the response to JSON:

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

The JSON I end up with looks like this:

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

I am trying to write an Ember normalizer that will mean that I can run a simple loop through the items (real term is not ITEM) on an Ember template. Currently it is:

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

At this point Ember inspector shows that I am getting the ID and name under the Data tab, but I can't get them onto my template, or obviously retrieve more than the first item due to the hardcoded ITEM[0].

Route:

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

Model:

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

Template:

<strong></strong>

<ul>
  
    <li></li>
  
</ul>

Obviously I am not that far along and do not know Ember well at all. I am open to and would appreciate better solutions to tackling this as well as technical input towards my current code.




Aucun commentaire:

Enregistrer un commentaire