flutter fetching data from json “string is not a subtype of Iterable<dynamic>”

Question

I 'm trying to fetch data from my server but i'm stuck with an error of type. I've followed several tutorial and answer here but without success.

here are my classes where i got the error :

class BeachList{
  final List<Beach> beach;

  BeachList({this.beach});

  factory BeachList.fromJson(List<dynamic>parsedJson){
    List<Beach> beach= List<Beach>();
    beach=parsedJson.map((i)=>Beach.fromJson(i)).toList();

    return BeachList(
      beach: beach
      );
  }
}

class Beach {
  final int id; //id plage
  final String beachName; // nom de la plage
  final String commune;
  final String codedep;
  final int eval; // note d'évalutation sur la présence de sargasses
  final List<String> imageUrl;
  final DateTime dateMaj; //date de mise à jour
  final List<double> xyBeach;
  final String meteoval;
  final int sarguasseval;
  final List<String> listofcomment;


  Beach({this.id,  
      this.beachName,
      this.commune,
      this.codedep,
      this.eval,
      this.imageUrl,
      this.dateMaj,
      this.xyBeach,
      this.meteoval,
      this.sarguasseval,
      this.listofcomment});

  // la partie qui suit est rajoutée
  factory Beach.fromJson(Map<String, dynamic> json){
    return Beach(
      id: json['id'] as int,
      beachName: json['nompl'] as String,
      commune: json['commune'] as String,
      codedep: json['codedep'] as String,
      eval: json['eval'] as int,
      imageUrl: parseImage(json['imageurl']),
      dateMaj: json['datemaj'] as DateTime,
      xyBeach: parseCoord(json['coordpl']),
      meteoval: json[''] as String,
      sarguasseval: json['sargasse'] as int,
      listofcomment: parsecomment(json['comment']) 
    );
  }
  static List<String> parseImage(imageJson){
    List<String> imageUrl=List<String>.from(imageJson);// ERROR : "string is not a subtype of Iterable<dynamic>"
    return imageUrl;
  }

  static List<double> parseCoord(coordJson){
     List<double>xyBeach=List<double>.from(coordJson);
     return xyBeach;
  }

    static List<String> parsecomment(comJson){
    List<String> listofcomment=List<String>.from(comJson);
    return listofcomment;
  }
}

Json data :

[0{
"id":10,
"nompl":"Plage des Surfeurs",
"commune":"La Trinité",
"codedep":"MQ",
"coordpl":"[0:1]={14.76989155,-60.8994565957988}",
"imageurl":"[0:0]={https:\/\/www.aircaraibes.com\/sites\/default\/files\/img_p_text_image\/plus-belles-plages-de-martinique.jpg}",
"sargasse":"1",
"datemaj":null,
"meteoval":null,
"temperature":null,
"listofcomment":null,
"datepost":null}...]

the pb doesnt seems to come from Beachlist, i've commented this part of code and replace in my future etc with the Beach classe but then i had a similar error : string is not a subtype of List<String, dynamic> :/

I call the Json data with this Future :

Future<BeachList> fetchBeach() async {
  final response =
      await http.get("http://URLSERVER/mq_beach.php");
  if (response.statusCode == 200) {
    var parsed = jsonDecode(response.body);
    BeachList beach = BeachList.fromJson(parsed);
    print(beach.beaches[0].beachName);
    return beach;
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load data');
  }
}

Initialize Into initstate :

 Future<BeachList> parsedjson;
  @override
  void initState() {
    super.initState();
    parsedjson = fetchBeach();
  }

And display data :

 Scaffold(
        body: Column(
            children: BeachList.fromJson(parsedjson)//error
                .beaches
                .map((beach) => Text(beach.beachName))
                .toList()));

I get as error: The argument type 'Future' can't be assigned to the parameter type 'List'

Answer 1

Your parseImage and parseCoord are totally off.

I don't have enough information about the JSON format of your data. However, I hope that the following will put you on the correct path:

