Retrieving and Deserializing JSON in Your Xamarin.Forms App

in another video we have looked at how to upload data to a rest api and in this video we are going to look at the direct opposite we are going to reach out to a server get that json data get that back to our app deserialize the json and show that in a collection view without further ado let's have a look [Music] to show you how this all works i'm going to use a file new xamarin forms application as with my other videos and for this video we're going to have a look at communicating with a web api and get data from it in json format so i've got another video on uploading data which should appear on your screen right now or find it in the video description so if you want to do uploads then find that one and if you want to download and get your json data keep watching this one so here we are going to update the ui and we are going to use a collection view here so if you haven't worked with xamarin forms for a while you want to use the collection view now and not so much the list view so we're going to start working with the collection view and of course here we're going to update the title to say get json data sample something like that so we're going to save that and we'll see that updating in a little bit so the other thing i did for this project is in our solution i added a little server project here which is just a file new asp.net core application which is a api so i've got one controller it generates a little bit of template code for us so here in the controller we have the weather forecast controller and what you can see happening in here is it has a couple of summaries hard coded and then here in the get endpoint it will just generate a couple of random weather forecasts um so five and um it will return that for us so you know this is a nice piece of data that resembles probably a lot of the scenarios that you are looking at so i'm just going to stick with this let's actually go over to a tool called postman which lets you create some http calls with get and post and all the things you got all the options to create http calls with this but we're just going to do a get to our local host and then the weather forecast endpoint so let's send that and we should be seeing here the results that are coming back are json and you can see it's a collection of um one two three four four or five i don't know uh of these results so it has a date it has the temperature in celsius and fahrenheit and it has a little summary thing so you know nothing too crazy but this should be enough to get us started and have a look and how we can incorporate that in our app we then switch back to visual studio here we go let's get that emulator here back so let's see this is this is the server code so this just works we're not going to touch this i'm going to assume that you have a little bit of knowledge on asp.net and so i'm showing you this with this little server project but of course it could be in real life that you do not have the code to the server that you're connecting to so don't worry about it just you know go into postman or even your browser as long it's a regular get request get that data out of there and you know you should be able to find out what the data is and play with that hopefully whenever it's a service like in a business environment you probably have some kind of specification or you can at least contact the developer of that service to give you a little bit more information in fact let's go back to postman for a little because um here in our solution we have this weather forecast object so this is what we can use in code so here you can see kind of like the same properties and ideally what you would do is take this object put it into a library that you can share between your server project and your app projects so you know then you have just this single object that you can use for all of these projects and you don't have to rewrite them but i'm going to show you a little other trick because if you do not have access to the code of the server then that is not something very useful so let's go back to postman for a little and we're going to copy this json here so i'm going to select all copy that and i'm going to go to a browser window here which has open app.quicktype.io you can find that link in the video description and what you can do here on the left is give your object a name so this is my object and we can just paste in here our json and what it will do is it will generate this class for us so that is pretty pretty cool if you're on visual studio 2019 for windows then this is also a functionality that is built in i think under the edit menu there is a option for like paste special or something and there you have an option to paste classes from json so you just have to have that json on your clipboard and it will paste a c-sharp class for you and i think you can do the same thing from xml so that is pretty cool as well but this website works for all the things so you can just paste in some json here and it will generate this class for you of course you probably want to you know do some some things the partials are probably not necessary but now we can just take this code and we can go back to our visual studio go in here to our solution let's stop running here for a second and go into our shared xamarin forms project and i'm going to add a new class and i'm going to also call this weather forecast there we go create that and i'm going to paste in the code that i just got so partial is not needed and this should be the weather forecast so um just import this newtonsoft json thing in here oh i don't have json installed so let's quickly add that nuget package here manage new get packages it should be right on top because it's still the most popular package to date so newtonsoft.json let's just add that to our little project here and if you're using probably newer versions of.net then json might be building by now so that is pretty cool too and i'm going to intellisense solve this by just adding the using newtonsoft.json here at the top or at least that is the theory there we go so let's save that and now you can see you know this is the kind of like the exact same object that we got in the server side so um it created this as a date time offset so it does it shouldn't really matter but let's make this a daytime as well so there we go and what are the other ones longs and ins so you know it can't really figure out all the types correctly but you know as long as they're kind of compatible and you know what kind of values you're expecting from the server then you should be good okay so we can now use this weather forecast and let's go to our little main page so we had a collection view and i'm not going to confuse you with any data binding in this sample i try to keep it as simple as possible so i'm just going to give this collection view a name forecasts let's call it like that so we will have a field in our code behind that we can reference this collection view with and let's actually go to our code behind of the main page here and in our main page we are going to get this data so what we want to do is probably create some kind of new method to do this or maybe maybe you know let's add a button in our main page as well so typically you probably might want to load some data whenever you load your application but in this case we are going to do a button clicked there we go button clicked and we are going to get our forecasts with this button so what you want to do is get a http client so http client because you know that is the thing that we are using to communicate with anything basically and um you have to add the right using here so using system.net.http and then it knows how to handle this so here we go typically probably whenever you have like a better architecture for your app then this probably is all handled by some kind of service class that is responsible for communicating with the external service and you know at the very minimum you want to put this http client on your page level or on your class level and not instantiate a new http client all the time of course but this is a piece of sample code so i don't care and for the http client we are going to basically say get async or we we can say get string async so here we go we are just going to get the json string um again this is like a a very simple [Music] example because you know this might not be the most efficient way to get the data because this this if whenever you get back like this huge string then you might maybe want to to stream your data a little bit so um you know if you're expecting like big chunks of data coming back then you might want to look into optimalization there but this is just to get you started on the idea on how to get this data from a server and what we want to do here is add the endpoint that we want to communicate to so i think that i see happening a lot of times is when we go back to postman and we copy this url here you know this should be the end point right because it's localhost so we're getting our data from there our our host is running on the localhost and that's where we should get it but that's not the way it entirely works at least not for like the local development because whenever you run localhost for postman you know postman and the server are now running on the same machine which is this mac machine but whenever you start running on our simulator then whenever you try to reach localhost then localhost is suddenly this iphone 12. that is not something that you want so you should figure out what your local ip address is on the network so one way to do that on your mac is just by going here to this wi-fi icon and open the network settings or here to your machine settings and open the system preferences and go to the network icon right here and then select connection that is active right now and here we can see that my ip address for this machine is 192.168.1.77 so whenever you are on a local network then the ip address will probably start with 192 168 or 10.0.0 that's typically the two address ranges that are machines on a local network so you have to make sure that your whenever you test this on a physical ios or android device you want to make sure that those are on the same network to test these things typically you're probably going to communicate with a service that is available on the internet so just put in the domain name there and you should be good to go as well but whenever you do like local development like this you probably want to do get this in here and paste this in there and the other thing that we um probably are going to worry about because um ios and android have this very strict uh which is a good thing strict policy now of you have to communicate over http and https so i'm going to communicate over http here and actually let's find out what the right port is for that because that's probably going to be different so for that we're going to go to our server project our properties and look into the launch settings so here you can see all kinds of settings for our server project and here you can see the application url is for the https is this port and http is 33c3 so let's validate with postman that that actually works so just do the http here and do 3333 send and see there we go that doesn't work for some reason so what i'm going to do is this is not running anyway so what i'm going to do is in our settings for the server oh that's why it's not running so i basically answered my own question that's probably why this is not working because the server is not running at this time so i'm going to assume that this endpoint works but just you know because i'm going to test this and this is a little bit of sample code i'm just going to remove this https endpoint here um it's quite a hassle to make your ios simulator and android emulator work with like local self-signed https certificates so you probably want to do this just connect to your http endpoint in the video about uploading something to a server i'm explaining how to get around the restrictions on your ios simulator and android emulator so i'm going to put the links in the video description if you need that to overcome these restrictions again let me emphasize that the best option to do is just you know make sure that you can actually test over https also for your local development but if you cannot do that if that's too much of a hassle then at least make sure that you do not put these restrictions or disabling these restrictions to connect to https in your production app that should be something that is only in your debugging version because else it will pose a security risk so watch out for that now let's finish our code here first so with this we are getting our actually this is async so i'm going to have to put in a weight here and a sync there so there we go and then our result string should come up in this variable the result json and what we need to do then is create a new variable with result forecasts and that will be a json convert so it doesn't know that yet because we are not using json here deserialize and we can say deserialize object and this is going to be a weather weather forecast array right because we got a collection so you can also make this a list or whatever you know it knows to deserialize to so this can be anything and it wants to know what string it needs to deserialize from so this is going to be the result json there we go and now it should um this variable should hold our result forecast so first you get the string from the server i need to change this into this one for http and then we're going to deserialize that in json and now we have in here are actual c sharp objects that we can use then in the forecast so this is our collection view we can say item source is result forecasts because you know this just takes a collection so an array list or observable collection if you're using mvvm and that kind of stuff this should be all to actually show our forecasts so let's just run our applications and see if that actually works so you might notice that i have multiple startup projects here i have another video on how to set that up so it should appear on your screen or find it in the video description below so you know how to do that as well for now just sit back and watch the magic do its work whenever i press the play button here it starts coming up and it will launch both the server and the ios simulator with our new app um so the thing that is probably going to happen is that you will see like the two string versions of our weather forecast apps so here is the browser's launch with some new json that you can see so let's switch back and here we don't see anything which is kind of interesting so okay that's interesting oh so i think so we had to of course push the button first and we don't see the button because i didn't give that any text so let's do that now load forecasts there we go save that and with hot reload you can see it updates automatically so that is very cool and now when i click load forecasts it gives me a exception because it could not connect to the server okay so that's interesting let's continue running this and let's go into postman and see why that is okay because it does actually get something http localhost 3333. oh so i know what's going on um for our server project we also need to specify that it listens to outside connections what we should do here i think is change this to zero zero zero zero there we go so not just localhost now it should also listen to like connections from the outside uh instead of just only things that are happening on localhost so whenever you're doing this kind of development then yeah you might want to do that and here we go now i've clicked the load forecasts and um yeah you can see that this shows only the kind of c sharp 2 string on your objects so that is not really what we want to see of course but you know we get the results they actually are loaded from our endpoint so that is pretty cool okay so we're done with this configuration here and so what we need to do for that is specify a data template so what we want to do here is collection view dot i'm going to quickly go over this with the data templates just to show you the result if you're interested in a little bit more about data templates item templates how that works please let me know in the comments and i'll be sure to make another video on that um just for now just watch the magic happen and here we go data template and i should be able to whoops specify a label here and give that a text with a binding we need to do then and i'm going to for instance show the summary here close that binding let's make this a little bit more um extensive then while we're here anyway so let's make this a stack layout so basically what you're doing here is you're specifying a template for like each record that is in this collection view that's in our json collection and i'm just going to you know you can do all kinds of fancy designs but i'm going to do a stack layout with two labels and i'm going to get the temperature in celsius because you know i live in europe that's the only thing that i understand so here we go and then when i rerun this then let's find out if this actually is the thing that we want to see here so here we go our app comes up it shows me the browser again so let's switch back to our visual studio and simulator and whenever i load this now you can see that it applied this template to each of the items and now we have the summary scorching freezing scorching hot mild just some random things that are coming back from our endpoint so this is the way that you want to get data from a web api from a rest endpoint and show them in a collection view in your app so this video was a bit messy there were some things going wrong but i intentionally left that in so you see how all these things work together that is not really polished so that whenever you run in one of these scenarios you know how to debug it so i hope you found this useful let me know in the comments what you think should it be more polished should it be a little bit more raw i'm curious for your feedback as always thank you for sticking with me let me know also in the comments what you want to see next because this was also a request from someone who wanted to see this like this video please like it if you haven't done so already subscribe to my channel and i'll be seeing you for my next video you

Channel: Gerald Versluis

Views: 6,967

Keywords: xamarin.forms, xamarin forms, xamarin json to listview, xamarin json, xamarin forms json, get json data from url, xamarin forms get json from url, deserialize json array c#, deserialize json c#, deserialize json c# using newtonsoft, xamarin forms collectionview, collectionview xamarin forms, Retrieving and Deserializing JSON, xamarin forms 101, xamarin 101, Xamarin tutorial, json xamarin, xamarin.forms 101, ios, xamarin httpclient, xamarin forms httpclient, xamarin

Id: rq3iok03q7E

Length: 20min 52sec (1252 seconds)

Published: Mon Nov 23 2020