I am trying to render access the contents of an array stored in the controller from within the template. The array starts empty but objects are added to it using a method in the controller:
import Controller from '@ember/controller';
import {action} from '@ember/object';
import {tracked} from '@glimmer/tracking';
export default class ControllerName extends Controller {
@tracked
displayedArray = new Array();
@action
async setUpArray(){
let object1 = {Key1:[1,2], Key2: [3,4]};
let object2 = {Key1:[5,6], Key2: [7,8]};
this.displayedArray.push(object1);
this.displayedArray.push(object2);
}
}
I am able to call setUpArray() from the template and have confirmed it is running as expected and producing setting the tracked variable to an array of the two objects.
However I do not seem to be able to display anything relating to displayedArray in the template. I have tried the following:
//Returns blank - I expected [object,object]
{{this.displayedArray}}
//Returns blank
{{this.displayedArray 0}}
//Returns 0 before and after the *setUpArray()* function is called
{{this.displayArray.length}}
As far as I can tell the issue only happens with arrays or at least arrays containing objects. I am able to display strings or other tracked variables set up in the controller just fine.
Does anyone know why Ember is failing to display this?
Objects are not @tracked
deeply in Octane. Either one of the following should work:
this.displayedArray = [...this.displayedArray, object1, object2];
import { tracked } from 'ember-deep-tracked';
export default class ControllerName extends Controller {
@tracked displayedArray = new Array();
}