Knockout nested observableArrays appear to be undefined instead of empty. [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

If I apply aggregate functions to nested observableArrays which are initialized with an empty array ([]), I get errors that the inner array is undefined. This only happens for the observableArray objects that are constructed with an empty array as a parameter.

This may be a bug, but perhaps/hopefully I am just missing something.

The below example works with the empty array line commented out:

also on: http://jsfiddle.net/adamtolley/4pZhR/32/

The HTML:

    <ul data-bind="template: { name: 'outerTmpl', foreach: outerArray}"></ul>
Number of inner items: <span data-bind="text: innerCount"></span>
<hr />

<div data-bind="text: ko.toJSON(viewModel)"></div>

<script id="outerTmpl" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        开发者_StackOverflow<ul data-bind="template: { name: 'innerTmpl', foreach: innerArray}"></ul>
    </li>
</script>

<script id="innerTmpl" type="text/html">
    <li>
        <span data-bind="text: name" />
    </li>
</script>

The JS:

function outer(name, innerArray) {
    return {
        name: ko.observable(name),
        innerArray: ko.observableArray(innerArray)
    };
}

function inner(name) {
    return {
        name: ko.observable(name)
    };
}

var viewModel = {
    outerArray: ko.observableArray([
        new outer("outer1", [new inner("inner1"), new inner("inner2")]),
        new outer("outer2", [new inner("inner1"), new inner("inner2")]) //,
        // new outer("outer3", []) //does not work with this line uncommented. 
    ])
};

//use of innerArray().length vs innerArray.length seems to make no difference in error   
viewModel.innerCount = ko.dependentObservable(function() {
    return this.outerArray().reduce(function(i, j) {
        return i.innerArray.length + j.innerArray.length;
    });
}, viewModel);


ko.applyBindings(viewModel);

---

I think that you would want something more like:

viewModel.innerCount = ko.dependentObservable(function() {
    return this.outerArray().reduce(function(i, j) {
        var count = i.innerArray ? i.innerArray().length : i;
        return count + j.innerArray().length;
    });
}, viewModel);

The issue is that reduce will pass the previous result in as i on the next iteration. So, you only have two arrays on the first iteration.