JSON data into UITableView with images (Swift 4 + Xcode 9.0)

[Music] hello there welcome back to my doodle today I will show you how to insert JSON data into a table view along with that once the user clicks our cell we will display more details along with the image so here if I click this one here is the image here it's the hero name its primary attribute attack type and legs so don't worry if you don't know about this game it's called dota and it's an online game if you can just google it but the main part is the API so here I have the API and all the attributes which I can parse so I will be primarily using name name attribute and attack type along with image URL and legs so we will be downloading images from the URL right so that's something amazing as well so let's get started under main dodge story mode I will view it as iPhone X because why not it looks more amazing right - access cool so I will click here and click on this yellow button go to editor embed in a navigation controller so that we can always come back drag and drop here and arrange it I will throw in one more view controller here for our more attributes and first of all let's add table view to our main we see our main view control and not view controller I need a table view it will be from edge to edge full screen as always for the second view I will throw in an image I will add a label that's it so I'll just sighs this image to 150 by 150 and center it and let's show the second view controller so click on our main view controller yellow button drag here and say show and give this segue an identifier so go to identity inspector select this it will turn blue and give it name to details this is important okay don't skip this part and so I will just Center this one increase the size a little bit okay it works and center this one as well and bump up the size so I'll just duplicate this part duplicate duplicate this one as well so I guess doesn't matter how they are arranged because anyways it doesn't matter so this will be name this will be attribute this will be attack type so let's say attack and this will be the legs so let's create a file for our new view controller so right click here say new file and cocoa touch next so it will be here Oh view controller next save it over here and it's ER so let's get started by linking all this outlets to our view controllers so first I will assign this new view controller its file so go to identity inspector and start I will 0 view controller and hit enter and click on this round round button so let's start with image so this will be made view this will be named label so say name label attribute will be attribute Kleber attack will be attack label and legs will be legs labor and so we are done with the outlet part now we need to attach our table view as well so click on this yellow button with the table view so it should automatically show you your main bc so click and drag and say table view and hit enter so we are done with the connection parts let's go to our main view controller file i'll just say this one so we need to create a structure so that we can we can decode the data so right click new file it will be swift file say 0 stats and end up and here we will create a structure and name it hero stats and it will confirm to protocol the portable and open trackage and now we need to name this Constance who are constants wisely so they should match this name so just copy this one localize name paste it and this will be of type string next will be primary attribute so copy go to here go here and paste it and say string let this would be a tag type copy go here paste it this would be string as well now we need the legs and legs are legs copy paste and this is integer okay and we need last one which is image and images IMG so copy paste and this would be string we will change it to URL later so just hit command s and check if it's working so it's working so let's start by downloading our JSON data so first get rid of this and I will create a function to download a data our JSON data so download JSON and with no return type so first let's say like you are equal to URL open brackets string string string they will quote and copy this part this part will be in the description so do check it and so we have the URL so I will just start parsing the data we need the we need an array so let's create an array so he rose equal to re of hero stats new stats and open close let's say URL session got shared dot data task with completion handler URL will be our URL exclamation mark hit enter over here data will be data response will be response and error will be here so we will move further only if there is no error so we will check so if error is equal to equal to nil then we will do this part so women say self dot heroes equal do JSON decoder open/close packets dot decode and if you see if you notice this function throws okay so we need to wrap this around and do statement so hit enter so protocol will be just command Z and get rid of that and this will be here of stat not heroes it will be hero stack the structure we created okay dot cell and from data will be the data which we get from this part and we need to do it under do as I told you before so tab brackets we need to catch this as well so catch and say print [Applause] Jason error and we need to do one more thing so after this part you are the session if you click this one should highlight so you will type in resume don't forget this part so okay all we need to type in try as well so we are done so if you download the data we need to do something so in our case we need to reload our table view once the data is downloaded so I will make use of closures so under this parenthesis I will say completed completed and this will be of type of function function and I will just pass in completed over here completed over closed brackets and I will do this under we have to use this as well so hit enter say this patch Q dot and this will be a sync no dispatch got main dot s Inc and just this part and we'll be passing completed over here and this will show us an error and we will fix it so say fix and this will add escaping over here and let's come let's run the application by just calling this function under viewdidload and let me say download Jason and here we will print successful fuel it doesn't matter let's run that so and this is my previous part this one is installing sorry so we see it so we are getting the Jason so let's start by creating our table view so we already reference a table we're here so under viewdidload after the Jason is downloaded say table view dot delegate equal yourself and table view dot data source equal to self and here we need two protocols one is table view delegate and another one is tableview datasource okay Donna data source here and if you know we need two functions to confirm to our table view protocol one is number of rows in section and another one is cell for row at index path so number of rows in section will be returned a number of zeros so say heroes dot count and for sale we will create a cell so let's L equal to UI tableview cell open brackets we will use default so dot care fold and reuse identifier will be there we don't need it so let's say self dot text label dot text equal to heroes brackets index path dot row and dot localize name and this will be dot capitalized as well so it's not capitalized so it looks beautiful to return Sarah I guess we are done with this part so okay so once the data is downloaded here under Jason just say tableview Dodgeville load data and bam you will see the magic okay what do you need okay it's a closure we need to add self so play play play and we will be seeing a name of the heroes so here we have all the names so if we click nothing happens so now we need to work around this so stop the application go to a hero view controller here we will create one more variable and get rid of all this we just need viewdidload so here we will create a variable and video will be hero just hero and this will be of type hero status hero stats and a question not get rid of this so first of all let's get in the name label dot text equal to zero dot name I guess localize name so then we'll be attribute label dot text equal to 0 dot primary attribute then it will be attack type attack label dot text equal to 0 dot primary attack attack type and legs label dot text equal to and we will use string interpolation as this part was integer so hero dot legs and then so let's we need to pass the data as well so ok so end of view controller we need to use delegate method of table you which is dead select so that we know which row is selected so just start typing after self for row at index path here make some space and start typing did select and you will get this table view method hit enter here we will just say perform segue so boyar perform segue with identifier okay this identifier is two main dots to remove comes from here okay what happened zoom out open this so this part is the identifier I'll zoom in so this is the segue go to here go here and this is the identifier we needed we need this okay so copy and go back to your view controller let's slow it slow I am fast so paste it over here with identifier identifier and paste and sender will be self so now we will be now this will tell the view controller to change the view controller and now we need one more function to pass the data so say prepare for segue so here we will say if let destination is equal to Segway dot destination and we will down cast it as our hero view controller so hero view controller open parenthesis and here we will say destination dot hero I'll give you forgot to save the file so go back to your hero view controller and just say come on this and go back to your view controller and this time you should see hero equal to I will just pass in a pass it pass hero from my heroes array so hero bracket index part oh oh we will be using table view so table view got selected index path for selected row okay and dot row we will pass this make sure it's correct okay and let's run the app you need exclamation I know that so let's run the application and this time we will see extra details along with our table view I don't know what I said anyways if I select X we get X string we need to like unwrap this will do that so let's say crystal Maiden editor and we need to work with our image as well so stop the application let's get done with the integer part so hero view controller and here we will say let's say okay what we can do we can say let's just put an exclamation here and check if it works or not Oh what we can do what we can do food brackets exclamation over here and this time it should work I don't want to see option on this time yeah it works so let's start downloading the image so if we go back here from github I know from Stack Overflow I'll put I'll put the I'll put this link in the description as well and you can always get my project from my website so I'll just copy this extension this extension enables us to download images from Internet so and our under hero stats I'll just paste it so here and just save it you don't need to make any changes it's just extension of image view so go back to your hero view controller and under legs say image view dot download okay we need to save the file I guess yeah did we save the file yeah let's say come on s over here and go back and see mage view download Python why am I not getting it let's do one thing I'll take this extension and cut it and put it on over okay let's put it over here of U controller and now let's try doing it so download okay we get this now so it's download from okay so let's go back to our API so if you see it's not the complete link okay so if you copy this and paste it over here then you see the data so if you go back so this part is the base URL so just copy this base URL go back and let's create so let you are equal to let you are the string equal to and this will be our base URL and we will just add here our hero dot image and we will pass the string let's create image of this part exclamation so net URL equal to URL open brackets it will be spring and this will be URL string and bam exclamation Park and pass in the URL over here and we are done so let's run the application and what do you want okay cool sorry so I'll insert it over you don't need to insert it over here you have to insert it over here so let's run and this time let's see the magic so cool and here we have the image attributes everything out shaker phantom lancer so guys that's how you download images from the internet that's how you download Jason and put it inside table view so if you have any questions don't forget to Like just put it in comments if you like my video don't forget to thumbs up and don't forget to subscribe for future videos enjoy

Channel: PlanetVeracity

Views: 48,712

Keywords: yp.py, tutorial, Yash Patel, swift 4 tutorial, xcode 9, swift 4 api, swift 4 api calls, swift 4 json parse, swift 4 json example, swift 4 json decoding, swift 4 parsing, swift 4 json data in tableview, how to insert json data into tableview, swift 4 uitableview, swift 4 uitableviewcontroller, json swift 4, json swift 4 tutorial, api swift 4, json decoder swift 4, uitableview didselect, swift 4 imageview

Id: FNkS_QIngg8

Length: 20min 16sec (1216 seconds)

Published: Sat Nov 18 2017