Fully populated ko.observableArray will not show in Template using foreach - data-binding

Question

I am trying to separate a list of JSON data into segments ("sliders") and have succeeded in creating a data object in the format I want, however the foreach binding is not working as expected.
HTML Template:
<div class="slide" data-bind="foreach: actionSliders">
Stuff
</div>
Here is my relevant Knockout code:
function Slider() {
this.actions = ko.observableArray([]);
}
var viewModel = {
actionSliders: ko.observableArray([])
};
viewModel.loadData = function() {
//LOAD Actions from API
jQuery.ajax({
type: 'GET',
url: 'http://'+window.location.hostname+'/api/actions/get_author_posts/',
dataType: 'json',
success: function (ActionData) {
console.log('getJSON data - Actions',ActionData.posts);
var actionSlidersCount = 0;
viewModel.actionSliders([]);
//create the first slider array
viewModel.actionSliders().push(new Slider());
viewModel.actionSliders()[0].actions([]);
jQuery.each(ActionData.posts, function(index) {
// add each action to the current slider
viewModel.actionSliders()[actionSlidersCount].actions().push(new Action(this));
//add a new slider every 5 records
var calc = (parseInt(index)+1)%5;
if(calc ==0 ){
//new slider
actionSlidersCount++;
viewModel.actionSliders().push(new Slider());
viewModel.actionSliders()[actionSlidersCount].actions([]);
}
});
console.log('ActionSliders',viewModel.actionSliders());
},
data: { },
async: true
});
};
This is what my data looks like in the console:
ActionSliders
[Slider, Slider, Slider, Slider, Slider, Slider, Slider, sortNum: function, random: function, sum: function, max: function, min: function…]
0: Slider
actions: Object[0]
__proto__: Slider
1: Slider
2: Slider
3: Slider
4: Slider
5: Slider
6: Slider
length: 7
__proto__: Array[0]
* I can access all the data with console commands:
> viewModel.actionSliders()[0].actions()[0]
Action {id: 197, title: "Turned off the tap while brushing my teeth"…}
> viewModel.actionSliders()
[ Slider, Slider, Slider, Slider, Slider, Slider, Slider]
So, as you can see, in the working model (no errors in console, no data-bind errors), the object is fully populated with data, and in the template, "stuff" should repeat 6 times - once for each Slider, but the loop isn't even working. Is there a problem with having observable arrays inside of others? Am I missing something in the way I am creating the Slider objects? Any advice is most welcome, please.

Answer 1

Since you pushed new Slider object into your actionSliders observableArray I guessing the structure might be like this:
actionSliders = [
{
actions = {}
},
{
actions = {}
}
];
I'm sorry if this doesn't work for your, but how if you try to bind it like this ? :
<div class="slide" data-bind="foreach: actionSliders().actions">
Stuff
</div>

Answer 2

I found the answer, it was a two part issue.
The reason why foreach wasn't working was because I was pushing to the function, instead of the array. I needed to use:
viewModel.actionSliders.push(new Slider());
instead of:
viewModel.actionSliders().push(new Slider());
Once I did that, the foreach worked for the main object
Then, I realized I needed to inject the data inside the class, instead of from outside. To remedy that, I modified the code like this:
var tempActionArray = [];
jQuery.each(ActionData.posts, function(index) {
//add an action to the current slider
var tempAction = new Action(this);
tempActionArray.push(tempAction);
var calc = (parseInt(index)+1)%5;
if(calc ==0 ){
//add a new slider
actionSlidersCount++;
viewModel.actionSliders.push(new Slider(tempActionArray));
//reset temp array
tempActionArray = [];
//viewModel.actionSliders[actionSlidersCount].actions([]);
}
});
function Slider(data) {
var data = data || [];
this.actions = ko.observableArray([]);
var Actions = [];
//console.log("slider data",data)
jQuery.each(data, function(index) {
//console.log("action index",data[index])
Actions.push(data[index]);
});
this.actions = Actions;
}
and now all is good in the world! :) Moving on...