nested foreach loop when the inner loop array has more than one field

Question

what changes are to be made to view and the viewmodel in the following example if the children array has two more fields "child age" and "weight".

view:

 <h2>People</h2>
<ul data-bind="foreach: people">
<li>
    <div>
        <span data-bind="text: name"> </span> has <span data-bind='text: children().length'>&nbsp;</span> children:    
    </div>
    <ul data-bind="foreach: children">
        <li>
            <span data-bind="text: $data"> </span>                
        </li>
    </ul>
</li>

viewmodel:

var Person = function(name, children) {
this.name = name;
this.children = ko.observableArray(children);

this.addChild = function() {
    this.children.push("New child");
}.bind(this);
 }

var viewModel = {
people: [
    new Person("Annabelle", ["Arnie", "Anders", "Apple"]),
    new Person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
    new Person("Charles", ["Cayenne", "Cleopatra"])
    ],
};

ko.applyBindings(viewModel);

Origineil · Accepted Answer · 2014-05-09 16:12:04Z

1

Obviously, the children would need to be objects. You could potentially reuse Person if you intend for it to also contain those properties.

[{name:"Arnie", age: 1, weight: 2}]

Then you bind to the properties:

<span data-bind="text: name"> </span> 
<span data-bind="text: age"> </span> 
<span data-bind="text: weight"> </span>

Furthermore, you could use the 'as' aliasing feature of the foreach binding to make the HTML clearly reflect where the information is coming from

<ul data-bind="foreach: {data: children, as 'child'}">

The bindings for the child properties would take on the format

<span data-bind="text: child.name"> </span>

See this fiddle for reference.

answered May 9, 2014 at 16:12

Origineil

3,1182 gold badges15 silver badges17 bronze badges

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

Comments

Jeroen Kransen · Accepted Answer · 2014-05-09 16:43:39Z

1

You can add additional properties to the children array by making it an array of objects instead of just an array of strings like so:

new Person("Annabelle", [
    {Name: "Arnie", weight: 25, age: 2}, 
    {Name: "Anders", weight: 45, age: 5}, 
    {Name: "Apple", weight: 29, age: 2}])

and the html change like so:

<span data-bind="text: $data.Name"></span>    
<ul>
    <li data-bind="text: $data.weight +'lbs. '"/>
    <li data-bind="text: $data.age + ' years'"/>
</ul>

Check out this jsfiddle with a working solution.

edited May 9, 2014 at 16:43

Jeroen Kransen

1,5013 gold badges22 silver badges48 bronze badges

answered May 9, 2014 at 16:10

Scott Murphy

4482 silver badges12 bronze badges

Collectives™ on Stack Overflow

nested foreach loop when the inner loop array has more than one field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related