How to decode JSON data in Swift programming language - SwiftUI tutorial for beginner app developers

Credo Academy ♥️ WELCOME25

. In this class, we will learn an essential programming concept for app developers. More precisely, how to decode JSON data using Swift Codable. We are going to parse JSON data and populate this information about each African animal into a Page Tab View in SwiftUI.

CHAPTERS

00:00 Introduction
00:18 iOS app preview
01:04 Create a cover image
01:52 Create comment marks
03:01 Create a SwiftUI Image View
03:24 Create a new Page Tab View
04:02 Create a loop with a For Each
04:28 Start the Live Preview in Xcode 12
05:01 Learn JSON basics
06:00 Learn JSON Structure (Key - Value pairs)
06:17 Learn JSON Value Types (eg. String, Number, Boolean, etc.)
06:48 Analyze a JSON sample file
07:14 Swift data model
07:22 Swift Encoder and Decoder protocols
07:34 Swift Codable API
08:21 Create a new data model in Swift
10:45 Make the custom type conform to the Identifiable and Codable protocols
11:08 Learn how to decode a JSON file (coding steps)
11:35 What is pseudocode in computer science?
11:58 Define the main objectives
12:51 Define the parts of the algorithm for decoding a JSON file
13:35 What is a Swift Extension
13:51 What is a Swift Bundle
14:33 Step No1: Create a new Bundle Extension for decoding JSON
17:04 Step No2: Locate a JSON file
18:22 Step No3: Create a property for the data
19:15 Step No4: Create a JSON decoder
19:35 Step No5: Create a property for the decoded data
21:28 Step No6: Return the ready-to-use data
22:06 Code implementation
22:21 Create a new property for the cover images
23:14 Modify the For Each loop in SwiftUI
23:25 Modify the Image view in SwiftUI
23:36 Start the Live Preview in Xcode 12
23:53 Final code refinements
26:22 Test the iOS 14 application in Xcode's Simulator

So, what is JSON?

Well, JSON stands for Javascript Object Notation. It’s a compact, easily readable file format for data structuring. In general, it’s primarily used to transmit data between a server and an application using some kind of application user interface a.k.a. API.

Not only that, but we can also use it to store and parse JSON data directly inside the local app bundle. You know, it’s a text-based format representing different kinds of information.

What you should also know about it, that a JSON file consists of KEY-VALUE pairs and it uses brackets, parentheses, and colons to separate the elements from each other.

A JSON data structure can represent different types such as: String, Number, including Integer and Double, Boolean, Array, Dictionary, and even Optional.

As app developers, what’s fortunate for us is that each of these JSON types can map to a corresponding Swift type. The only exception is the Data type, but we can always convert dates into a numeric or string representation of this data.

All right, before we start learning how to parse a JSON file first we’ll take a quick look at this simple JSON structure. This one contains some key-value pairs where the values are basic types like a string or a number.

There is also a value representing an array of strings in this simple example. To use any JSON file first we need to create a corresponding data model in Swift.

With this data model, we can easily decode any data using Swift’s built-in decoding and encoding functionality. For that, we can run a JSON decoder alongside the Codable API.

It’s worth to mention, that this Codable API will do the hard part of the work to generate the output that we will need to use in SwiftUI later on.

By the way, this Codable is a type alias, which consists of the Encodable and the Decodable protocol.

I’m pretty confident that by finishing this Africa project you will get familiar with all the basics of how to use JSON in SwiftUI. Dealing with JSON data is such a fundamental part of app development, therefore, we will deep-dive into this topic in the upcoming sections of the course.

Now it’s time to decode the first JSON file in this Africa project.

#SwiftUI #Xcode #iOSDevelopment

[quanghoangnguyen]

Very easy to understand. I Like it!!!! Is the part 2 ready? Can't wait for it. P/S Can you make the tutorials for get | post to get data from SQL ? And Please please with this bundle to get | post so we can use anywhere when is need :D!!! Because the data from api is allways JSON so is very helpfull if you make a tutorials for this part! Thank!!!

[swifter]

Have the part 2 released?
I am so looking for the Main Objective (3) @12:36

[chettodust]

Great tutorial. Do you have anything that shows how to create the json file in your bundle? This approach assumes that you already have a file with json. What if you need to make a request to an API to get the infomormation?