iOS: How to Read and Update Local JSON file with TableView

Eddie Lui

3 min readMay 16, 2019

Introduction:

In this tutorial, I will show you how to read local JSON file, update JSON file and TableView.

Pre-requisites:

How to display data in Table View

List of Files will be used for this application:

Person.swift: Model
Athletes.json: The data source file
TableViewController: Handling table view events
ViewController: Display all information of the selected person, and can be edited by the user

Let’s start it!

1. Adding JSON file into the project

The JSON file can be created by yourself or you can download it from the internet, just ensure that the file is in your local device. Besides that, the JSON data format will look like this:

[{“Your Key”:”Your Value”, “Your Key2”:”Your Value2”},{“Your Key”:”Your Value”, “Your Key2”:”Your Value2”},{“Your Key”:”Your Value”, “Your Key2”:”Your Value2”}]

Note: Think of it as a dictionary.

There is a simple way to add your data file into the project. You can just simply drag your file into the left side of the project, which you should see there is a list of files there.

Once you dragged your file to the project, you will see something like this picture, then you can just click finish.

2. Model

Based on your data source, you should create a suitable Model class for each field. And remember to add Codable protocol for retrieving data.

Person.swift

3. Reading Data

In order to retrieve the data, we need to find the path of the file first.

Here, we have 2 different way to get the data path.

Line 1 is to generate the path of the file that we just dragged into the project.

Line 4 & 5 is to generate the path of a new data file in the document directory.

Then, we call loadFile method to decide which path we will use.

getData()

Note: the JSON file in mainUrl variable is not editable via the program, that’s why we need to append another JSON file in document directory.

Checking file existence to decide which path will be read.

loadFile()

Note: self.tableView.reloadData() is to update the table view.

We will use JSONDecoder to decode the JSON data, and assign it to Person type array — athleteList.

decodeData()

Note: athleteList is a Person type global variable

Now, your data should be able to use in the program.

4. Record changes made by users

Create a save button for ViewController to save the changes.

Note: currentIndex is an integer global variable

Using fresult to check whether users have made any changes or not.

If it returns true, call writeToFile() to append data in the JSON file.

If it returns false, an alert message box will pop up to remind user that nothing has been changed.

Note: fresult is a boolean global variable which will be equal to true when user edited the information.

Writing data into the JSON file

Note: Use encoder to create JSON object.

Alert message

That’s it! Now, you know how to read local JSON file, update JSON file and table view data.

Thanks for reading :)

Sample on Github repo: https://github.com/edlui/Read-and-Update-Local-JSON-file-with-TableView