Working with Knockout 'foreach' looping through multidimensional array

Question

I have a multidimensional associative array.

this.items = ko.observableArray([
    { name: "name1", viewable: true, children: [
        { name: "name1-1", viewable: true, children: []},
        { name: "name1-2", viewable: false, children: []}
    ] },
    { name: "name2", viewable: false, children: [] },
    { name: "name3", viewable: true, children: [
        { name: "name3-1", viewable: true, children: []},
    ] },
        { name: "name4", viewable: true, children: [] }
]);

The goal is to loop through this array and print out only the values that have 'viewable' set to true.

I have this working using a bunch of if and foreach statements, but the code is starting to get out of hand. This example only covers 2 levels buy my array can get up to 5 levels deep, so this code is going to multiply and get ugly really quick.

<ul data-bind="foreach: items">
    <!-- ko if: viewable -->
    <li data-bind="text: name"></li>
        <!-- ko foreach: children -->
            <!-- ko if: viewable -->
            <li data-bind="text: name"></li>
            <!-- /ko -->
        <!-- /ko -->
    <!-- /ko -->
</ul>

So is there an easier/better way to loop through the entire array?

JS Fiddle link

Do you have a proper resursive sturture? E.g. the items looks like the same on each level? In your sample some children are missing like: { name: "name1-1", viewable: true}, is this a requirement? — nemesv
– nemesv, Commented Apr 4, 2013 at 15:19
Oh, that's a typo. I can control that, so I figure that it's best to include 'children', even if it's empty. I edited my code and added children to all items. So, yes, all items will look the same on all levels. — dmathisen
– dmathisen, Commented Apr 4, 2013 at 15:23

nemesv · Accepted Answer · 2013-04-04 15:26:02Z

3

Underscore.js has some nice method working with arrays maybe you can use flatten and filter to create one array from your structure then you can just write one foreach:

Or you could use templates to encapsulate your if: viewable logic and apply the template recursively:

<script type="text/html" id="template">
  <!-- ko if: viewable -->
    <li data-bind="text: name"></li>    
        <!-- ko template: { name: 'template', foreach: $data.children } -->
        <!-- /ko -->    
  <!-- /ko -->
</script>

<ul data-bind="template: { name: 'template', foreach: items } ">
</ul>

Demo JSFiddle.

answered Apr 4, 2013 at 15:26

nemesv

140k16 gold badges424 silver badges364 bronze badges

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

1 Comment

dmathisen Over a year ago

Sorry Chris, nemesv was a little quicker - I gotta give accepted answer to him. Thanks a lot for the help guys! This makes life much easier.

Chris Pratt · Accepted Answer · 2013-04-04 15:26:38Z

1

What you need is a template:

<script type="text/html" id="ItemTemplate">
    <!-- ko if: viewable -->
        <li data-bind="text: name"></li>
        <!-- ko template: { name: 'ItemTemplate', foreach: children } --><!-- /ko -->
    <!-- /ko -->
</script>

And then just:

<ul data-bind="template: { name: 'ItemTemplate', foreach: items }"></ul>

answered Apr 4, 2013 at 15:26

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

Comments

Damien · Accepted Answer · 2013-04-04 15:30:00Z

1

If you add empty children arrays on items you can use template

JSFiddle sample

<ul data-bind="foreach: items">
    <idv data-bind="template: {name: 'mytemp'}" />
</ul>
<div data-bind="stopBinding:true">
    <div id="mytemp">
        <div data-bind="visible :viewable">
            <li data-bind="text: name"></li>
            <div data-bind="foreach: children">
                <div data-bind="template: {name: 'mytemp'}" /></div>
        </div>
    </div>
</div>

answered Apr 4, 2013 at 15:30

Damien

8,9873 gold badges34 silver badges43 bronze badges

Collectives™ on Stack Overflow

Working with Knockout 'foreach' looping through multidimensional array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related