---
title: "What is foreach?"  
description: "What is foreach?"  
author: "ICSM Computer"  
published: 2025-04-23  
updated: 2025-04-23  
canonical: https://www.mindstick.com/interview/34050/what-is-foreach  
category: "knockcout js"  
tags: ["knockout.js", "knockout mvc", "knockout.js data-binding"]  
reading_time: 4 minutes  

---

# What is foreach?

The `foreach` binding is one of the most **commonly used features** in Knockout.js — it lets you **dynamically render lists** of items, and keeps the DOM in sync as the list changes.

Let’s break it down nice and easy

1. `foreach` is a Knockout.js binding that:
2. Loops through an **observable array**
3. Repeats an HTML template for each item

Automatically updates the DOM when the array changes (add/remove/update)

## Basic Example

### ViewModel:

```javascript
function ViewModel() {
  this.fruits = ko.observableArray(["Apple", "Banana", "Cherry"]);
}
ko.applyBindings(new ViewModel());
```

### HTML:

```html
<ul data-bind="foreach: fruits">
  <li data-bind="text: $data"></li>
</ul>
```

`$data` refers to the **current item** in the array.

This will render:

## Using Objects in Arrays

```javascript
this.fruits = ko.observableArray([
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" }
]);
```

### HTML:

```html
<ul data-bind="foreach: fruits">
  <li>
    <strong data-bind="text: name"></strong> -
    <span data-bind="text: color"></span>
  </li>
</ul>
```

## Advanced: Track Index & Parent

Inside a `foreach`, Knockout gives you special variables:

| Variable | Description |
| --- | --- |
| `$data` | The current item |
| `$index` | The index of the current item |
| `$parent` | The parent context (outside the loop) |
| `$root` | The root context (top-level VM) |

```html
<ul data-bind="foreach: fruits">
  <li>
    #<span data-bind="text: $index"></span>
    <span data-bind="text: name"></span>
  </li>
</ul>
```

## Dynamic Updates (Magic!)

```javascript
this.addFruit = () => {
  this.fruits.push({ name: "Grapes", color: "Purple" });
};

this.removeLast = () => {
  this.fruits.pop();
};
```

And in your HTML:

```html
<button data-bind="click: addFruit">Add Fruit</button>
<button data-bind="click: removeLast">Remove Last</button>
```

The list will update **automatically** — no DOM work required!

## Summary

| Feature | What it does |
| --- | --- |
| `foreach` | Loops through an observable array |
| `$data` | Current item |
| `$index` | Index of current item |
| Dynamic updates | Array changes auto-update the DOM |
| Works with arrays of objects | Great for tables, cards, lists, etc. |

Want an example using `foreach` to render a **to-do list**, **shopping cart**, or **editable table**? Just say the word and I’ll mock one up for you!

```html
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
```

## Answers

### Answer by ICSM Computer

The `foreach` binding is one of the most **commonly used features** in Knockout.js — it lets you **dynamically render lists** of items, and keeps the DOM in sync as the list changes.

Let’s break it down nice and easy

1. `foreach` is a Knockout.js binding that:
2. Loops through an **observable array**
3. Repeats an HTML template for each item

Automatically updates the DOM when the array changes (add/remove/update)

## Basic Example

### ViewModel:

```javascript
function ViewModel() {
  this.fruits = ko.observableArray(["Apple", "Banana", "Cherry"]);
}
ko.applyBindings(new ViewModel());
```

### HTML:

```html
<ul data-bind="foreach: fruits">
  <li data-bind="text: $data"></li>
</ul>
```

`$data` refers to the **current item** in the array.

This will render:

## Using Objects in Arrays

```javascript
this.fruits = ko.observableArray([
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" }
]);
```

### HTML:

```html
<ul data-bind="foreach: fruits">
  <li>
    <strong data-bind="text: name"></strong> -
    <span data-bind="text: color"></span>
  </li>
</ul>
```

## Advanced: Track Index & Parent

Inside a `foreach`, Knockout gives you special variables:

| Variable | Description |
| --- | --- |
| `$data` | The current item |
| `$index` | The index of the current item |
| `$parent` | The parent context (outside the loop) |
| `$root` | The root context (top-level VM) |

```html
<ul data-bind="foreach: fruits">
  <li>
    #<span data-bind="text: $index"></span>
    <span data-bind="text: name"></span>
  </li>
</ul>
```

## Dynamic Updates (Magic!)

```javascript
this.addFruit = () => {
  this.fruits.push({ name: "Grapes", color: "Purple" });
};

this.removeLast = () => {
  this.fruits.pop();
};
```

And in your HTML:

```html
<button data-bind="click: addFruit">Add Fruit</button>
<button data-bind="click: removeLast">Remove Last</button>
```

The list will update **automatically** — no DOM work required!

## Summary

| Feature | What it does |
| --- | --- |
| `foreach` | Loops through an observable array |
| `$data` | Current item |
| `$index` | Index of current item |
| Dynamic updates | Array changes auto-update the DOM |
| Works with arrays of objects | Great for tables, cards, lists, etc. |

Want an example using `foreach` to render a **to-do list**, **shopping cart**, or **editable table**? Just say the word and I’ll mock one up for you!

```html
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
```


---

Original Source: https://www.mindstick.com/interview/34050/what-is-foreach

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.