ListView返回类型String中的Flutter显示嵌套json不是类型'Map< String，dynamic>'的子类型铸型 [英] Flutter display nested json in ListView return type String is not a subtype of type 'Map<String, dynamic>' in type cast

查看：59
本文介绍了ListView返回类型String中的Flutter显示嵌套json不是类型'Map< String，dynamic>'的子类型铸型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在继续我在Flutter的旅程.我可以在ListView中显示一个简单的json.现在，我正在尝试使用带有嵌套对象的json，但是每次运行应用程序时，都会收到错误消息

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

我正在为json模型类生成代码，如Flutter官方文档中所建议的那样.

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

当我解析用户时，似乎发生了错误.调试时，我看到该名称和姓氏已成功解析，但是当我跳转到user.g.dart行中的detail对象时:

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>),

我看到了错误:

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?

这是我必须解析的json.我对其进行了编辑，没有名称字段:

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

data.json

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\"}}"    
    }
]

这里有我的模型课:

user.dart

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

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

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

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

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

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

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

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,
    };

最后，这里是应用程序:main.dart

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!

谢谢您的帮助！

推荐答案

我找到了解决方案.

我正在使用的模型是:

model.dart

model.dart

import 'dart:convert';

List<User> userFromJson(String str) =>
    List<User>.from(json.decode(str).map((x) => User.fromJson(x)));

String userToJson(List<User> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.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,
      };
}

Details DetailsFromJson(String str) => Details.fromJson(json.decode(str));

String DetailsToJson(Details data) => json.encode(data.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,
      };
}

主要代码是:main.dart

The main code is: 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\"}}"
      }
    ]''';
    List<User> users= userFromJson(res);
    return users;
  }

  @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(),
              );
            },
          ),
        ),
      ),
    );
  }
}

这篇关于ListView返回类型String中的Flutter显示嵌套json不是类型'Map&lt; String，dynamic&gt;'的子类型铸型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