Parsing JSON
In this lesson, we discuss converting and parsing a network response into JSON in detail.
We'll cover the following
Introduction
In the last lesson, you learned how to receive the HttpResponse
response from API. In this lesson, you’ll learn to convert responses into JSON, and parse them to render in Flutter ListView.
Parsing JSON
Dart provides the dart:convert
library to parse JSON data. The apiResponse
is the response returned from http.get(apiEndPoint)
. The json.decode()
method takes the response’s body
to parse it into Dart data structures.
//importing the Dart package
import 'dart:convert';
//Parsing API's HttpResponse to JSON format
json.decode(apiResponse.body)
The dart:convert
library
The dart:convert
library parses the JSON response into the Dart collection Map
.
The json.decode(apiResponse.body)
method returns Map
as Future
.
Futures are the objects that return the results of the asynchronous operations.
The getJson()
method fetches the apiResponse
object of type HttpResponse
. The json.decode()
method takes apiResponse
's body using apiResponse.body
, and converts it into JSON format.
static Future<Map> getJson() async {
//API Key: To be replaced with your key
final apiKey = "YOUR_API_KEY";
//URL endpoint to fetch popular movies
final apiEndPoint =
"http://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&sort_by=popularity.desc";
//Making Http request
final apiResponse = await http.get(apiEndPoint);
//Parsing data using `dart:convert` library
return json.decode(apiResponse.body);
}
Let’s store the response of the getJson()
method in a json
variable like below:
//Store JSON data returned into `data` variable
var data = await getJson();
Let’s check out the API’s JSON response structure next.
JSON formatted response
The data
variable holds the JSON formatted response like below. The JSON returned from the API look like this:
{
"page":1,
"total_results":10000,
"total_pages":500,
"results":[
{
"popularity":407.45,
"vote_count":2334,
"video":false,
"poster_path":"\/xBHvZcjRiWyobQ9kxBhO6B2dtRI.jpg",
"id":419704,
"adult":false,
"backdrop_path":"\/5BwqwxMEjeFtdknRV792Svo0K1v.jpg",
"original_language":"en",
"original_title":"Ad Astra",
"genre_ids":[
12,
18,
9648,
878,
53
],
"title":"Ad Astra",
"vote_average":6,
"overview":"The near future, a time when both hope and hardships drive humanity to look to the stars and beyond. While a mysterious phenomenon menaces to destroy life on planet Earth, astronaut Roy McBride undertakes a mission across the immensity of space and its many perils to uncover the truth about a lost expedition that decades before boldly faced emptiness and silence in search of the unknown.",
"release_date":"2019-09-17"
}
]
}
The “results” property in the JSON response above holds the array of movie listings as JSON objects.
Since the data
variable stores the JSON response above, data[‘results’]
would give the array of popular movies as an array of JSON objects.
We will use this array of JSON objects to retrieve the movie information, and eventually render in Flutter applications.
Each JSON object of this array contains the movie information that needs to be displayed in each row of the app’s movies list. In our app, we’re interested in displaying the title, description and poster image of the movie. We can use the following attributes from the above JSON object(s) to get that information.
-
title: name of the movie
-
overview: description of description
-
poster_path: relative path for movie’s poster image at TMDB’s servers
Get hands-on with 1200+ tech skills courses.