static List<String> parseImage(imageJson) {
  final regExp = RegExp(r"{(.*?)}");
  return regExp.allMatches(imageJson).map((match) => match.group(1)).toList();
}

static List<double> parseCoord(coordJson) {
  final regExp = RegExp(r"{(.*?)}");
  return regExp
    .allMatches(coordJson)
    .map((match) => match.group(1))
    .toList()
    .first
    .split(',')
    .map(double.parse)
    .toList();
}

I just get the data between {...}. Not sure it is correct, though.

Full source code of a sample with fake data

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:faker/faker.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: BeachList.fromJson(data)
            .beaches
            .map((beach) => Text(beach.beachName))
            .toList(),
      ),
    );
  }
}

class BeachList {
  final List<Beach> beaches;

  BeachList({this.beaches});

  factory BeachList.fromJson(List<dynamic> parsedJson) => BeachList(
      beaches: parsedJson.map((beach) => Beach.fromJson(beach)).toList());
}

class Beach {
  final int id; //id plage
  final String beachName; // nom de la plage
  final String commune;
  final String codedep;
  final int eval; // note d'évalutation sur la présence de sargasses
  final List<String> imageUrl;
  final DateTime dateMaj; //date de mise à jour
  final List<double> xyBeach;
  final String meteoval;
  final String sarguasseval;
  final List<String> listofcomment;

  Beach(
      {this.id,
      this.beachName,
      this.commune,
      this.codedep,
      this.eval,
      this.imageUrl,
      this.dateMaj,
      this.xyBeach,
      this.meteoval,
      this.sarguasseval,
      this.listofcomment});

  // la partie qui suit est rajoutée
  factory Beach.fromJson(Map<String, dynamic> json) {
    return Beach(
        id: json['id'] as int,
        beachName: json['nompl'] as String,
        commune: json['commune'] as String,
        codedep: json['codedep'] as String,
        eval: json['eval'] as int,
        imageUrl: parseImage(json['imageurl']),
        dateMaj: json['datemaj'] as DateTime,
        xyBeach: parseCoord(json['coordpl']),
        meteoval: json[''] as String,
        sarguasseval: json['sargasse'] as int,
        listofcomment: parsecomment(json['comment']));
  }
  static List<String> parseImage(imageJson) {
    final regExp = RegExp(r"{(.*?)}");
    return regExp.allMatches(imageJson).map((match) => match.group(1)).toList();
  }

  static List<double> parseCoord(coordJson) {
    final regExp = RegExp(r"{(.*?)}");
    return regExp
        .allMatches(coordJson)
        .map((match) => match.group(1))
        .toList()
        .first
        .split(',')
        .map(double.parse)
        .toList();
  }

  static List<String> parsecomment(comJson) {
    List<String> listofcomment = List<String>.from(comJson ?? []);
    return listofcomment;
  }
}

final random = math.Random();
final faker = Faker();

final data = List.generate(
  10,
  (index) => {
    'id': index,
    'nompl': faker.person.lastName(),
    'commune': faker.address.city(),
    'codedep': faker.randomGenerator.string(6, min: 6),
    'eval': random.nextInt(10),
    // "imageurl":"[0:0]={https:\/\/www.aircaraibes.com\/sites\/default\/files\/img_p_text_image\/plus-belles-plages-de-martinique.jpg}",
    'imageurl': '[0:0]={${faker.image.image()}},[0:1]={${faker.image.image()}}',
    'datemaj': faker.date.dateTime(),
    //"coordpl":"[0:1]={14.76989155,-60.8994565957988}",
    'coordpl':
        '[0:1]={${random.nextDouble() * 180 - 90},${random.nextDouble() * 360 - 180}}',
    //meteoval: json[''] as String,
    'sargasse': random.nextInt(10),
    'comment': List.generate(random.nextInt(3), (_) => faker.lorem.sentence()),
  },
);