How to serialize api response contains list in flutter?

Question

This is the response I am getting from server. All the properties are String and int expect data. It is a list of objects. When serializing the response it shows error. Please explain what is wrong with my code. I am from javascript background. Serialization in flutter is different from javascript.

class ResponseModel {
  String image;
  int row;
  int column;
  int position;
  List<Data> data;

  ResponseModel({this.image, this.row, this.column, this.position});

  factory ResponseModel.fromJson(Map<String, dynamic> parsedJson) {
    return ResponseModel(
      image: parsedJson['image'],
      row: parsedJson['row'],
      column: parsedJson['column'],
      position: parsedJson['position'],
    );
  }
}

class Data {
  String imageUrl;

  Data({this.imageUrl});

  factory Data.fromJson(Map<String, dynamic> parsedJson) {
    return Data(imageUrl: parsedJson["imageUrl"]);
  }
}


    [
        {
            "type": "image",
            "row": 1,
            "column": 3,
            "position":"1",
            "data": [
                {
                    "imageUrl": "https://rukminim1.flixcart.com/flap/276/294/image/6dad06016c6ab319.jpg?q=90"
                },
                {
                    "imageUrl": "https://rukminim1.flixcart.com/flap/276/294/image/9ad209b0fc3d03e4.jpg?q=90"
                },
                {
                    "imageUrl": "https://rukminim1.flixcart.com/flap/276/294/image/405e10d01fae5aa5.jpg?q=90"
                }
            ]
        },
        {
            "type": "image",
            "row": 1,
            "column": 2,
            "position":"3",
            "data": [
                {
                    "imageUrl": "https://rukminim1.flixcart.com/flap/414/630/image/f186565389063212.jpg?q=90"
                },
                {
                    "imageUrl": "https://rukminim1.flixcart.com/flap/414/630/image/3eda035d946b0ebf.jpg?q=90"
                }
            ]
        },
        {
            "type": "image",
            "row": 1,
            "column": 1,
            "position":"2",
            "data": [
                {
                    "imageUrl": "https://rukminim1.flixcart.com/flap/1187/636/image/4436d492e2563998.jpg?q=90"
                }
            ]
        }
    ]

      Future<dynamic> getData() async {
        final response = await http.get("https://api.myjson.com/bins/1g4o04");

        final parsedJson = json.decode(response.body);

        final finalResponse = ResponseModel.fromJson(parsedJson);

        print(finalResponse);

        setState(() {
          data = parsedJson;
        });
      }

Error image

Does this answer your question? dart JSON String convert to List String — Kirill Matrosov
– Kirill Matrosov, Commented Feb 26, 2020 at 14:14

Omar Mahmoud · Accepted Answer · 2020-02-26 14:00:51Z

0

You can use this tool and select dart Language

answered Feb 26, 2020 at 14:00

Omar Mahmoud

3,0381 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dheepak S Over a year ago

Hi @Omar Mahmoud, the tool was helpful. Thank you

Neeraj · Accepted Answer · 2020-02-26 14:23:43Z

0

Its because the response is a JSON array. Which means json.decode(response.body) returns a List<dynamic> and hence the variable parsedJson is List. You're trying to pass this List as a parameter to the ResponseModel.fromJson(Map<String, dynamic>) method which accepts a Map as the parameter.
In simple words, you're trying to pass a List where a Map is expected.

answered Feb 26, 2020 at 14:23

Neeraj

2,5972 gold badges28 silver badges42 bronze badges

Comments

Suraj Rao · Accepted Answer · 2023-01-04 12:00:50Z

0

Future<dynamic> getData() async {
    final response = await http.get("https://api.myjson.com/bins/1g4o04");

    final parsedJson = json.decode(response.body);
    List<ResponseModel> responseList = <ResponseModel>[];
    parsedJson.foreach((element) {
    responseList.add(ResponseModel.fromJson(element));
    }) 
    ///Response list will have your data 
    print(responseList);    
  }

Your code should be something like this

edited Jan 4, 2023 at 12:00

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Jan 4, 2023 at 11:54

Talha Shaikh

1

Collectives™ on Stack Overflow

How to serialize api response contains list in flutter?

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related