如何修复Flutter期望类型为Map的值，但得到类型为List的值

Question

我正在开发一个web应用程序，使用flutraweb和restfulapi作为后端。因此，我尝试从api中获取数据，使用颤振模型对其进行序列化，然后返回结果。

问题是，我得到了这个结果

Expected a value of type 'Map<String, dynamic>', but got one of type 'List<dynamic>'

如何解决这个问题？

这是我的颤动代码：

模型

// To parse this JSON data, do
//
//     final medicalRecordsModel = medicalRecordsModelFromJson(jsonString);

import 'dart:convert';

class MedicalRecordsModel {
  MedicalRecordsModel({
    this.id,
    this.category,
    this.fileName,
    this.dateTimestamp,
    this.description,
    this.upload,
    this.patientName,
    this.age,
    this.address,
    this.userId,
    this.patientId,
    this.isActive,
  });

  final String id;
  final String category;
  final String fileName;
  final String dateTimestamp;
  final String description;
  final String upload;
  final String patientName;
  final String age;
  final String address;
  final dynamic userId;
  final int patientId;
  final bool isActive;

  factory MedicalRecordsModel.fromJson(Map<String, dynamic> json) {
    return MedicalRecordsModel(
      id: json["id"],
      category: json["category"],
      fileName: json["fileName"],
      dateTimestamp: json["dateTimestamp"],
      description: json["description"],
      upload: json["upload"],
      patientName: json["patientName"],
      age: json["age"],
      address: json["address"],
      userId: json["userId"],
      patientId: json["patientId"],
      isActive: json["isActive"],
    );
  }
}

API连接

import 'dart:convert';
import 'dart:developer';
import 'dart:async';
import 'package:app/src/constants/medical_records.dart';
import 'package:app/src/models/medical_records/medical_records.dart';
import 'package:app/src/pages/Medical-Records/medical_record.dart';
import 'package:http/http.dart' as http;

class MedicalRecordsManager {
  var client = http.Client();
  var url = ConstantMedicalRecords.medical_records_api;

  Future<MedicalRecordsModel> getRecords() async {
    var url = ConstantMedicalRecords.medical_records_api;
    log('$url');
    try {
      final response = await client.get(url);
      if (response.statusCode == 200) {
        return MedicalRecordsModel.fromJson(jsonDecode(response.body));
        // print(recordsModel);
      }
    } catch (Exception) {
      print(Exception);
      print("Error occured");
    }
  }
}

这是我想得到的JSON数据

 {
        "id": "103",
        "category": "DOCUMENT",
        "fileName": "Check Up",
        "dateTimestamp": "2021-02-1012:59:46",
        "description": "string",
        "upload": "String",
        "patientName": "1",
        "age": "25",
        "address": "Earth",
        "userId": null,
        "patientId": 12,
        "isActive": true
    }

请帮我拿这个。

Answer 1

此代码将按照您的预期工作：

import 'package:json_helpers/json_helpers.dart';

void main() {
  // responseBody is the same response.body

  // When response is a list of objects
  final list = responseBody1.jsonList((e) => MedicalRecordsModel.fromJson(e));
  var obj = list[0];
  print(obj.category);
  print(obj.fileName);

  // When response is an object
  obj = responseBody2.json((e) => MedicalRecordsModel.fromJson(e));
  print(obj.category);
  print(obj.fileName);
}

final responseBody1 = '''
[
   {
      "id":"103",
      "category":"DOCUMENT",
      "fileName":"Check Up",
      "dateTimestamp":"2021-02-1012:59:46",
      "description":"string",
      "upload":"String",
      "patientName":"1",
      "age":"25",
      "address":"Earth",
      "userId":null,
      "patientId":12,
      "isActive":true
   }
]''';

final responseBody2 = '''
{
   "id":"103",
   "category":"DOCUMENT",
   "fileName":"Check Up",
   "dateTimestamp":"2021-02-1012:59:46",
   "description":"string",
   "upload":"String",
   "patientName":"1",
   "age":"25",
   "address":"Earth",
   "userId":null,
   "patientId":12,
   "isActive":true
}''';

class MedicalRecordsModel {
  final String id;

  final String category;
  final String fileName;
  final String dateTimestamp;
  final String description;
  final String upload;
  final String patientName;
  final String age;
  final String address;
  final dynamic userId;
  final int patientId;
  final bool isActive;
  MedicalRecordsModel({
    this.id,
    this.category,
    this.fileName,
    this.dateTimestamp,
    this.description,
    this.upload,
    this.patientName,
    this.age,
    this.address,
    this.userId,
    this.patientId,
    this.isActive,
  });

  factory MedicalRecordsModel.fromJson(Map<String, dynamic> json) {
    return MedicalRecordsModel(
      id: json['id'] as String,
      category: json['category'] as String,
      fileName: json['fileName'] as String,
      dateTimestamp: json['dateTimestamp'] as String,
      description: json['description'] as String,
      upload: json['upload'] as String,
      patientName: json['patientName'] as String,
      age: json['age'] as String,
      address: json['address'] as String,
      userId: json['userId'] as String,
      patientId: json['patientId'] as int,
      isActive: json['isActive'] as bool,
    );
  }
}

输出：

DOCUMENT
Check Up
DOCUMENT
Check Up

也就是说，当响应是对象列表时：

final list = response.body.jsonList((e) => MedicalRecordsModel.fromJson(e));

当响应是对象时：

final object = response.body.json((e) => MedicalRecordsModel.fromJson(e));

如果你不知道结果是什么，那么你可以尝试两种方法。

response.body.json((e) => Model.fromJson(e));
response.body.jsonList((e) => Model.fromJson(e));

如果您已经解码了JSON字符串并希望转换结果（或部分结果），则可以使用以下方法：

如果解码的值的类型为Map：

final object = value.json((e) => Model.fromJson(e));

如果解码的值的类型为List：

final objects = value.json((e) => Model.fromJson(e));

Answer 2

更改getRecords如下所示

Future<MedicalRecordsModel> getRecords() async {
    var url = ConstantMedicalRecords.medical_records_api;
    log('$url');
    try {
      final response = await client.get(url);
      if (response.statusCode == 200) {
        return MedicalRecordsModel.fromJson(jsonDecode(response.body)[0]);
        // print(recordsModel);
      }
    } catch (Exception) {
      print(Exception);
      print("Error occured");
    }
  }

我认为jsonDecode给出了映射列表，因此您的json映射是该列表的第一个元素。

Answer 3

你可以这样做

MedicalRecordsModel.fromJson(jsonDecode(response.body) as Map<String, dynamic>);