android - Flutter display nested json in ListView return type String is not a subtype of type 'Map<String, dynamic>' in type cast

Question

I' m going on with my journey in Flutter. I' m able to display a simple json in a ListView. Now I' m trying with a json with nested objects but everytime I run the app I get the error

I' m generating the code for json model classes like suggested in Flutter official documentation.

The error seems to happen when I' m parsing the User. While debugging, I see that name and surname are successfully parsed, but when I jump to the details object in user.g.dart at the row:

json['details'] == null
        ? null
        : Details.fromJson(json['details'] as Map<String, dynamic>),

I see the error:

type String is not a subtype of type 'Map<String, dynamic>' in type cast

How can I solve this error, and how I can access all the nested objects for displaying them?

Here is the json I have to parse. I edited it, there is no arename field:

data.json

[
    {
        "name": "jhon",
        "surname": "walker",
        "details": "{"work":{"salary":"116","company":"evolution"},"address":{"street":"grand station","city":"salt lake"}}"    
    },
    {
        "name": "peter",
        "surname": "parker",
        "details": "{"work":{"salary":"116","company":"evolution"},"address":{"street":"grand station","city":"salt lake"}}"    
    }
]

Here there are my model classes:

user.dart

import 'package:json_annotation/json_annotation.dart';
import 'details.dart';

part 'user.g.dart';

@JsonSerializable(explicitToJson: true)
class User {
  User(this.name, this.surname, this.details);

  String name;
  String surname;
  Details details;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

user.g.dart

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'user.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

User _$UserFromJson(Map<String, dynamic> json) {
  return User(
    json['name'] as String,
    json['surname'] as String,
    json['details'] == null
        ? null
        : Details.fromJson(json['details'] as Map<String, dynamic>),
  );
}

Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>{
      'name': instance.name,
      'surname': instance.surname,
      'details': instance.details?.toJson(),
    };

details.dart

import 'package:json_annotation/json_annotation.dart';
import 'address.dart';
import 'work.dart';
part 'details.g.dart';

@JsonSerializable(explicitToJson: true)
class Details {
  Details(this.work, this.address);

  Work work;
  Address address;

  factory Details.fromJson(Map<String, dynamic> json) =>
      _$DetailsFromJson(json);
  Map<String, dynamic> toJson() => _$DetailsToJson(this);
}

details.g.dart

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'details.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

Details _$DetailsFromJson(Map<String, dynamic> json) {
  return Details(
    json['work'] == null
        ? null
        : Work.fromJson(json['work'] as Map<String, dynamic>),
    json['address'] == null
        ? null
        : Address.fromJson(json['address'] as Map<String, dynamic>),
  );
}

Map<String, dynamic> _$DetailsToJson(Details instance) => <String, dynamic>{
      'work': instance.work?.toJson(),
      'address': instance.address?.toJson(),
    };

work.dart

import 'package:json_annotation/json_annotation.dart';
part 'work.g.dart';

@JsonSerializable(explicitToJson: true)
class Work {
  Work(this.salary, this.company);

  String salary;
  String company;

  factory Work.fromJson(Map<String, dynamic> json) => _$WorkFromJson(json);
  Map<String, dynamic> toJson() => _$WorkToJson(this);
}

work.g.dart

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'work.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

Work _$WorkFromJson(Map<String, dynamic> json) {
  return Work(
    json['salary'] as String,
    json['company'] as String,
  );
}

Map<String, dynamic> _$WorkToJson(Work instance) => <String, dynamic>{
      'salary': instance.salary,
      'company': instance.company,
    };

address.dart

import 'package:json_annotation/json_annotation.dart';
part 'address.g.dart';

@JsonSerializable(explicitToJson: true)
class Address {
  Address(this.street, this.city);
  
  String street;
  String city;

  factory Address.fromJson(Map<String, dynamic> json) =>
      _$AddressFromJson(json);
  Map<String, dynamic> toJson() => _$AddressToJson(this);
}

address.g.dart

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'address.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

Address _$AddressFromJson(Map<String, dynamic> json) {
  return Address(
    json['street'] as String,
    json['city'] as String,
  );
}

Map<String, dynamic> _$AddressToJson(Address instance) => <String, dynamic>{
      'street': instance.street,
      'city': instance.city,
    };

Finally, here there is the application: main.dart

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'user.dart';
import 'details.dart';
import 'address.dart';
import 'work.dart';
import 'package:built_value/serializer.dart';
import 'dart:convert' as json;
import 'package:meta/meta.dart';
import 'package:built_value/built_value.dart';
import 'package:built_collection/built_collection.dart';
import 'dart:developer';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;


