Loading and Parsing JSON with HttpClient and Json.NET

In this lesson

  • Create Service
  • Create and use HttpClient to download string
  • Parse string with Newtonsoft Json.NET


Tap on time to skip ahead


Intro to HttpClient and Json.NET

So far in our application we’ve hard coded the breweries that are displayed in our brewery list. As you can see here. So how do we go about maybe loading data from a website into our application? On my Rendr server I have this JSON file that basically describes various things of our breweries – like the address, name, latitude, longitude, Twitter handle etc. I’d like to get this into our application and this load this into our list dynamically.


Using HttpClient to Consume Json

So what we’re gonna do is we’re going to create a service that’s gonna be responsible for downloading the contents of this file and parsing into models that we can use. One of things I need to do – is you need to make sure you have the Microsoft HttpClient nuget package installed. And you can find that through the nuget packages. And you want make sure you get the HttpClientLibraries nuget package. Once we have this in here, we can now say “var client = new HttpClient()” I’m going to set the base address to a URI. And the URI will basically be this part of our URL. And then we want to get the contents of this file. So I’m going to say “jsonContents = client.GetStringAsync” and we’re going to pass the file name as our URI. And we’ll need to put an await in here because it is async. And we’ll get this compile error. So we need to make our method here asynchronous. We do that by wrapping our payload in a Task object and also putting the async modifier in front of that. And so now I’m gonna put a break point here and I want to make sure that we get the JSON string as we wanted.

I’m going to go into our content page here and I’m going to say a “new breweries”… We’ll see we can’t access BreweriesService because I need to add a reference to it. So I’m going to double click here and make sure my services project is referred to. And now I’m going to say “new BreweriesService().GetBreweries()” And you’ll see we’re getting a warning that this is not asynchronous. Which we will just live with for now. And we’re gonna go ahead and run our application. And we got that runtime error because we need to make sure our iOS project has a reference to services. And so now. If we run this with the break point enabled, it will catch and if we look at jsonContents we will see a JSON string.


Parsing Json with Json.NET

So how do we go about getting that into a list of brewery models? Well the next package we’re going to add to our services is the Newtonsoft  Json.NET package. So I’m going to type Json.net in our nuget browser like that. And I’m also going to add this package to our models. The reason I’m adding it to our models is so I can decorate our class like so. “JsonProperty”. And I’m going to point it to the Json property name and also make sure I bring in the reference to the assembly. If we take a look, we’ll see we want the name to match up in our Json with this attribute. And now what I can do is that I can say “var breweries = JsonConvert.SerializeObject<List<Brewery>>(jsonContent)”  And I’m going to import in the Newtonsoft library. And I’m going to say list of Brewery. And then we can just pass and… And I forgot to say to “SerializeObject.” Again my put another break point here. And… Yeah this is again a similar issue that we had. Where I need to make sure that the Json.NET package is also in our iOS project. So now I run this everything should be cope ascetic. And if we take a look at breweries will say we have 16 in here.  And we have the name properly displayed.


Displaying Items in a List

So let’s go back and kind of do the last piece of connection here. So I’m gonna go into our BreweriesPage. I’m going to move all this code out of the constructor because I want this to be async. We’re going to do this “OnAppearing”. And I’m going to add async. And we’ll skip this warning here it says “lacking await operators.” Cool. And we’re going to now move this guy from here. I’ll get rid of these hard coded breweries. And instead we are just going to say “await new BreweryService.GetBreweries()” Now when we run this we should now see the breweries from the server. And we do. So you see it’s very simple with HttpClient and Json.NET to load Json from a server and parse it into the models for your application.