How to access nested JSON API data in SwiftUI?

Question

I am trying to build a public transport app in SwiftUI. I have received an API where I can search for an origin and destination station in Stockholm, Sweden, and the date and time I want to travel and then get a travel route.

This is a part of the JSON file I am working with (the full one is in the comments below):

{
  "Trip": [
    {
      "ServiceDays": [
        {
          "planningPeriodBegin": "2021-01-05",
          "planningPeriodEnd": "2021-05-20",
          "sDaysR": "m\u00e5n - fre",
          "sDaysI": "utom 13., 14. maj",
          "sDaysB": "33E7CF9F3E7CF9F3E7CF9C1E7CF9F3E70F"
        }
      ],
      "LegList": {
        "Leg": [
          {
            "Origin": {
              "name": "Skansen",
              "type": "ST",
              "id": "A=1@O=Skansen@X=18101848@Y=59323673@U=74@L=400110217@",
              "extId": "400110217",
              "lon": 18.101848,
              "lat": 59.323673,
              "prognosisType": "PROGNOSED",
              "time": "15:58:00",
              "date": "2021-04-06",
              "rtTime": "15:59:00",
              "rtDate": "2021-04-06",
              "hasMainMast": true,
              "mainMastId": "A=1@O=Skansen (Stockholm)@X=18100895@Y=59323960@U=74@L=300101405@",
              "mainMastExtId": "300101405",
              "additional": false
            },
            "Destination": {
              "name": "Manilla",
              "type": "ST",
              "id": "A=1@O=Manilla@X=18133759@Y=59323250@U=74@L=400110141@",
              "extId": "400110141",
              "lon": 18.133759,
              "lat": 59.32325,
              "prognosisType": "PROGNOSED",
              "time": "16:05:00",
              "date": "2021-04-06",
              "rtTime": "16:06:00",
              "rtDate": "2021-04-06",
              "hasMainMast": true,
              "mainMastId": "A=1@O=Manilla (Stockholm)@X=18134407@Y=59324185@U=74@L=300101426@",
              "mainMastExtId": "300101426",
              "additional": false
            },

This is not even a quarter of the full JSON file but I figured it would be too much adding it all in here, please comment if you would like to view the whole JSON file

for now, I don't focus on changing the date or time, I just need a way to access the following data:

- planningPeriodBegin
- planningPeriodEnd
- The "Origin" "name" (Skansen)
- The "Destination" "name" (Manilla)

I have copied a tutorial on YouTube that partly covers how to access the JSON file - but not completely. Here is the link to the video: https://www.youtube.com/watch?v=-gNOVDNWmIg&list=LL&index=1&t=966s

...And this is the code he wrote in the video:

import SwiftUI

struct RouteList: View {
    @State var gifUrl = String()
    @State var searchString = String()
    
    var body: some View {
        Text("\(gifUrl)")
            .onTapGesture {
                let url = URL(string: gifUrl)
                guard let GIPHYUrl = url, UIApplication.shared.canOpenURL(GIPHYUrl) else {return}
                UIApplication.shared.open(GIPHYUrl)
            }
        TextField("Search GIFs", text: $searchString)
            .multilineTextAlignment(.center)
        Button("Fetch Gif"){fetchAPI()}
    }

    func fetchAPI() {
        let apiKey = "xkkakigCSAnCN4Opymed36OoyByZEbBO"
        let url = URL(string: "https://api.giphy.com/v1/gifs/search?api_key=\(apiKey)&q=\(self.searchString)&limit=25&offset=0&rating=g&lang=en")
        URLSession.shared.dataTask(with: url!) { data, response, error in
            if let data = data {
                if let decodedGiphy = try? JSONDecoder().decode(GIPHYStructure.self, from: data){
                    self.gifUrl = decodedGiphy.data[0].url
                }
            }
        }.resume()
    }
    
}

struct GIPHYStructure: Decodable {
    let data: [dataStructure]
}

struct dataStructure: Decodable {
    let url: String
}

Thank you for taking the time to read the whole post and it would help greatly if you could manage to figure out how to do it. I have a URL to the JSON file but that key is private.

You have no error handling at all, you should check if the call returns an error and if so print or handle the error and never do try? when decoding external data, use try with a do/catch and print any error in the catch clause — Joakim Danielson
– Joakim Danielson, Commented Apr 7, 2021 at 6:50

heiko · Accepted Answer · 2021-04-08 01:31:33Z

1

Your ...Structure structs need to model the structure of the JSON file you're decoding. So you'd use something like this (untested, since you didn't share the URL):

struct APIStructure: Decodable {
    var Trip: [TripStructure]
}

struct TripStructure: Decodable {
    var ServiceDays: [ServiceDayStructure]
    var LegList: LegListStructure
}

struct ServiceDayStructure: Decodable {
    var planningPeriodBegin: Date
    var planningPeriodEnd: Date
}

struct LegListStructure: Decodable {
    var Leg: [LegStructure]
}

struct LegStructure: Decodable {
    var Origin: StationStructure
    var Destination: StationStructure
}

struct StationStructure: Decodable {
    var name: String
}

Then you could fetch and decode the JSON roughly like this:

func fetchAPI() {
    
    let url = URL(string: "https://api.giphy.com/v1/gifs/search?api_key=\(apiKey)&q=\(self.searchString)&limit=25&offset=0&rating=g&lang=en")
    URLSession.shared.dataTask(with: url!) { data, response, error in
        if let data = data {
            let decoder = JSONDecoder()
            let formatter = DateFormatter()
            formatter.dateFormat = "yyyy-MM-dd"
            decoder.dateDecodingStrategy = .formatted(formatter)
            if let decodedJSON = try? decoder.decode(APIStructure.self, from: data){
                // Examples how to access the decoded values:
                let firstTripFirstPlanningPeriodBegin: Date = decodedJSON.Trip[0].ServiceDays[0].planningPeriodBegin
                let firstTripFirstLegOrigin: String = decodedJSON.Trip[0].LegList.Leg[0].Origin.name
            }
        }
    }.resume()
}

This all explained in much more detail in this article: https://learnappmaking.com/codable-json-swift-how-to/

edited Apr 8, 2021 at 1:31

answered Apr 7, 2021 at 1:08

heiko

4327 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Elliot Sylvén Over a year ago

I tried running this code and got two errors: Value of type 'ContentView' has no member 'firstTripFirstPlanningPeriodBegin' AND Value of type 'ContentView' has no member 'firstTripFirstLegOrigin'. How do I go on about fixing this?

Elliot Sylvén Over a year ago

Now I added under the line where it says "struct ContentView: View {", "@State var firstTripFirstPlanningPeriodBegin = String()" AND "@State var firstTripFirstLegOrigin = String()". This got rid of the old errors but instead I got a new one that says: "Cannot assign value of type 'Date' to type 'String'" on the line where this code is written: "self.firstTripFirstPlanningPeriodBegin = decodedJSON.Trip[0].ServiceDays[0].planningPeriodBegin" How do I fix this?

heiko Over a year ago

My code snippets were only intended to quickly demonstrate how to decode the JSON response from an API and how to access the decoded values. I just edited the answer to clarify the last bit (my original example assumed that you would add the firstTripFirstPlanningPeriodBegin and firstTripFirstLegOrigin parameters to your RouteList struct, which was a bit misleading, sorry, although you actually did that by adding the @State ... parameters :-).

heiko Over a year ago

Swift is a strictly typed language. My example decodes the "2021-01-05" values to a Date type, so the type of your variable needs to match this (e.g. @State var firstTripFirstPlanningPeriodBegin = Date()). You don't have to do this, you could also just decode the value to a String, for which you'd only have to change the ServiceDayStructure struct to have var planningPeriodBegin: String instead of var planningPeriodBegin: Date For more on this, I'd really recommend to take an introductory course to Swift and SwiftUI though. I really liked this free one: cs193p.sites.stanford.edu

Jan Cássio · Accepted Answer · 2021-04-07 00:51:20Z

In order to have a better answer, I suggest you improve your question. Also, try to not expose here in the StackOverflow, parameters that could compromise the privacy of your app and your clients like the api key in your question.

Anyway, I got some problems in your code that could be the issue, actually, I'm not sure what's your question but let's see:

Your fetch method seems the problem, if you check the URLSession documentation you will notice the completion block is async and doesn't run in the main thread. So you have to wrap your assign into a dispatch queue main block in order to update UI elements just after the request and JSON parsing completes

    DispatchQueue.main.async {
      self.gifUrl = json.data[0].url
    }

Always follow the official documentation to support you development.

Collectives™ on Stack Overflow

How to access nested JSON API data in SwiftUI?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related