nested arrays

controllers.application.js

import Ember from 'ember';

const Summable = Ember.Object.extend({
  innerSum: Ember.computed('inner.[]', function() {
    return this.get('inner').reduce((a, b) => a + b, 0);
  })
});

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.ceil(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

export default Ember.Controller.extend({
  appName: 'Nested arrays',
  init() {
    this._super(...arguments);
    
    let outer = Ember.A();
    for (let i=0; i < 3; i++) {
    	outer.pushObject(Summable.create({
      	inner: Ember.A([1,2,3].map(x => Math.pow(x,i)))
      }))
    }
    this.set('outer', outer);
  },
  // First way of solving problem: use intermediate computed property
  sum: Ember.computed('outer.@each.innerSum', function() {
    return this.get('outer').reduce((sum, x) => sum + x.get('innerSum'), 0);
  }),
  // Alternative way of soling the problem: use mapBy macro
  allInner: Ember.computed.mapBy('outer', 'inner'),
  mapBySum: Ember.computed('allInner.@each.[]', function() {
    return this.get('allInner').reduce((sum,array) => sum + array.reduce((a,b) => a + b, 0), 0);
  }),
  actions: {
  	addOuter() {
      let i = this.get('outer.length');
      this.get('outer').pushObject(Summable.create({
      	inner: Ember.A([1,2,3].map(x => Math.pow(x,i)))
      }))
    },
  	addInner() {
      const length = this.get('outer.length');
      if (length < 1)
        return;
      const outerIndex = getRandomInt(0, length-1);
      const item = this.get('outer').objectAt(outerIndex)
      item.get('inner').pushObject(getRandomInt(1,10));
      // Trying to see if I can make it recalculate the inner sum (isn't working)
      //console.log(item.get('innerSum'), item.get('inner').reduce((a, b) => a + b, 0));
    },
  	deleteInner() {
      const outerIndex = getRandomInt(0, this.get('outer.length')-1);
      const inner = this.get('outer').objectAt(outerIndex).get('inner');
      const length = inner.get('length');
      if (length > 0)
      	inner.removeAt(length - 1);
    },
  	deleteOuter() {
      const length = this.get('outer.length');
      if (length > 0)
        this.get('outer').removeAt(length - 1);
    }
  }
});

templates.application.hbs

<h1>{{appName}}</h1>
<br>
Outer sum = {{sum}} (intermediate computed properties) = {{mapBySum}} (mapBy)<br>
<ul>
{{#each outer as |out i|}}
	<li>{{i}} - innerSum = {{out.innerSum}}<ul>
  {{#each out.inner as |in j|}}
  	<li>{{in}}</li>
  {{/each}}
  </ul></li>
{{/each}}
</ul>
<a {{action 'addInner'}} href='#'>Add inner</a>
<a {{action 'addOuter'}} href='#'>Add outer</a>
<a {{action 'deleteInner'}} href='#'>Delete inner</a>
<a {{action 'deleteOuter'}} href='#'>Delete outer</a>
<br>

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}