Search code examples
htmlflutterdartdart-html

_TypeError while mapping data from an API


I am trying to use this API. I am sendig a GET request and data I got looks like this;

{
    "info": {
        "count": 826,
        "pages": 42,
        "next": "https://rickandmortyapi.com/api/character?page=2",
        "prev": null
    },
    "results": [
        {
            "id": 1,
            "name": "Rick Sanchez",
            "status": "Alive",
            "species": "Human",
            "type": "",
            "gender": "Male",
            "origin": {
                "name": "Earth (C-137)",
                "url": "https://rickandmortyapi.com/api/location/1"
            },
            "location": {
                "name": "Citadel of Ricks",
                "url": "https://rickandmortyapi.com/api/location/3"
            },
            "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg",
            "episode": [
                "https://rickandmortyapi.com/api/episode/1",
                ...
            ],
            "url": "https://rickandmortyapi.com/api/character/1",
            "created": "2017-11-04T18:48:46.250Z"
        },
        //and the next character...

This is a page. So I am getting an object called "info" and a list of objects called "results" in a page.

I have a class for the objects of the list results. It looks like this;

class Character {
  final int id;
  final String name;
  final String status;
  final String species;
  final String type;
  final String gender;
  final CharacterLocation origin;
  final CharacterLocation location;
  final String image;
  final List<String> episode;
  final String url;
  final DateTime created;

  Character({
    required this.id,
    required this.name,
    required this.status,
    required this.species,
    required this.type,
    required this.gender,
    required this.origin,
    required this.location,
    required this.image,
    required this.episode,
    required this.url,
    required this.created,
  });

  factory Character.fromJson(Map<String, dynamic> json) => Character(
        id: json["id"],
        name: json["name"],
        status: json["status"],
        species: json["species"],
        type: json["type"],
        gender: json["gender"],
        origin: CharacterLocation.fromJson(json["origin"]),
        location: CharacterLocation.fromJson(json["location"]),
        image: json["image"],
        episode: List<String>.from(json["episode"].map((x) => x)),
        url: json["url"],
        created: DateTime.parse(json["created"]),
      );
}

class CharacterLocation {
  CharacterLocation({
    required this.name,
    required this.url,
  });

  String name;
  String url;

  factory CharacterLocation.fromJson(Map<String, dynamic> json) =>
      CharacterLocation(
        name: json["name"],
        url: json["url"],
      );

  Map<String, dynamic> toJson() => {
        "name": name,
        "url": url,
      };
}

so the results should be a list of objects which are type of this class named Character.

And here is my page model

import 'package:flutter_learn_practice/ram_character_models.dart';

class CharacterPage {
  Info info;
  List<Character> results;

  CharacterPage({
    required this.info,
    required this.results});
  
  factory CharacterPage.fromJson(Map<String, dynamic> json) => CharacterPage(
    info: Info.fromJson(json["info"]),
    results: List<Character>.from(json["results"].map((x) => x))
    );
}

class Info {
  int count;
  int pages;
  String? next;
  String? prev;

  Info({
    required this.count,
    required this.pages,
    this.next = '',
    this.prev = '',
  });

  factory Info.fromJson(Map<String, dynamic> json) => Info(
    count: json["count"],
    pages: json["pages"],
    next: json["next"],
    prev: json["prev"],
  );
}

I can succesfully use "info" and it's instances(i don't know if this is the right word) such as pages or count. But whenever i try to use instances of "results" I get the following error;

"Exception has occurred.

_TypeError (type '_Map<String, dynamic>' is not a subtype of type 'Character')"

I am stuck here for days, finally decided seek help.

I hope I was able to explain my problem clearly. Thanks in advance.


Solution

  • Instead of

    results: List<Character>.from(json["results"].map((x) => x))
    

    try this

    results: List.from(json["results"]).map((result) => Map<String, dynamic>.from(result)).map(Character.fromJson).toList()