Fetching JSON data from an API | SwiftUI in 5 minutes | 2020

all right guys today we're going to talk about one of the most important things of any app and that's fetching data from an api and then displaying it within your own app pretty much every app you know does this in one way or another so it's a good thing to to feel comfortable with so we're going to start with a basic app get rid of the preview action of the code and we're going to create a variable that holds our data and for right now we're just going to hard code it with a string that says new data and then we're going to plug that into our text label and if we run this now we should just be able to see uh that run it on um [Music] simulator we should be able to just see new data that makes sense okay so now how do we plug in some api data in here instead of just hard coding things so i'm going to use this api which i found which i thought was hilarious it's taco fancy api it's on github by these two guys eric and and the other person and it's funny because it just gives you recipes for tacos i thought that was funny because i like tacos so if you just go to their taco.randomizer.heroku.com and tag on random at the end of the url you'll get a randomized recipe for a taco you plug that into i use postman but there's plenty of other tools online where you can see the structure of the json that gets returned it makes it a bit easier we're going to create a new file that mimics the structure that we want from that api and the way you do this is with structs and for each layer of the json you create a structs that's also decodable it complies to the decodable protocol because we're using it to decode a json and we're going to look at just the base layer and also the seasoning part so base layer and seasoning of the json so we're gonna create two structs for those pieces and both of those are decodable and both of those are going to then be the the type of variable that you have within the taco data parent struct so to speak so within taco data we have base layer which is of type base layer data and seasoning which is of type seasoning data struct and within those we have a variable called name which is of type string because that's what the json is outputting so the second and third struct that we saw are sort of fit into the first struct that you see at the top now we need to use an enum coding keys because our first variable base layer we're renaming it to match the the way that swift expects things to be named which is camel case rather than how the json uses it so you need to do this coding key assignment to say like hey the json is giving us base underscore layer but we wanted base layer with a capital in the middle so that's how you create your structure that mimics the json and then now we can say when we go to content view our data is actually going to be of type taco data which we just defined so now when we display it in a text field we can say data.baselayer.name because that comes from the structure we just defined and that's going to give us the base layer of the taco recipe and now we can move on to creating the function to fetch the data from the api so we're going to create a function and call it fetch or get data and we're going to create a url string which is what we typed in to get the the random recipe then we're going to turn that into a swift url with string just because that's how swift likes to see urls not just the strings and now we're going to create a url session that shared that data task with url which is what you use to connect to an api and you then either get one of three things you either get the data you expect you either get a response or an error and you can use any of those things within your code down below but for this simple example we're just going to use data if you're not going to use something you just stick an underscore in it that's how you tell swift that you don't care about it so once we get the data we we look at it as if let data equals data which means that if we get data and if let protects us it means like if we don't get data here we're not going to do anything but if we get data then we go into this do try section and here we create a decoder which is a json decoder and we use it to decode whatever we get from the data and we create this variable called decoded data then we set self.data to the decoded data and that's how we populate our top variable at the top if there's an error of some sort with the json we then catch it and say print oh my god there was something wrong and and that'll get printed for us remember when you're in swift ui you have to set a variable you have to wrap it with at state tag to make sure that it if it's something that's going to change and that's what we did here so now that we've we've essentially connected to the api we we have to test it and the way we we need something in our ui that calls on this function so we're going to create a v stack with the existing text label and then we're going to stick a button in it as well this button is going to say refresh and all it's going to do is call the get data function so the get data function is going to go get us the data from the api and then replace the the text label so if if we do this we get an error because if you notice the the data variable we have at the top right now all we're saying is it's going to be of type taco data right but it doesn't actually have anything so the first time you run this app swift ui doesn't know what to put in the text label so we have to initiate this with something we have to give it placeholder data for the first time it launches so we have to actually set it equal to taco data and then give it a base layer type and give a name for the base layer which we'll just call taco base and then we need to give it a placeholder for the seasoning which we're just going to call seasoning so now swift ui has something to start the app with and then when we run when we fetch the api it'll get replaced so now there you go it says taco base because that's the first thing but refresh doesn't work and that's because we've actually made a couple of quick omissions here so every time you fetch an api you need to also make sure it's wrapped the url session the code within the url session is wrapped in dispatch queue that mean that async which lets swift ui know that this is an asynchronous operation meaning that it's going to take some time for you to get the answer from the api so that's how you tell it that like it needs to wait to hear an answer and then refresh the data and so now that was one of the things and the other thing is you have to make sure that you do dot resume at the end of the url session clause and now it should work and if we hit refresh oh we got another error if you notice in the console it's a transport security policy requires a use of a secure connection so you go into your info plist and you have to add something called app transport security settings and allow arbitrary loads that means that the app can now connect to any url it goes outside of the default settings and there you go now you see the different recipes getting pulled and right now it's just the name of the base layer but obviously we can add all the other information that we need here and we can style it a little bit with a different type of font so it looks a little bit nicer i won't spend too much time on this because you it's it's up to your preferences how you style things but if if we run this now we should get a something that looks a little bit better although oh we it's not basically let's change it to seasoning and change the title and the headline so they're reversed now we should get something that looks a little bit better and so once we refresh we get the base layer and then the seasoning we can keep doing this and getting a new recipe so that's about it that's that's how you fetch an api in a very simple way there's a lot more things you can do with it like run all kinds of error catching and error handling and you can do just more and more features with it as you get more and more data with the api hopefully this video was helpful and if you liked it hit like and subscribe and come back for more videos soon

Channel: Krass Iankov

Views: 7,861

Keywords: tutorial, code, xcode, swiftui, swift, ui, ios, programming, project, uikit, data, swiftui api, JSON data, JSON, API, web, web api, fetch, collect, connect, decode, codingkeys, coding keys, decodable, codable, learn

Id: LENeTUulegU

Length: 8min 46sec (526 seconds)

Published: Tue Oct 13 2020