Parsing JSON in Flutter - Free Flutter Course 2022

now the next step is to pass this data now we want to be able to use this data inside our flutter application and not have it something like this so how can we do that so once we are successfully able to print data to our terminal we want to be able to get the data and not just print it out but instead show it inside our flutter application so how can we do that how can we get uh the data that we have and try to show it inside our flutter application for that we need to pass this data now if you go down to this api response you'll see like this is just a big string a big json string we want to be able to parse uh this json string in flutter so i can search for parse json string in flutter and if you'll just quickly look for it you know you'll get a few articles on how you can pass uh it says like we need to use something called a json uh decode from this dart convert to serialize this json data how should we do that so i'll come back to it i'll have to import this dart convert convert which is made available by the dart team and i can come down to my function and just type in variable data equals to json decode which would take in some string source in our case the string is this response dot body that we are getting i can just paste it here and just do that now i want to let us say from our string that we are getting just print out this message let us try to print this out so how can we do that is type in print the print statement and they should take in data and inside these square brackets i want to pass in the key which in our case would be message now if you look at this particular string again what you'll notice is like this json uh data is was a complete string but once we decode it we'll get like a json we'll get it as map string dynamic so in this case all these keys are string values so this status is a string value this message is a string value and all the values corresponding to them for example in this first case 200 could be a dynamic value like it could be a number it could be a list as is this case or it could be anything like it could be string itself so this is a complete pair of map this is a map with string values and string keys and dynamic values so by using this square brackets we'll type in the name of the key that we want to access in our case it would be message this should print out the value which is success to the console so let us just save this file and you know just hot uh restart our application so so we'll get this button again and we'll also open up our terminal let us say new terminal for now and when we click on this uh go to next screen button let us check out our debug console and you'll see like we got the response status which we were already getting we also got the body which we had previously also got but we also printed out success to our console so we were actually able to decode our json response get a map from it and just pass that as in get the message and type in the key value and get the corresponding value for it so we were able to do that now we want to go a little bit further and try to you know get the code like we do don't just want uh this success value but let us try to print out the console let us try to print out the code now what you will notice is this code is the string key but the corresponding value is a list and inside this list the first element is what we are we want to try to access this value so how can we access this value so i'll come back instead of doing a data messages let us type in this key which is quotes i replace this message with quotes and since this is a list we want to get the zeroth element of this list so i'll type in zero and then once we get the zero element from this zeroth element we want to print out the text value so let us put in text here but let us make this a string now if i save this file and how to restart my application i'll again get like the button appear here let me click on it so let us see are we able to get the particular data yeah and we have this was our original response which had the code i keep guitars data and we were able to successfully print out the code to the terminal which is really cool now let us also try to get the name of this author so we have author right here so i'll come back to it i'll again copy this print statement that we have paste it here but inside of instead of using a text here i can just type in author replace this with author hot reload my application really quickly how to restart go to next screen once you do that you should get uh the quote printed out and also the name of the you know person like who who is the author of this particular code with that done we are again able to successfully pass and we also are able to get a particular value of this response

Channel: Aditya Thakur

Views: 1,855

Keywords: free course, flutter, app development, dart, cross platform, aditya thakur, latest course, programming, flutter setup, first flutter app, new project, flutter create, demo app, counter flutter, http, api, quote api flutter, parse data, json in flutter, dart convert, json decode, quotes from api

Id: oC0ska97rss

Length: 6min 15sec (375 seconds)

Published: Tue May 03 2022