Flutter: Model for List of nested json response

Question

I am building a flutter app that gets a List of nested JSON as the response. I build the code as follows

This is the response I get

[
    {
        "machine_id": "SVB12-00001",
        "display_name": "Cuttack Rly Stn",
        "last_datetime": "2021-08-20T11:00:04.738681",
        "recharges": [],
        "lowStock": 0,
        "emptySlots": 0
    },
    {
        "machine_id": "SVB18-00001",
        "display_name": "Silicon Institute of Technology",
        "last_datetime": "2021-08-20T11:00:05.090551",
        "recharges": [],
        "lowStock": 0,
        "emptySlots": 0
    },
    {
        "machine_id": "SVB16-00002",
        "display_name": "Puri Rly Stn",
        "last_datetime": "2021-08-20T11:00:05.610391",
        "recharges": [],
        "lowStock": 0,
        "emptySlots": 0
    },
    {
        "machine_id": "SVB20-00001",
        "display_name": "Khurda Road Rly Stn",
        "last_datetime": "2021-08-20T11:00:05.844346",
        "recharges": [],
        "lowStock": 0,
        "emptySlots": 0
    },
    {
        "machine_id": "SVB19-00003",
        "display_name": "Bhubaneswar Rly Stn",
        "last_datetime": "2021-08-20T11:04:03.942040",
        "recharges": [
            {
                "prev_bal": "800",
                "recharged_amount": "2000",
                "recharge_date": "2022-07-20",
                "next_recharge_date": "2022-07-20"
            },
            {
                "prev_bal": "800",
                "recharged_amount": "2000",
                "recharge_date": "2022-07-19",
                "next_recharge_date": "2019-07-10"
            }
        ],
        "lowStock": 0,
        "emptySlots": 0
    }
]

This is the model I built in flutter

class MachineResponse {
  String name;
  String mid;
  String status;
  int lowStock;
  int emptySlot;
  String lastUpdate;
  List<Recharge> recharge;

  MachineResponse({
    required this.name,
    required this.mid,
    required this.status,
    required this.lowStock,
    required this.emptySlot,
    required this.lastUpdate,
    required this.recharge,
  });

  factory MachineResponse.fromJson(Map<String, dynamic> json) {
    return MachineResponse(
      name: json['display_name'],
      mid: json['machine_id'],
      status: "ONLINE",
      lowStock: 0,
      emptySlot: 0,
      lastUpdate: json["last_datetime"],
      recharge: jsonDecode(json['recharges'])
          .map((dynamic item) => Recharge.fromJson(item))
          .toList(),
    );
  }
}

class Recharge {
  String prevBalance;
  String rechageAmount;
  String avgConsumption;
  String meterReading;
  String rechageDate;
  String nextRecharge;

  Recharge({
    this.prevBalance = "",
    this.rechageAmount = "",
    this.avgConsumption = "",
    this.meterReading = "",
    this.rechageDate = "",
    this.nextRecharge = "",
  });

  factory Recharge.fromJson(Map<String, dynamic> json) {
    return Recharge(
        prevBalance: json['prev_bal'],
        rechageAmount: json['recharged_amount'],
        rechageDate: json['recharge_date'],
        nextRecharge: json['next_recharge_date']);
  }
}

import 'dart:convert';

import 'package:femikare_service/models/machine.dart';

import 'package:http/http.dart' as http;

var BASE_URL = "http://192.168.29.94:8000/service-api/machine";

Future<List<MachineResponse>> getData() async {
  final http.Response response =
      await http.get(Uri.parse("$BASE_URL?param=someparam"));

  if (response.statusCode == 200) {
    List<dynamic> body = jsonDecode(response.body);

    List<MachineResponse> machineData = body
        .map(
          (dynamic machine) => MachineResponse.fromJson(machine),
        )
        .toList();
    return machineData;
  } else {
    throw "Unable to retrieve Machines List";
  }
}

I am getting the error

E/flutter (15824): [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: type 'List' is not a subtype of type 'String' E/flutter (15824): #0 new MachineResponse.fromJson

Answer 1

in MachineRespons, change

recharge: jsonDecode(json['recharges'])
          .map((dynamic item) => Recharge.fromJson(item))
          .toList(),

to

recharge: json['recharges']
          .map((dynamic item) => Recharge.fromJson(item))
          .toList(), 

Answer 2

The problem here is, that I am assigning a List to List. So I changed the code as follows.

List<dynamic> recharge;

and in the MachineResponse factory

recharge: json['recharges']
    .map((dynamic item) => Recharge.fromJson(item))
    .toList(),

finally the Recharge factory as

  factory Recharge.fromJson(Map<dynamic, dynamic> json) {
    return Recharge(
        prevBalance: json['prev_bal'],
        rechageAmount: json['recharged_amount'],
        rechageDate: json['recharge_date'],
        nextRecharge: json['next_recharge_date']);
  }