Nested foreach in knockout.js

Question

I can't seem to get a nested foreach to work.

JS code is:

$(document).ready(function() {

    function chartValueViewModel(date, price) {
        this.date = date;
        this.price = price;
    }

    function chartViewModel(id, name, lineType, values) {
        this.id = id;
        this.name = name;
        this.lineType = lineType;
        this.values = ko.observableArray(values);
    }

    function liveCurveViewModel() {

        this.chartsData = ko.observableArray([]);
        var chartsData = this.chartsData;

        this.init = function() {

            var mappedCharts = $.map(chartValues,
            function(chart) {
                var mappedValues = $.map(chart.chartValues, function(value) {
                    return new chartValueViewModel(value.dateTime, value.price);
                })
                return new chartViewModel(chart.id, chart.name, chart.liveCurveTypeId, mappedValues);
            });

            chartsData(mappedCharts);
        };
    }

    var vm = new liveCurveViewModel();
    vm.init();
    ko.applyBindings(vm);

});

Html is:

<ul data-bind="foreach: chartsData ">
    <li data-bind="text: name">
        <ul data-bind="foreach: values">
           <li data-bind="text: price">
           </li>
        </ul>
    </li>
</ul>

The outside loop renders correctly, but I get nothing from the inside loop, not even an error message. I've checked and the values field on the chartViewModel is populated.

RP Niemeyer · Accepted Answer · 2015-06-23 18:16:25Z

35

The text binding that you have on your outside li is overwriting the content inside of it, so it is blowing away your inner foreach. The text binding sets the innerText/textContent of the element, which overwrites the current children.

You would want to do something like:

<ul data-bind="foreach: chartsData ">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="foreach: values">
           <li data-bind="text: price">
           </li>
        </ul>
    </li>
</ul>

edited Jun 23, 2015 at 18:16

answered Jun 6, 2012 at 21:32

RP Niemeyer

115k18 gold badges295 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Over a year ago

@RP Niemeyer u should explain why outer li text binding overwrite the inner one. if possible explain this behavior in details. thanks

RP Niemeyer Over a year ago

@Thomas - added an additional sentence to clarify that the text binding sets innertText/textContent. Hope that helps!

Collectives™ on Stack Overflow

Nested foreach in knockout.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related