Filtering Data with Combine

How to present different data in your list view

Hello everyone,

Welcome back to the Learning SwiftUI newsletter, this is issue #5.

I hope you had a great week and that you are excited about the challenges that the next one will have. I know I am! For this issue, we will go through how to filter data with the Combine framework. Surprisingly, I will not have any animations in the code for this week. Got to be the first time for everything I guess.

Let’s get started!

First, this is the end result that we are aiming for in this issue.

Mr SwiftUI @SwiftUI_newbie

By using Combine, you can filter out lists based on certain string criterias. Really useful 👌 This will covered in my next issue on Learning SwiftUI. Make sure to subscribe, link in next post or on my bio 😃

As we discussed in my last issue, you can read about it here. We need to set up a class that conforms to ObservableObject to publish data. So let’s start with that.

class FilterMyData: ObservableObject {
    @Published var filterMyData: [String] = []
    let inData = ["User 1", "User 2", "User 3", "User 4", "User 5", "Clody Weather", "Rainy Weather", "Sunny Weather", "John Smith", "Jane Smith", "Hello Smith", "Janice Smith", "Royal Smith", "Funnybot Smith", "Yeah Smith", "Hehe Smith"]
    private var cancellable: AnyCancellable?
    
    init() {
        filterData(criteria: " ")
    }
    
    func filterData(criteria: String) {
        filterMyData = []
        
        cancellable = inData.publisher
            .filter { item -> Bool in
                item.contains(criteria)
            }
            .sink { [unowned self] itemData in
                filterMyData.append(itemData)
            }
    }
}

In this class we have set up a published property with an array of strings. The inData will represent some data that we have fetched and the cancellable is used to cancel data from our inData array.

By using .publisher on our inData we can iterate over each character, then we can use a filter that returns a boolean whether or not our string contains those characters. Then we use the sink modifier, this will go through all of the items in the inData array and append those strings that match our criteria and cancel out those strings who do not match.

---

Want to learn more about SwiftUI animations?

I created a book for anyone new to SwiftUI that wants to develop their SwiftUI animation skills. The book cover the basics and more advance techniques to animating objects and views in SwiftUI. You can check it out by clicking the link below:

Learning SwiftUI Animations - The Beginner Roadtrip

Two minor examples from the book:

---

Alright, now that we have set up our class, it is time to build our view. Use the @StateObject property wrapper so we can subscribe to our data in the ObservableObject class that we named FilterMyData().

Then we need to set up our buttons that will subscribe to our filterData function. As you can see in the code below, we will subscribe to certain words. So for example, every string that contains the word User will end up in our list once we press that button and so on.

Here is also where Combine gets really smart. What I want you to do is change one criteria from “Smith” to “smith” and see if it will present all strings that contain that word.

Heads up, it shouldn’t work 🙂

struct MyListDataView: View {
    @StateObject private var dataIn = FilterMyData()
    
    var body: some View {
        VStack(spacing: 10) {
            HStack(spacing: 20) {
                Button(action: {
                    dataIn.filterData(criteria: "User")
                }, label: {
                    Text("Users")
                })
                
                Button(action: {
                    dataIn.filterData(criteria: "Smith")
                }, label: {
                    Text("Smith")
                })
                
                Button(action: {
                    dataIn.filterData(criteria: "Weather")
                }, label: {
                    Text("Weather")
                })
                
                Button(action: {
                    dataIn.filterData(criteria: " ")
                }, label: {
                    Text("All")
                        .padding(.horizontal)
                        .padding(.vertical, 3)
                        .foregroundColor(.white)
                        .background(
                            Color.blue
                                .cornerRadius(10)
                        )
                })
            }
            .font(.title2)
            
            List(dataIn.filterMyData, id: \.self) { listData in
                Text(listData)
            }
        }
    }
}

There you have it for this week’s issue. What did you think? Let me know in the comments or if you ever feel like talking SwiftUI with me you can always connect with me on Twitter @SwiftUI_newbie.

Have a great Sunday!

Mr SwiftUI