Easy Sorting, Searching, Tagging Elements in SwiftUI
Build a delivery like app in SwiftUI
What I have tried this time was developing some fascinating ways to search, sort, and tag elements from the database. For that, I made an example of a delivery app.
Let’s peek into a final view.
Key functions
Let’s take a look at some functions we’re going to use.
JSONDecoder(): Used when we decode JSON databasesort(), filter(): Used when dealing with a list of models we use.
As you can see, nothing difficult at all. Then let’s dive in.
Set Model
Let’s set up our model first to take data processing a bit easier.
For convenience, I made some new data type named Food which contains all sorts of cuisines. Originally custom data type is not Codable but by making enum itself Codable, we can deal with this smoothly. If you want to get to know about Codable, see here. Simply saying, it makes easy to JSON en/decoding.
If you want to build a more complicated one, you can write custom coding rules as I did in the original code attached at the bottom of this post. In this case, however, it seems not to occur any error without encoding, decoding rules.
Load data from the database (JSON)
For convenience, we’ll use a local file for the data. Let’s write a ListViewModel to load data from the file. The JSON file looks like this:
Thanks to the codable, we can decode JSON very easily.
Now, all we have to do is simply import .json file ( Please note that you should add target before doing this) by getting the local URL path of the file Bundle.main.url and passing it to Data(contentOf: ) to get data. JSONDecoder().decode() will do the rest of the laborious work for you then. After that, we can finally get a list of Store informations decoded from DBdata.json.
Connect to View
As you saw in the result preview, we are going to add an app bar containing a search bar and sort options.
Let’s start with the root view, ListView.
ListView
The most noticeable part is probably the filter part. We can get filtered Store informations by using .filter() in ForEach. Filtering keywords like inputText and isOnSale will be handled in the AppBarView. Please excuse my laziness and I only implemented searching the “On sale” tag. If you want to add more tags, it’s a good way to avoid hard coding to use the tag keywords list.
Other than that, I used LazyVstack to prevent choppy pages. And, this is it for this view. Let’s move on to AppBarView now.
AppBarView
It seems pretty long, but there really isn’t anything difficult though. Only a few things that I’ve done here are adding sort functions, picker, and button to change bound values.
I wrote the SortBy enum for convenience as you can see at the second code(updated ListViewModel.swift). This method s specifically beneficial to simplify handling complex conditions and to improve readability. The picker class I used in the first code(AppBarView.swift) is also the better suggestion for making select-option view which is available since iOS 14.
Now let’s take a look at the last view, which holds the actual shape, StoreView.
StoreView
It’s a simple layout, so there’s probably nothing you can’t understand. But, as you might notice, in the DBdata.json, form of imageURL is little bit weird. For that, I made an extension that extracts images from that weird path.
It’s done. You can now get the same result I showed at the beginning.
