close

how to deserialize a list of objects from json in flutter ?

Image for post
Photo by Scott Rodgerson on Unsplash

I’ll keep this short 🙂

I as of late began utilizing the freezed bundle by Remi Rousselet in my Flutter project. The bundle itself has exactly the intended effect, for the individuals who don’t have any acquaintance with: it’s a code generator for fixed associations and dataclasses in Dart. I can strongly suggest ResoCoder’s instructional exercise, this ought to raise you to an acceptable level.

Freezed coordinates truly well with the json_serializable bundle, which means we can compose negligible standard to get JSON objects from an API. For instance, we can burn-through the accompanying JSON object:

{
  name: "Jeff",
  age: 19,
}

utilizing this freezed object:

@freezed
abstract class Person with _$Person {
  
  const factory Person({
      @required String name,
      @required int age,  
  }) = _Person;
  factory Person.fromJson(Map<String, dynamic> json) =>  _$PersonFromJson(json);
}

This is in itself incredible. What we’ve accomplished is a changeless class with fairness overwritten so we have esteem equity. The JSON deserialization has just been overseen for us also.

In any case, consider the possibility that our information comes in as a rundown. Model:

[
  {
    name: "Jeff",
    age: 19,
  },
  {
    name: "Steph",
    age: 22,
  },
]

This is marginally more confounded, our fromJson manufacturing plant is anticipating a Map so we can’t pass it a List. Without freezed, numerous individuals prescribe emphasizing through the List to deserialize every individual article. Here is a post that discloses how to do that. Yet, with freezed we can include a decent hack to tidy things up a piece (proposed to me by the creator in this issue). So to deserialize the rundown we can just set up our freezed class this way:

@freezed
abstract class PersonList with _$PersonList {
  const factory PersonList({
    @required List<Person> personList,
  }) = _PersonList;
  factory PersonList.fromJson(Map<String, dynamic> json) =>   _$PersonListFromJson(json);
}

In any case, stand by a second… in the event that we attempt to instate this we’ll get a blunder disclosing to us that we can’t dole out a List to a Map, this is the place where our tricky hack comes in… when we introduce the article, we can do this:

final response = await getPersonListFromAPI();
final rawList = jsonDecode(response.body);
final personListEntity = PersonList.fromJson({'personList': rawList});

What’s more, we’re done, to get to the rundown you’ll need to call: personListEntity.personList, everything we’ve done is given the cluster a key to make it a JSON object. Note that the key needs to coordinate the boundary gave in the freezed class, eg. ‘personList’ => personList

It may feel like a hack, yet it’s cleaner than repeating through all the items to instate them… particularly realizing that json_serializable can deal with that for us.

Expectation this is helpful to certain individuals as I was unable to discover any data about this on the web 🙂

Thanks for reading this article ❤
If I got something wrong, Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.

Leave a Comment