How to Deserialize a list of objects from json in flutter

This is my Model class -

  class SuggestedMovie {
  String title;
  String genres;
  int movieId;
  SuggestedMovie({this.title, this.genres, this.movieId});
  factory SuggestedMovie.fromJson(Map<dynamic, dynamic> parsedJson) {
    return SuggestedMovie(
      movieId: parsedJson['movieId'],
      title: parsedJson['title'] as String,
      genres: parsedJson['genres'] as String,
    );
  }
}

The one below is the code for Deserializing the JSON response into List

 suggestedMovie = (json.decode(jsonResponse.data) as List)
      .map((i) => SuggestedMovie.fromJson(i))
      .toList();

For example, every item in the array is a JSON object.

{
  "tags": [
    {
      "name": "dart",
      "quantity": 12
    },
    {
      "name": "flutter",
      "quantity": 25
    },
    {
      "name": "json",
      "quantity": 8
    }
  ]
}

We will need a class that represents the Tag item. So we create Tag class with 2 fields like this.

class Tag {
  String name;
  int quantity;

  Tag(this.name, this.quantity);

  factory Tag.fromJson(dynamic json) {
    return Tag(json['name'] as String, json['quantity'] as int);
  }

  @override
  String toString() {
    return '{ ${this.name}, ${this.quantity} }';
  }
}

The method factory Tag.fromJson(dynamic json) will parse a dynamic object into a Tag object. We will need it in the main() function, at the mapping step.

import 'dart:convert';

main() {
  String arrayObjsText =
      '{"tags": [{"name": "dart", "quantity": 12}, {"name": "flutter", "quantity": 25}, {"name": "json", "quantity": 8}]}';

  var tagObjsJson = jsonDecode(arrayObjsText)['tags'] as List;
  List<Tag> tagObjs = tagObjsJson.map((tagJson) => Tag.fromJson(tagJson)).toList();

  print(tagObjs);
}

Let me explain the code above. It’s simple. – jsonDecode() convert the 'tags' JSON object into a dynamic object. Then we use brackets ['tags'] to get JSON array inside it. – as List returns a List<dynamic> that we will use map() to change every dynamic item of the List into Tag object. – Finally, .toList() convert the Iterable result above into List<Tag> object.

Now, if we run the code, the result will be like this.

[{ dart, 12 }, { flutter, 25 }, { json, 8 }]

follow this step
step 1-> create model class (name as LoginResponce ) click here to convert json to dart .
step 2-> LoginResponce loginResponce=LoginResponce.fromJson(json.decode(response.body));

step 3 -> now you get your data in instence of model (as loginResponce ).

I always use this way with no problem;

List<MyModel> myModels;
var response = await http.get("myUrl");

myModels=(json.decode(response.body) as List).map((i) =>
              MyModel.fromJson(i)).toList();

You can also Do it like

  List< Item > itemsList= List< Item >.from(parsedListJson.map((i) => Item.fromJson(i)));

First, create a class that matches your json data, in my case, I create (generate) class named Img:

import 'dart:convert';

Img imgFromJson(String str) => Img.fromJson(json.decode(str));
String imgToJson(Img data) => json.encode(data.toJson());

class Img {
    String id;
    String img;
    dynamic decreption;

    Img({
        this.id,
        this.img,
        this.decreption,
    });

    factory Img.fromJson(Map<String, dynamic> json) => Img(
        id: json["id"],
        img: json["img"],
        decreption: json["decreption"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "img": img,
        "decreption": decreption,
    };
}

PS. You can use app.quicktype.io to generate your json data class in dart. then send your post/get to your server:

Future<List<Img>> _getimages() async {
    var response = await http.get("http://192.168.115.2/flutter/get_images.php");
    var rb = response.body;

    // store json data into list
    var list = json.decode(rb) as List;

    // iterate over the list and map each object in list to Img by calling Img.fromJson
    List<Img> imgs = list.map((i)=>Img.fromJson(i)).toList();

    print(imgs.runtimeType); //returns List<Img>
    print(imgs[0].runtimeType); //returns Img

    return imgs;
}

for more info see Parsing complex JSON in Flutter

Just another example on JSON Parsing for further clarification.

Let say we want to parse items array in our JSON Object.

factory YoutubeResponse.fromJSON(Map<String, dynamic> YoutubeResponseJson) 
 {

// Below 2 line code is parsing JSON Array of items in our JSON Object (YouttubeResponse)


var list = YoutubeResponseJson['items'] as List;
List<Item> itemsList = list.map((i) => Item.fromJSON(i)).toList();

return new YoutubeResponse(
    kind: YoutubeResponseJson['kind'],
    etag: YoutubeResponseJson['etag'],
    nextPageToken: YoutubeResponseJson['nextPageToken'],
    regionCode: YoutubeResponseJson['regionCode'],
    mPageInfo: pageInfo.fromJSON(YoutubeResponseJson['pageInfo']),

    // Here we are returning parsed JSON Array.

    items: itemsList);

  }