JSON to data model

controllers.application.js

import Controller from 'ember-controller';
import service    from 'ember-service/inject';
import computed   from 'ember-computed';
import get        from 'ember-metal/get';

import RESULT from '../fixture/ajax-result';

export default Controller.extend({
  appName: 'JSON to model',
  store: service(),
  
  list: computed(function() {
    let store = get(this, 'store');
    return RESULT.data.assets.map((asset) => {
      asset.old.data.type = 'asset';
      let oldAsset = store.push(asset.old);
      let newAsset = store.createRecord('asset', asset.new);
      
      return {
        old: oldAsset,
        new: newAsset
      };
    });
  })
});

fixture.ajax-result.js

export default {
  data: {
    assets: [
      {
        new: { asset_nr: 9991, weight: 14840, capacity_remark: 'foo' },
        old: {
          data: {
            id: 1,
            type: 'assets',
            attributes: { 
              'asset-nr':        9991, 
              'weight':          14000,
              'capacity-remark': 'foo 9991'
            }
          }
        }
      },
      {
        new: { asset_nr: 9992, weight: undefined, capacity_remark: 'bar' },
        old: {
          data: {
            id: 2,
            type: 'assets',
            attributes: { 
              'asset-nr':        9992, 
              'weight':          12000,
              'capacity-remark': 'bar 9992'
            }
          }
        }
      }
    ]
  }
};

models.asset.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  assetNr:        attr('string'),
  weight:         attr('number'),
  capacity:       attr('number'),
  capacityRemark: attr('string')
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

th {
  text-align: left;
}

tr:nth-child(even) {
  border-bottom: 1px solid lightgrey;
}

tr:nth-child(odd) {
  border-bottom: 1px solid black;
}

templates.application.hbs

<h1>{{appName}}</h1>

<table width="100%">
	<tr>
  	<th></th>
  	<th>id</th>
    <th>asset nr</th>
    <th>weight</th>
    <th>capacity remark</th>
  </tr>
  {{#each list as |asset|}}
    <tr>
    	<td>Old:</td>
    	<td>{{asset.old.id}}</td>
      <td>
      	{{asset.old.assetNr}}
      </td>
      <td>
      	{{asset.old.weight}}
      </td>
      <td>
      	{{asset.old.capacityRemark}}
      </td>
    </tr>
    <tr>
    	<td>New:</td>
    	<td>-</td>
      <td>
      	{{asset.new.assetNr}}
      </td>
      <td>
      	{{asset.new.weight}}
      </td>
      <td>
      	{{asset.new.capacityRemark}}
      </td>
    </tr>
  {{/each}}
</table>
<br>
<br>

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}