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.
