CODEWITHSUNDEEP
knockout.jsforeachnested
Kári Rafn Karlsson
Kári Rafn Karlsson

Reputation: 79

Simple KnockoutJS nested foreach not working

This works:

<div data-bind="foreach: { data: roles, as: 'role' }">
    <h3 data-bind="text: role.NamePlural"></h3>
</div>

<div data-bind="foreach: { data: genders, as: 'gender' }">
    <h4 data-bind="text: gender.NamePlural"></h4>
</div>

But this doesn't:

<div data-bind="foreach: { data: roles, as: 'role' }">
    <h3 data-bind="text: role.NamePlural"></h3>
    <div data-bind="foreach: { data: genders, as: 'gender' }">
        <h4 data-bind="text: gender.NamePlural"></h4>
    </div>
</div>

I only get the first role, i.e. it breaks when it starts the nested foreach loop. What am I doing wrong?

Edit: This is the data I'm using

[{"Id":1,
  "Name":"Athlete",
  "NamePlural":"Athletes"},
 {"Id":2,
  "Name":"Referee",
  "NamePlural":"Referees"},
 {"Id":3,
  "Name":"Coach",
  "NamePlural":"Coaches"}]

[{"Id":1,
  "Name":"Female",
  "NamePlural":"Women"},
 {"Id":2,
  "Name":"Male",
  "NamePlural":"Men"}]

Upvotes: 0

Views: 428

Answers (1)

Ivan.Srb
Ivan.Srb

Reputation: 1851

If your first code work, roles and genders are in the one level in your ViewModel. But in your second code you try to use genders as field of role.
You could rewrite it as: 

<div data-bind="foreach: { data: roles, as: 'role' }">
    <h3 data-bind="text: role.NamePlural"></h3>
    <div data-bind="foreach: { data: $root.genders, as: 'gender' }">
        <h4 data-bind="text: gender.NamePlural"></h4>
    </div>
</div>

Or use $parent instead of $root if your model have more nested layers.

Upvotes: 2

Related Questions