Search code examples
jsonember.jshtml-tablecoffeescriptagents-jade

How to reformat tr elements with Ember 0.9.8.1?


I'm using Ember to retrieve JSON data from an API to insert into a table. However, my records are shown in a one single tr element, instead of each record shown in separate tr elements. Does anyone know how to set this? I've been looking all over the Ember docs. I'm using Ember 0.9.8.1.

HTML (in JADE):

script(type="text/x-handlebars")
  {{#view Cashier.transactionRowView}}
  table
    thead
      tr
        th Date/Time
        th User ID
        th Amount
        th Date/Time
        th User ID
        th Amount
    {{#each Cashier.transactionsController}}
    <td>{{datetime}}</td>
    <td>{{userId}}</td>
    <td>{{amount}}</td>
    <td>{{console.datetime}}</td>
    <td>{{console.userId}}</td>
    <td>{{console.amount}}</td>
    {{/each}}
  {{/view}}

APP COFFEESCRIPT:

Cashier = Ember.Application.create(
  ready: ->
    console.log "Cashier app loaded"
)

MODEL COFFEESCRIPT:

Cashier.Transaction = Ember.Object.extend(
  id: null
  datetime: null
  type: null
  userId: null
  amount: null
)

VIEW COFFEESCRIPT:

Cashier.transactionRowView = Em.View.extend({
  tagName: 'tr'
  templateName: 'cashier-transactions'
});

CONTROLLER COFFEESCRIPT:

Cashier.transactionsController = Ember.ArrayController.create(
  content: []
  resourceUrl: 'http://localhost:8080/prepaid/cashiertransactions'
  loadTransactions: ->
    self = this
    url = this.resourceUrl

    $.getJSON url,
      cashierId: "[email protected]"
      period: "3"
    , (data) ->
      transactions = data.transactions

      $(transactions).each (index, value) ->
        t = Cashier.Transaction.create(
          id        : value.id
          datetime  : value.datetime
          type      : value.type
          userId    : value.userId
          amount    : value.amount
        )
        self.pushObject Cashier.Transaction.create(t)
)

SAMPLE JSON FROM SERVER:

{
    "status": "OK",
    "transactions": [
        {
            "amount": 22,
            "datetime": 1348137916873,
            "id": "CSH37916873",
            "type": "TOP-UP: [email protected]; PAYMENT METHOD: undefined",
            "userId": "[email protected]"
        },
        {
            "amount": 222,
            "datetime": 1348142501961,
            "id": "CSH42501961",
            "type": "TOP-UP: [email protected]; PAYMENT METHOD: undefined",
            "userId": "[email protected]"
        },
        {
            "amount": 48,
            "datetime": 1348550184793,
            "id": "CSH50184793",
            "type": "TOP-UP: [email protected]; PAYMENT METHOD: undefined",
            "userId": "[email protected]"
        },
        {
            "amount": 20,
            "datetime": 1348550386661,
            "id": "CSH50386661",
            "type": "TOP-UP: [email protected]; PAYMENT METHOD: undefined",
            "userId": "[email protected]"
        },
        {
            "amount": 1800000003000,
            "datetime": 1348657215712,
            "id": "CSH57215712",
            "type": "DEDUCT: [email protected] - 3GB Data Plan",
            "userId": "[email protected]"
        }
    ]
}

Solution

  • {{#view Cashier.transactionRowView}}
    <table>
      <thead>
        <tr>
          th Date/Time
          th User ID
          th Amount
          th Date/Time
          th User ID
          th Amount
        </tr>
      </thead>
      </tbody>
      {{#each Cashier.transactionsController}}
      <tr>    
        <td>{{datetime}}</td>
        <td>{{userId}}</td>
        <td>{{amount}}</td>
        <td>{{console.datetime}}</td>
        <td>{{console.userId}}</td>
        <td>{{console.amount}}</td>
      </tr>
      {{/each}}
    {{/view}}