Parsed Complex JSON Flutter - arrays

Question

I am trying to parse this complex JSON data into a Flutter application. I am able to get the JSON data successfully, but not able to display the data in the application. See the code and JSON data below.
What I am doing wrong?
JSON Data
{
"response": {
"cars": [
[
{
"id": 1,
"name": "Ford Mustang GT",
"class": "Muscle Car"
},
{
"id": 2,
"name": "Dodge Challenger",
"class": "Muscle Car"
},
{
"id": 3,
"name": "Chevrolet Camaro",
"class": "Muscle Car"
},
{
"id": 4,
"name": "Pontiac Firebird",
"class": "Muscle Car"
}
]
]
}
}
Data Model
class Cars {
Cars({
this.id,
this.name,
this.carClass,
});
int id;
String name;
String carClass;
factory Cars.fromJson(Map<String, dynamic> json) => Cars(
id: json["id"],
name: json["name"],
carClass: json["class"],
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"class": carClass,
};
}
API Service getting the JSON Data
class ApiService {
Future<List<Cars>> getCars() async {
http.Response response = await http.get('http://localhost:3000/response');
var body;
if (response.statusCode == 200) {
body = jsonDecode(response.body);
List<dynamic> carList = body['response'];
print(body);
List<Cars> res =
carList.map((dynamic item) => Cars.fromJson(item)).toList();
return res;
}
}
}
Display Data

Answer 1

You can help in the construction of the classes with this application. (https://app.quicktype.io/)
These are the classes that you must use for the obtained object. Be sure to change the name of the classes that you think are relevant.
class Response {
Response({
this.response,
});
final ResponseClass response;
factory Response.fromJson(Map<String, dynamic> json) => Response(
response: ResponseClass.fromJson(json["response"]),
);
Map<String, dynamic> toJson() => {
"response": response.toJson(),
};
}
class ResponseClass {
ResponseClass({
this.cars,
});
final List<List<Car>> cars;
factory ResponseClass.fromJson(Map<String, dynamic> json) => ResponseClass(
cars: List<List<Car>>.from(json["cars"].map((x) => List<Car>.from(x.map((x) => Car.fromJson(x))))),
);
Map<String, dynamic> toJson() => {
"cars": List<dynamic>.from(cars.map((x) => List<dynamic>.from(x.map((x) => x.toJson())))),
};
}
class Car {
Car({
this.id,
this.name,
this.carClass,
});
final int id;
final String name;
final String carClass;
factory Car.fromJson(Map<String, dynamic> json) => Car(
id: json["id"],
name: json["name"],
carClass: json["class"],
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"class": carClass,
};
}
Finally, replace this line:
body = jsonDecode(response.body);
List<dynamic> carList = body['response'];
print(body);
List<Cars> res =
carList.map((dynamic item) => Cars.fromJson(item)).toList();
with this:
return Response.fromJson(response.body);
and replace the data type that the function returns to Response.

Answer 2

You can also follow the official documentation for flutter Serializtion. It's good and also saves us from the hassle of creating the conversion HashMaps.