Wow, a lot has happened in the past month now hasn't it? Besides all the things happening in the world that I'm sure nearly everyone is aware of, I've done a little bit of learning of SwiftUI and pulling in information from an API and displaying it. So for today's blog, I'll be going over a small sample of the work I did, and explain how I was able to get everything working in order to complete it all.

Example of Work

So as you can see, we will be working through an NHL API courtesy of Drew Hynes and using Swift's JSON decoder to read through the information and print it out. This is going to be less of a How-to and more of a, this is how I did things.

Needed Things

Some things we're going to need in order to get this all to work is an API, or in our case, this one specifically which is all the information regarding all the NHL teams. Then we will have to build out a model structure of the JSON information so we can read it, then a web service, which will call the API and receive the information. Then finally taking all the results, and putting them into a published array of the model we built out.

API Information

This is the JSON information that the above API link mentioned returns for each and every team in the NHL. As you can see, there's a lot of information nested within everything so pulling it out to model it and writing it could be a real pain once these API calls for various things regarding the NHL get larger. Luckily I came across this website that instantly parses JSON called quicktype and we're simply going to take all that raw JSON information, input on quicktype and get the model for Swift.

Model

Thanks to quicktype, and some code clean up we have the following model constructed for our API call. Easy work is done, so now, we have to move onto our web service. This effectively is the function that calls the API, and gets the data back into a readable format for us.

Web Service

This is our web service. I'll break this one down a little on how it works. First we setup the function getData to accept generics, and apply Decodable to the generic. We have to use decodable in order to read the data from JSON format. Then we assign the parameters urlString for the API link, and a completion parameter to help us escape, and end when needed. After that, we assign a guard to our very first variable "url" which is simply assigning the URL from urlString to the variable "url". After that, we startup a URLSession with the variable we just set. Within that, we have an error check that will escape if there's an error, if not we guard another variable called "data" for all of the data from the URL. Then we make another variable called "decoder" which is the function JSONDecoder, then guard another variable called "decodedData" and try to decode the information. After all this, if it works, we get decodedData back with all the information from the API.

Results

So for our results, we need to be able to push them to our SwiftUI counterpart. In order to do this, we make the class an observable object, then attach an @Published tag to our variable of hockeyTeams that is an array of HockeyTeam.Teams which if you go back and look at the model we setup from the start, you'll see it within there. Then simply, well initialize WebService, call our function getData, pass in the API, and take the results, sort them by team name and attach that information to the "hockeyTeams" variable.

Now for SwiftUI

Now, there's a lot of information to go through here. The best way I would suggest learning it is going through Apple's tutorial as it should help you far better than I can do at the current moment. But it doesn't have everything seen in my screenshot from above. So lets go over those.

Firstly, the @ObservedObject which was our HockeyTeam.Teams array from above. In order to do that, we call back to the results call we setup. Then we assign @State to the selected teams, and whether or not that team is being presented or not.

After that, we make a List, and then loop through our ObservedObject, and assigning the unique ID to the teams id. Once we've done that, we make a horizontal stack, and insert the teams name, a button that changes the state of isPresented and sets the selected team. With this information, we are able to pass off that data to another view that shows us more in-depth of the selected team information. This is what it will look like after structuring the second view.

For the second view, I'll just be showing how I currently have it setup, but since it's largely unfinished I won't be going into the code on it.

Recap

So to quickly recap, I went over how I used Swift to setup an API call, that gathers data from a JSON object, and then take that data and pass it to our front end of SwiftUI and take it and make a simple interface that uses all that information from the API. While it's very rudimentary it's a starting point, and with school finishing up, and having a major capstone project finishing up I haven't been able to be focused on continuing and finishing this project. But hopefully in the future, I'll have a full fledged out app built and completed. But for now, this is all, and thanks for following these past blogs of mine!