Parsing a List in Flutter / Dart - json

Question

I've a list that looks like this:
[{id: 1, user_id: 3, challenge_id: 1, created_at: 2019-06-09 06:36:39, image_caption: Enter your image caption here, image_path: https://res.cloudinary.com/dqrmgdpcf/image/upload/v1560062199/zex61jegvqwkevq6qrmd.jpg, image: null, user_upvoted: null, user_downvoted: null, score: 0}, {id: 2, user_id: 2, challenge_id: 1, created_at: 2019-06-12 09:17:07, image_caption: , image_path: https://res.cloudinary.com/dqrmgdpcf/image/upload/v1560331027/dj94sjzufx8gznyxrves.jpg, image: null, user_upvoted: null, user_downvoted: null, score: 0},
{id: 2, user_id: 3, challenge_id: 1, created_at: 2019-06-09 06:36:39, image_caption: Enter your image caption here, image_path: https://res.cloudinary.com/dqrmgdpcf/image/upload/v1560062199/zex61jegvqwkevq6qrmd.jpg, image: null, user_upvoted: null, user_downvoted: null, score: 0}, {id: 2, user_id: 2, challenge_id: 1, created_at: 2019-06-12 09:17:07, image_caption: , image_path: https://res.cloudinary.com/dqrmgdpcf/image/upload/v1560331027/dj94sjzufx8gznyxrves.jpg, image: null, user_upvoted: null, user_downvoted: null, score: 0},
{id: 3, user_id: 3, challenge_id: 1, created_at: 2019-06-09 06:36:39, image_caption: Enter your image caption here, image_path: https://res.cloudinary.com/dqrmgdpcf/image/upload/v1560062199/zex61jegvqwkevq6qrmd.jpg, image: null, user_upvoted: null, user_downvoted: null, score: 0}, {id: 2, user_id: 2, challenge_id: 1, created_at: 2019-06-12 09:17:07, image_caption: , image_path: https://res.cloudinary.com/dqrmgdpcf/image/upload/v1560331027/dj94sjzufx8gznyxrves.jpg, image: null, user_upvoted: null, user_downvoted: null, score: 0}]
So it's basically 3 objects.
The object model looks like this:
class ChallengeUpload {
int id = 0;
int userId = 0;
int challengeId = 0;
String createdAt = "";
String imageCaption = "";
String imagePath = "";
File image;
String userUpvoted = "";
String userDownvoted = "";
int score = 0;
ChallengeUpload();
ChallengeUpload.fromJson(Map<String, dynamic> json) {
id = json['id'];
userId = json['user_id'];
challengeId = json['challenge_id'];
createdAt = json['created_at'];
imageCaption = json['image_caption'];
imagePath = json['image_path'];
userUpvoted = json['user_upvoted'];
userDownvoted = json['user_downvoted'];
score = json['score'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['user_id'] = this.userId;
data['challenge_id'] = this.challengeId;
data['created_at'] = this.createdAt;
data['image_caption'] = this.imageCaption;
data['image_path'] = this.imagePath;
data['user_upvoted'] = this.userUpvoted;
data['user_downvoted'] = this.userDownvoted;
data['score'] = this.score;
return data;
}
}
I can't seem to figure out how to parse this list.
If it's just a single object that's being returned by my API I run it through this function:
currentChallenge = Challenge.fromJson(response.data);
How to do something similar but then end up with a UploadedChallengesList instead of a single object?
I've tried:
challengeUploads = json.decode(response.data).map<ChallengeUpload>((dynamic challengeUpload) => ChallengeUpload.fromJson(challengeUpload)).toList();
It'll print:
I/flutter ( 2660): type 'List<dynamic>' is not a subtype of type 'String'
My JSON:
{
id:1,
user_id:3,
challenge_id:1,
created_at:2019-06 -09 06:36:39,
image_caption:Enter your image caption here,
image_path: https://res.cloudinary.com/dqrmgdpcf/image/upload/v1560062199/zex61jegvqwkevq6qrmd.jpg,
image:null,
user_upvoted:null,
user_downvoted:null,
score:0
},
{
id:2,
user_id:2,
challenge_id:1,
created_at:2019-06 -12 09:17:07,
image_caption:,
image_path: https://res.cloudinary.com/dqrmgdpcf/image/upload/v1560331027/dj94sjzufx8gznyxrves.jpg,
image:null,
user_upvoted:null,
user_downvoted:null,
score:0
}
Edit: I found out it had to do with the library I'm using to do API calls. I use Dio and my code ended up looking like this:
Response response = await Dio().get(url,
options: Options(
headers: {"Authorization": accessToken},
responseType: ResponseType.json));
setState(() {
challengeUploads = response.data
.map<ChallengeUpload>((dynamic challengeUpload) =>
ChallengeUpload.fromJson(challengeUpload))
.toList();
});

Answer 1

How about this?
List<Map<String, dynamic>> jsonList = json.decode(response.data.toString()) as List;
List<ChallengeUpload> myList = jsonList.map(
(jsonElement) => ChallengeUpload.fromJson(jsonElement)
).toList();