Two array binding in one foreach loop in knockout JS

Question

Please look at my view model below:

viewModel = [
 {
  StudentName : 'Ronald',
  Reviews : [ '3/5', '2/5', '4/5'],
  TeacherNames : [ 'Nema', 'Sarah', 'Vilson']
  },
 {
  StudentName : 'Chris',
  Reviews : [ '4.5/5', '2.5/5', '3.5/5'],
  TeacherNames : [ 'Nema', 'Sarah', 'Vilson']
 }
]

In below HTML I am trying to display Reviews in nested foreach structure. Reviews display as per expectation. but how can I place TeacherNames along with that single review? I have put the TeacherNames[$index], but it doesn't work.

Note 1: Number of elements in both the array(i.e. Reviews and TeacherNames) will be same.

Note 2: I don't want to change the structure of this JSON model, something like putting extra variable and placing both the parameters in one array.

<div data-bind="foreach:viewModel">
    <span data-bind="text: StudentName"></span>
     <ul data-bind="foreach:Reviews">
       <li>
         <a href="#" data-bind="text:$data">Inbox </a>
         <span class="ui-li-count" data-bind="text:TeacherNames[$index]">123</span>
       </li>
     </ul>
</div>

Please check this Fiddle .

Community · Accepted Answer · 2017-05-23 12:16:06Z

3

Think of it like this: $index is the observable, and $index() is the value of the observable. You need to give the TeacherNames array the number, not the observable.

Use

<span data-bind="text:$parent.TeacherNames[$index()]" >123</span>

instead of

<span data-bind="text:$parent.TeacherNames[$index]" >123</span>

to access the value $index().

I made a copy of your fiddle with the changes applied.

Also, thank you to Calvin, who just used this example to help me on the same question in a different format.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jun 10, 2013 at 20:01

RoyalleBlue

1067 bronze badges

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

Comments

Michael Best · Accepted Answer · 2013-06-10 22:03:17Z

2

RoyalleBlue's answer is correct when using just the foreach binding. But using my Repeat binding will make your binding code much cleaner:

<ul>
  <li data-bind="repeat:Reviews.length">
    <a href="#" data-bind="text:Reviews[$index]"></a>
    <span data-bind="text:TeacherNames[$index]"></span>
  </li>
</ul>

http://jsfiddle.net/mbest/p2kHU/

answered Jun 10, 2013 at 22:03

Michael Best

16.7k1 gold badge40 silver badges72 bronze badges

1 Comment

Kaushal O Over a year ago

This solution works as expected, but I guess @RoyalleBlue has better solution in terms basic way of implementation. Thanks for help. :-)

Paul Manzotti · Accepted Answer · 2013-06-13 09:48:39Z

1

Your property is called TeacherNames, but you are calling it as TeacherName.

Also, it is on the parent object, so try:

data-bind="text:$parent.TeacherNames[$index()]"

edited Jun 13, 2013 at 9:48

answered May 13, 2013 at 12:38

Paul Manzotti

5,14723 silver badges28 bronze badges

4 Comments

Kaushal O Over a year ago

Thanks, I edited the property name. Still it doesn't work, please help.

Kaushal O Over a year ago

Below error I am getting: Error: Unable to parse bindings. Message: ReferenceError: TeacherNames is not defined; Bindings value: text:TeacherNames[$index] . I tried putting below binding also: data-bind="text:$parent.TeacherNames[$index]" . In this case, it doesn't show any error, it is just not showing data as expected.

Kaushal O Over a year ago

As I mentioned in above comment, I tried this also : data-bind="text:$parent.TeacherNames[$index]" , it doesn't show any error, it is just not showing data as expected.

Michael Best Over a year ago

This answer misses the fact that $index is an observable.

Calvin · Accepted Answer · 2013-06-13 12:41:36Z

-1

EDIT: The scope (context) is wrong. You can access TeacherNames with $parent or $root.

Changed:

<span data-bind="text:TeacherNames[$index()]" >123</span>

To:

<span data-bind="text:$parent.TeacherNames[$index()]" >123</span>

http://jsfiddle.net/calvinslusarski/7xuKX/2/

edited Jun 13, 2013 at 12:41

answered Jun 10, 2013 at 12:33

Calvin

18112 bronze badges

1 Comment

Michael Best Over a year ago

This answer misses the fact that $index is an observable.

Collectives™ on Stack Overflow

Two array binding in one foreach loop in knockout JS

4 Answers 4

Comments

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related