How to define the attributes on my model and how to make a query on my route.js

1

On my route.js I have a line of code that is return this.store.findAll(auditTrail) so on my template.hbs

{{#each model as |auditTrail|}}
  <tr class="animated fadeIn">
    <td>{{auditTrail.eventName}}</td>
   </tr>
 {{/each}}

However, it returns nothing. This is my api endpoint /audit-trails/41?include=audit-trailable. My question, is there something wrong on my route.js or the way I define my model? Btw, this is my model. Please see model below

  eventName:               DS.attr('string'),
  ipAddress:               DS.attr('string'),
  userAgent:               DS.attr('string'),
  createdAt:               DS.attr('date'),
  deliveredAt:             DS.attr('date')

Ideally it should return something right. Below is the response I get when I was using Postman (edited)

"data": {
"id": 2,
"type": "audit-trails",
"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.000.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"
},
}```
2

I think the problem could be that you use findAll to get a single record. The data object expected from findAll should be an array, but in the response code you are showing i see a single record. Try using something like this.get('store').findRecord('auditTrail', 41, {include: 'audit-trailable'} )

Edit

The template you mentioned is a route template or a component template? If it is a route template probably you only need to change it like {{model.eventName}}

3

Hi @beddu thank you for your help and it did work when I did this code -

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

and on my template i did the {{model.eventName}} and return a information and that is expected. However, when I did the {{model.originalData}} it return a [object Object]. Btw, this is the response from the API for the originalData attribute - "original-data": "{\"name\":\"Foobarz\",\"updated_at\":\"2018-02-27 08:06:14 UTC\"}"

My question now is how would I dispaly the Foobarz and 2018-02-27 08:06:14 UTC Hope you can help me again this time.

4

Hi @mikeelemuel The reason to what you are experiencing now is simple to understand, but might be not always simple to solve. The point is that nested objects are not automatically recognized by Ember. Normally we should use a model to interpret Ember Data objects, but for nested objects I think it is not (yet?) possible, so Ember just move the “raw” object into the model’s attribute, and leave to us the bargain to deal with it.

Said so, if you are sure that your attribute is always following a specific structure (aka model) you can access it just like this, for example:

{{model.originalData.updated_at}}

I agree that is not what we hoped, but is all that i know for now. If you find a better solution, please, share it.

More info

The same attribute is accessible also by javascript like

var auditTrail = this.store.findRecord('audit-trail', 41, {include: 'audit-trailable'});
console.log(auditTrail.originalData.updated_at); //JSHint will not like "console" here, it is only for reference

so you can maybe think about implementing an helper to print out this kind of attributes in your templates