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