  Future<List<User>> getUsers() async {
    var url = "empty for now"; // here there will be the request now I' m using fake data
    //final response = await http.get(url);
    //final parsed = json.decode(response.body).cast<Map<String, dynamic>>();
    String data = r'''[
      {
        "name": "260",
        "surname": "430011",
        "areaName": "Camera1-Zone1",
        "details": "{"work":{"salary":"116","company":"evolution"},"address":{"street":"grand station","city":"salt lake"}}"
      },
      {
        "name": "260",
        "surname": "430011",
        "areaName": "Camera1-Zone1",
        "details": "{"work":{"salary":"116","company":"evolution"},"address":{"street":"grand station","city":"salt lake"}}"
      }
    ]''';
    final parsed = json.jsonDecode(data).cast<Map<String, dynamic>>();
    return parsed.map<User>((json) {
      return User.fromJson(json);
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("List"),
          backgroundColor: Colors.blue,
        ),
        body: Container(
          child: FutureBuilder<List<User>>(
            future: getUsers(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, int index) {
                    return ListTile(
                        title: Text(snapshot.data[index].name),
                        subtitle: Text(snapshot.data[index].surname));
                  },
                );
              } else if (snapshot.hasError) {
                return Center(
                  child: Text(snapshot.error.toString()),
                );
              }
              return Center(
                child: CircularProgressIndicator(),
              );
            },
          ),
        ),
      ),
    );
  }
}

Can you help me in solve this error and displaying all the nested data? Thank you!

Thank you for the help!

question from:https://stackoverflow.com/questions/65918826/flutter-display-nested-json-in-listview-return-type-string-is-not-a-subtype-of-t

Answer 1

 Future<List<User>> getUsers() async {
    var url = "empty for now"; 
   final response = await http.get(url);

     if (response.isEmpty) return null;


    Map<String, dynamic> data = json.decode(response);

    List<dynamic> list = data['data'];

     List<User> result =
     list.map((f) => User.fromJson(f)).toList();

    return result;
  }

if json datan is like this-->

   {
    "name": "260",
    "surname": "430011",
    "areaName": "Camera1-Zone1",
    "details": {"work":{"salary":"116","company":"evolution"},"address": 
      {"street":"grand station","city":"salt lake"}}
  },

your model will be like this:

 import 'dart:convert';
  User userFromJson(String str) => User.fromJson(json.decode(str));

  String userToJson(User data) => json.encode(data.toJson());

 class User {
  User({
    this.name,
    this.surname,
    this.areaName,
    this.details,
 });

String name;
String surname;
String areaName;
Details details;

 factory User.fromJson(Map<String, dynamic> json) => User(
    name: json["name"],
    surname: json["surname"],
    areaName: json["areaName"],
    details: Details.fromJson(json["details"]),
 );

 Map<String, dynamic> toJson() => {
    "name": name,
    "surname": surname,
    "areaName": areaName,
    "details": details.toJson(),
 };
}

class Details {
 Details({
    this.work,
    this.address,
 });

 Work work;
 Address address;

  factory Details.fromJson(Map<String, dynamic> json) => Details(
     work: Work.fromJson(json["work"]),
    address: Address.fromJson(json["address"]),
  );

  Map<String, dynamic> toJson() => {
    "work": work.toJson(),
    "address": address.toJson(),
   };
  }

  class Address {
  Address({
    this.street,
    this.city,
  });

String street;
String city;

factory Address.fromJson(Map<String, dynamic> json) => Address(
    street: json["street"],
    city: json["city"],
);

Map<String, dynamic> toJson() => {
    "street": street,
    "city": city,
  };
 }

class Work {
Work({
    this.salary,
     this.company,
});

String salary;
String company;

 factory Work.fromJson(Map<String, dynamic> json) => Work(

    salary: json["salary"],
    company: json["company"],
 );

  Map<String, dynamic> toJson() => {
    "salary": salary,
     "company": company,
   };
  }

or if this way:

   {
    "name": "260",
    "surname": "430011",
    "areaName": "Camera1-Zone1",
    "details": "{"work": 
  {"salary":"116","company":"evolution"},"address": 
   {"street":"grand station","city":"salt lake"}}"
   }

your model will be like this:

import 'dart:convert';

User userFromJson(String str) => User.fromJson(json.decode(str));

String userToJson(User data) => json.encode(data.toJson());

class User {
 User({
    this.name,
    this.surname,
    this.areaName,
    this.details,
});

String name;
String surname;
String areaName;
String details;

factory User.fromJson(Map<String, dynamic> json) => User(
    name: json["name"],
    surname: json["surname"],
    areaName: json["areaName"],
    details: json["details"],
);

Map<String, dynamic> toJson() => {
    "name": name,
    "surname": surname,
    "areaName": areaName,
    "details": details,
 };
}