Introduction

In this lesson, we’ll create a MovieModel Dart class to parse the JSON response returned from API.

MovieModel class will have properties for each of the data['results'] JSON attributes returned as API response.

Revisiting TMDB API response structure

The JSON response returned from TMDB API looks like a huge blob of string. It could be hard to access the attributes by calling their names every time from code. A spelling mistake can make debugging very hard.

To avoid this problem, it makes sense to create a Dart object mapped to the response. We will call this class MovieModel.

Earlier, if you would want to access the “title” of the movie, you had to do data['results']['title'].

After mapping data to MovieModel class, you can access “title” as movieModelObj.title and so on.

TMDB API JSON response

{ 
   "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"
      }
   ]
}

Constructing MovieModel

Let’s create a MovieModel class to hold the API movie listing data set. MovieModel class will have properties for each attribute of the JSON response.

The MovieModel.fromJson()

MovieModel.fromJson(Map<String, dynamic> json) takes a JSON map and assigns corresponding values to the MovieModel object’s properties. Now, the movie object’s title can be accessed as movieObject.title.

MovieModel

class MovieModel {
 //Class fields for mapping to JSON properties 
 final int id;
 final num popularity;
 final int vote_count;
 final bool video;
 final String poster_path;
 final String backdrop_path;
 final bool adult;
 final String original_language;
 final String original_title;
 final List<dynamic> genre_ids;
 final String title;
 final num vote_average;
 final String overview;
 final String release_date;

 //Takes JSON formatted map, and returns `MovieModel` object. 
 MovieModel.fromJson(Map<String, dynamic> json)
     : id = json['id'],
       popularity = json['popularity'],
       vote_count = json['vote_count'],
       video = json['video'],
       poster_path = json['poster_path'],
       adult = json['adult'],
       original_language = json['original_language'],
       original_title = json['original_title'],
       genre_ids = json['genre_ids'],
       title = json['title'],
       vote_average = json['vote_average'],
       overview = json['overview'],
       release_date = json['release_date'],
       backdrop_path = json['backdrop_path'];
}