EmberJS: Understanding ObjectController vs ArrayController with example

One of the major confusions people usually have, is “what is the basic difference between ObjectController and ArrayController in EmberJS” and how to use them properly. Well I hope this article will clear all your confusions if you have basic understanding of ember controllers.

ObjectController & ArrayController:

In a single route (if you don’t know about routes, for the time being consider it as an app) sometimes you need to represent a single model, and sometimes a list of models. The basic concept is, if you are using a single model, or a single object as your model, you have to use ObjectController. In this case you can’t use the handlebar helpers like {{#each controller}}, cause you will be having only a single controller.

But if you want to represent a list of models, you have to use ArrayController. Cause, for each model inside the list of models, it will automatically create an ObjectController. You will better understand this, if you go through the following scenario.

The Scenario:

Suppose you have a list of people (both male and female). In your model you have their name, gender and the name of their partners (husband or wife). Now according to the gender you want to print their name and wife/husband’s name. So, how to do that?

Though you can check each model’s property and print accordingly, but ember controllers give you a great way to handle this. With this example you will also understand the difference of ArrayController and ObjectController. So, let’s see how to do that.

Model in application route:

App.ApplicationRoute = Em.Route.extend({
  model: function(){
    return [
        {name: "Brad Pitt", partner: "Angelina Jolie", gender:"male"},
        {name: "Arnold", partner: "Maria ", gender:"male"},
        {name: "Superman", partner: "Lois Lane ", gender:"male"},
        {name: "Jessica Alba", partner: "Cash Warren", gender:"female"},
        {name: "Emma Stone", partner: "Andrew Garfield ", gender:"female"},
        {name: "John Cena", partner: "Elizabeth ", gender:"male"}

Application level ArrayController:

App.ApplicationController = Em.ArrayController.extend({
   lookupItemController: function(object){
    if(object.gender ==='male'){
      return 'male';
    } else {
      return 'female';

As the application level model was having multiple objects in it, so we used ArrayController to handle the whole model here. Now, for each single object inside the whole model, we can assign a controller, which will be ObjectController. Using the ‘lookupItemController’ we can assign different ObjectControllers according to any property (or any logic given by you). Or we can directly assign a particular type of ObjectController also using ‘itemController’.

Using ObjectController:

App.MaleController = Em.ObjectController.extend({
  description: function(){
      return "His name is: "+ this.get('name') + ". His wife is: "+ this.get('partner');

App.FemaleController = Em.ObjectController.extend({
  description: function(){
      return "Her name is: "+ this.get('name') + ". Her husband is: "+ this.get('partner');

Here we’re initializing the ‘description’ property of the controller according to the properties of it’s model.

The template:

    {{#each controller}}
        {{description}} <br /><br />

In template it’s printing the ‘description’ property of each controller.

Do it yourself:

Here is the jsbin link of this example. Check the output to understand how the controllers work. Modify the scripts to understand properly, and if you still have confusion, you can comment below.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Sairam Lanka

    Very well written, simple and clean article.Please post much.

  • thanks a lot….

  • I am new to ember js…. can you help me by explaining what is difference between ember.controller and ember.objectcontroller.