Parsing a List in Flutter / Dart

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();