Get index in ForEach in SwiftUI

In this tutorial, we will see how to get an index in ForEach in SwiftUI.

In SwiftUI, we can use the ForEach loop to create a list of items or views. If we want to get  index of the current item while looping through a ForEach, there are several methods we can use to do this.

Now, have a look at the methods below to achieve this task.

• Using enumerated() method
• Using indices
• Using a custom index variable

Suppose we have an array of items, and we want to loop through them using the ForEach loop, and for each item, we want to know its index in the array.

Using enumerated() method

The enumerated() method is a straightforward way to get the index when looping through a ForEach in SwiftUI.

Suppose we have an array of items, and we want to display these items in a list with their corresponding index.

Inside the ForEach loop, we can use the enumerated() function on our array to get pairs of indices and items. We can then access the index and item within the loop.

Example

import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        List {
            ForEach(Array(items.enumerated()), id: \.offset) { index, item in
                Text("Index: \(index), Item: \(item)")
            }
        }
    }
}

In the above program, I have applied the enumerated() function on items, which pairs each element with its index in the array. The  Array() is used to convert this pairing into an array of tuples, where each tuple contains the index and the item.

Then, I have set the id parameter to \.offset,  to uniquely identify each row in the list based on its index.

Output:

Using indices

Suppose we have a list of items and we want the index of every item. We can do that by using the indices property.

We use this property to get a list of numbers that match the positions (or index) of these items.

Then, we can use these numbers (indices) to find and show the position or index of each item when we display them in a list.

Example

import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        List {
            ForEach(items.indices, id: \.self) { index in
                Text("Index: \(index), \(items[index])")
            }
        }
    }
}

In the above program, I have applied indices property on the item to get the index of each item. This provides a sequence of indices for the items array.

Output:

Using a custom index variable

We can also create a custom index variable and increment it manually in a SwiftUI ForEach loop to get the index of items.

Example

import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text("Index \(items.firstIndex(of: item)! + 1): \(item)")
            }
        }
    }
}

In the above program, within the ForEach loop, I have created a Text view for each item. The text will display the value of item and its index in the items array.

I have calculated the index by using items.firstIndex(of: item)! + 1. Here the  firstIndex(of:) returns the index of the item in the array and adds 1 to it to display the index starting from 1.

Output: