All language subtitles for 002 Working with JSON_en

In the last section, we took a look at the API that we're going to use to fetch some images to show

on the screen to the user, and each time we make a request to get a individual image, we get back

a little bit of JSON data.

So we're going to very quickly look at a dart pad example and get a better idea of how to work with

JSON.

I'm going to flip on over to a dart pad instance.

Remember, you can get here by going to dart pad dot dart langue than inside of here.

I'm going to immediately create a main function.

Now, we're not going to actually fetch any data from dart pad, dart pad does not allow us to make

any requests.

So instead, I'm just going to manually write out a little snippet of JSON.

So make a variable called raw JSON.

I'll put down a set of single quotes, make sure you have single as well.

And then inside of here I'll put a object, I'll put a double quote for the user's property.

Make sure you got double quotes around your URL.

And then I'll just put some fake you URL in there, like HTP, Colon, Seglora JPEG.

And I'll close off the quote and then I will give this thing an ID property as well, so I'll put down

a comma.

Another quote around it, and I'll give it an idea of how about one that's reasonable?

So notice that I have double quotes around you, URL, double quotes around the actual URL, double

quotes around it, but then the number right here is a integer, so no quotes around it.

All right, so we can kind of imagine that maybe this is some Rodgerson data that we have fetch from

some remote API, so we need to now pass this JSON into something that we can work with, with darts.

In order to pass JSON, we're going to import a dart standard library package called Convert.

So at the top of the file, I'm going to add in an import statement and I'll say dart colon convert

like so.

So this is another type of import statement.

Remember, we've already seen import statements for importing from packages from files that you and

I write.

And this is the third type when we try to import from a dart standard library.

Within this convert package is a function called JSON or axemen, not a function, but an object, that

JSON object has functions tied to it that allow us to process projects on data like this right here.

So to take this data and turn it into something that we can actually access inside of dirt, we can

write out JSON, dot, decode, and then we'll pass in that rodgerson.

Now, when I do that, you possibly will see Jason light up in red right here and it might say undefined

name Jason, that is totally OK.

That's because Dart Pad is not properly picking up the import statement up here.

So if you have your code exactly like mine and you see Jason with the red underline totally fine, your

code is still going to work.

This is an error on dart pad side, not ours.

So we're going to take the results of that function, call and assign it to a variable that we'll call

past Jason like so.

And now we can print past Jason and if we run this example.

We will see something like this up here now, I'm sure that it looks almost identical to what we had

before, but is now inside of a data structure that we call a map, a map and dart is identical to a

object in JavaScript or a hash in Ruby or maps in Java, of course, as well.

So the past JSON object right here is a map data structure that has keys of Eurail and ID and then a

value of this URL right here and the integer one to look at values inside of this map object, we can

put on square brackets like so and then in a string, add in the property that we want to look up.

So if I want to retrieve the value of the U.S. looking right here, I can enter a new URL like so.

And now if I run this example, I'll see just that.

You are I'll get printed out.

And of course, we could do the I.D. as well.

And we get back one, OK, so that is handling Jason in a nutshell, and there's just one little thing

I want to mention here.

Remember, when we work with DART, it is a statically typed language and wherever possible, we really

like to add in types to describe the type of data that we are working with.

So in this case, when we pass this JSON data right here, DART has really no idea what we are getting

back.

So, yeah, Dart's going to know that.

Sure, it's a map, it contains some amount of information inside of it, but it doesn't really know

the different properties and the types of those different property values.

So Dart doesn't really know at compile time that your URL is going to contain a string and it is going

to contain an integer.

So one thing that you and I commonly do as developers is we create what's called a model class to give

DART a better idea of the type of data that's going to come back from our Jason endpoint.

Let's take a quick pause right here.

We'll come back in the next section and we'll talk about how we can create a model class to contain

the JSON data that we just fetch and give DART a better idea of the type of data that we are working

with.

So quick break and I'll see you in just a moment.