Accessing Item Index in foreach Binding in KnockOut

This article shows how to use an item index in foreach binding in KnockOut.

Accessing Item Index in foreach binding

We often want to use the index of a current item in an array. For example, if we want to show the serial number along with the array item. Knockout provides a better way to access the index of items in an array, whether it is a normal array or an observable array.

The syntax $index / $index() provides the way to access the index of the current item in the array. But its value is only accessible within the context of the foreach block. $index is an observable and is updated whenever the index of the item changes.

Index Item value of $index for each Item in foreach binding
0 Item1 $index / $index()  = 0
1 Item2 $index / $index() = 1
2 Item3 $index  / $index() = 2
3 Item4 $index  / $index()  = 3
4 Item5 $index  / $index() = 4

For example: If we want to show the employee name with serial number (index number) as in the following.

ViewModel

<script type="text/javascript">
function viewModelEmployee() {
       this.Employees = ko.observableArray([
      { Name: "Shiv", Code: "001" },
      { Name: "DJ", Code: "002" },
      { Name: "Rajneesh Rai", Code: "003"}
   ]);
}

var vmEmp = new viewModelEmployee();
    $(function () {
        ko.applyBindings(vmEmp);
    });
</script>
 

View

<table border="1">
   <thead>
       <tr>
           <td>
                Sr#
            </td>
            <td>
                Employee Name
            </td>
        </tr>
</thead>
<
tbody data-bind="foreach: Employees">
        <tr>
           <td data-bind="text : $index">
           </td>
           <td data-bind="text:Name">
           </td>
      </tr>
   </tbody>
</
table>

Table View

But the received result is not practical, since the serial number must start with 1. To do this we would use $index() + 1 as in the following:

<table border="1">

    <thead>

        <tr>

            <td>

                Sr#

            </td>

            <td>

                Employee Name

            </td>

        </tr>

    </thead>

    <tbody data-bind="foreach: Employees">

        <tr>

            <td data-bind="text : $index() + 1">

            </td>

            <td data-bind="text:Name">

            </td>

        </tr>

    </tbody>

</table>

Serial number

We have now accomplished our goal, in other words Serial number.

Precautions

1.    If you just want to use an index then you can use either $index or $index().

2.    If you want to use an index to append or add something to the index then use $index(). Otherwise if you use it like $index + 1 then something weird happens, it does not provide the intended result.

Index Method

Possible use-case scenarios might be:
 

data-bind=; 'EmpID ' + ($index() + 1) EmpID 1 DO Use
data-bind=" $index() + 1" 1 DO Use
data-bind=" 'EmpID ' + ($index + 1)" Unexpected DON'T Use
data-bind=" $index + 1" Unexpected DON'T Use