Parsing JSON that has a nested array of objects in Dart?

Question

I am making a Flutter app and I am using The MovieDB api to get data. When I call the api and ask for a specific movie, this is the general format that I get back:

{
   "adult": false,
    "backdrop_path": "/wrqUiMXttHE4UBFMhLHlN601MZh.jpg",
    "belongs_to_collection": null,
    "budget": 120000000,
    "genres": [
        {
            "id": 28,
            "name": "Action"
        },
        {
            "id": 12,
            "name": "Adventure"
        },
        {
            "id": 878,
            "name": "Science Fiction"
        }
    ],
    "homepage": "http://www.rampagethemovie.com",
    "id": 427641,
    "imdb_id": "tt2231461",
    "original_language": "en",
    "original_title": "Rampage",
...
}

I have setup a model class for to parse this and the class is defined as such:

import 'dart:async';

class MovieDetail {
  final String title;
  final double rating;
  final String posterArtUrl;
  final backgroundArtUrl;
  final List<Genre> genres;
  final String overview;
  final String tagline;
  final int id;

  const MovieDetail(
      {this.title, this.rating, this.posterArtUrl, this.backgroundArtUrl, this.genres, this.overview, this.tagline, this.id});

  MovieDetail.fromJson(Map jsonMap)
      : title = jsonMap['title'],
        rating = jsonMap['vote_average'].toDouble(),
        posterArtUrl = "http://image.tmdb.org/t/p/w342" + jsonMap['backdrop_path'],
        backgroundArtUrl = "http://image.tmdb.org/t/p/w500" + jsonMap['poster_path'],
        genres = (jsonMap['genres']).map((i) => Genre.fromJson(i)).toList(),
        overview = jsonMap['overview'],
        tagline = jsonMap['tagline'],
        id = jsonMap['id'];
}
class Genre {
  final int id;
  final String genre;

  const Genre(this.id, this.genre);

  Genre.fromJson(Map jsonMap)
    : id = jsonMap['id'],
      genre = jsonMap['name'];
}

My issue is that I can't get the genre to parse properly from the JSON. When I get the JSON and pass it through my model class, I get the following error:

I/flutter (10874): type 'List<dynamic>' is not a subtype of type 'List<Genre>' where
I/flutter (10874):   List is from dart:core
I/flutter (10874):   List is from dart:core
I/flutter (10874):   Genre is from package:flutter_app_first/models/movieDetail.dart

I thought this would work because I have made a different class for the Genre object and passed in the JSON array as a list. I don't understand how List<dynamic> isn't a child of List<Genre> because doesn't the keyword dynamic imply any object? Does anyone know how to parse a nested JSON array into custom objects?

Answer 1

Try genres = (jsonMap['genres'] as List).map((i) => Genre.fromJson(i)).toList()

The issue: calling map without the cast makes it a dynamic call, which means the return type from Genre.fromJson is also dynamic (not Genre).

Take a look at https://flutter.io/json/ for some hints.

There are solutions, like https://pub.dartlang.org/packages/json_serializable, that makes this much easier

Answer 2

I think JSONtoDart Converter is very useful, Must try...

Answer 3

Here is an example that is simple and easy to understand.

With the JSON string as a nested object like this.

{
  "title": "Dart Tutorial",
  "description": "Way to parse Json",
  "author": {
    "name": "bezkoder",
    "age": 30
  

} } There are 2 classes we can think about:

• User for author
• Tutorial for {title, description, author}

So we can define a new Tutorial like this.

class User {
  String name;
  int age;
  ...
}

class Tutorial {
  String title;
  String description;
  User author;

  Tutorial(this.title, this.description, this.author);

  factory Tutorial.fromJson(dynamic json) {
    return Tutorial(json['title'] as String, json['description'] as String, User.fromJson(json['author']));
  }

  @override
  String toString() {
    return '{ ${this.title}, ${this.description}, ${this.author} }';
  }
}

The main() function now looks like the following code. import 'dart:convert';

main() {
  String nestedObjText =
      '{"title": "Dart Tutorial", "description": "Way to parse Json", "author": {"name": "bezkoder", "age": 30}}';

  Tutorial tutorial = Tutorial.fromJson(jsonDecode(nestedObjText));

  print(tutorial);

Check the result, you can see our nested object:

{ Dart Tutorial, Way to parse Json, { bezkoder, 30 } }

See that :Dart/Flutter parse JSON string into Nested Object

Answer 4

After receiving the response, first of all, you need to extract the arrays separately. Then you can easily map. This is the way I do it.

List<Attempts> attempts;
attempts=(jsonDecode(res.body)['message1'] as List).map((i) => Attempts.fromJson(i)).toList();
List<Posts> posts;
attempts=(jsonDecode(res.body)['message2'] as List).map((i) => Post.fromJson(i)).toList();

Refer below example.

   Future<List<Attempts>> getStatisticData() async {
    String uri = global.serverDNS + "PaperAttemptsManager.php";
    var res = await http.post(
      uri,
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, String>{
        'userName': widget.userId,
        'subject': widget.subjectName,
        'method': "GETPTEN",
      }),
    );

    if (res.statusCode == 200) {
      List<Attempts> attempts;
      attempts=(jsonDecode(res.body)['message'] as List).map((i) => Attempts.fromJson(i)).toList();
      return attempts;
    } else {
      throw "Can't get subjects.";
    }
  }

Model Class

class Attempts {
  String message, userName, date, year, time;
  int status, id, marks, correctAnswers, wrongAnswers, emptyAnswers;

  Attempts({
    this.status,
    this.message,
    this.id,
    this.userName,
    this.date,
    this.year,
    this.marks,
    this.time,
    this.correctAnswers,
    this.wrongAnswers,
    this.emptyAnswers,
  });

  factory Attempts.fromJson(Map<String, dynamic> json) {
    return Attempts(
      status: json['status'],
      message: json['message'],
      id: json['ID'],
      userName: json['USERNAME'],
      date: json['DATE'],
      year: json['YEAR'],
      marks: json['MARKS'],
      time: json['TIME'],
      correctAnswers: json['CORRECT_ANSWERS'],
      wrongAnswers: json['WRONG_ANSWERS'],
      emptyAnswers: json['EMPTY_ANSWERS'],
    );
  }
}