CODEWITHSUNDEEP
javascriptrestframeworksember.jsember-data
Devin Crossman
Devin Crossman

Reputation: 7592

load data into ember models

I am trying to build a simple application with Ember js on the frontend and I have a RESTful server running on the server that returns JSON representations of database tables.

The database has three tables: users, accounts, transactions. The application works kind of like a bank account. A user hasMany accounts, an account belongsTo a user and hasMany transactions, a transaction belongsTo an account.

My models are described like this

// Models
App.Store = DS.Store.extend({
  revision: 11,
  adapter: DS.RESTAdapter.create({
    url: 'http://api.mydomain.ca'
  })
});

App.User = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    accounts: DS.hasMany('App.Account')
});

App.Account = DS.Model.extend({
    ownedBy: DS.belongsTo('App.User'),
    transactions: DS.hasMany('App.Transaction')
});

App.Transaction = DS.Model.extend({
    account: DS.belongsTo('App.Account'),
    amount: DS.attr('number'),
    description: DS.attr('string'),
    timestamp: DS.attr('date')
});

My Controllers:

//Controllers
App.UserController = Ember.ObjectController.extend();

App.AccountsController = Ember.ArrayController.extend();

App.TransactionsController = Ember.ArrayController.extend();

and my Routes:

// Router
App.Router.map(function() {
    this.resource('users', function() {
        this.resource('user', {path:':user_id'});
    }); // '/#/users/:user_id'
});

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('users');
    }
});

App.UsersRoute = Ember.Route.extend({
    model: function() {
        return App.User.find();
    }
});

App.UserRoute = Ember.Route.extend({
    model: function(params) {
        return App.User.find(params.user_id);
    },
    setupController: function(controller, model) {
        this.controllerFor('accounts').set('model', App.Account.find({ownedBy:model.id}));
    }
});

I'm using a master - detail layout. When you visit my application at '/users/3' it shows a list of users on the left and the details for user 3 on the right. In the details I want to be able to show the account number, account balance and a list of the transactions.

So here's something I'm not sure about. My database users table has id, first_name, and last_name. It made sense for me to put the relationship between accounts and users in the accounts table rather than have to maintain a list of accounts in the users table. My accounts table has an id field and a owned_by field that has the id of the user that owns the account. The same is true for my transactions table. Rather than the having to maintain a list of transactions in the account I have an account field in the transactions table that holds the id of the account for that transaction. This is how it made sense to me but I'm not sure if this is appropriate for the way Ember expects data.

I was able to connect the accounts to the user in the setupController method of my user route using this:

this.controllerFor('accounts').set('model', App.Account.find({ownedBy:model.id}));

but I don't know how to link the transactions to the account.

Can anybody help me out with this? Thanks :)

Upvotes: 0

Views: 974

Answers (1)

ken
ken

Reputation: 3745

If you follow the convention and structure your Json response accordingly you don't have to do any wiring and your object will be deserialized properly

Here's an example, sideloading your accounts and transactions

{
  "user": {
    "id": 1,
    "first_name": "john doe",
    "accounts": [1, 2]
  },

  "accounts": [{
    "id": 1,
    "transactions": [1, 2, 3]
  },
  {
    "id": 2,
  }],

  "transactions": [{
    "id": 1,
  },
  {
    "id": 2,
  },
  {
    "id": 3,
  }]
}

Upvotes: 1

Related Questions