如何用 Flutter 解析动态 JSON？

Question

我不明白如何解析从 firebase 获得的 JSON 文件。

这是 JSON 文件的格式

{
  "water" : {
    "-MnRJkFC3--ZOTmpF1xN" : {
      "milliliters" : 0.14,
      "time" : "16:26:25"
    },
    "-MnRJkZRwZYEInHfSKIY" : {
      "milliliters" : 48.83,
      "time" : "16:26:25"
    },
    "-MnRJksES18hY765rxxq" : {
      "milliliters" : 41.44,
      "time" : "16:26:25"
    },
    "-MnRJlDn6o4RmiGRJS-E" : {
      "milliliters" : 11.37,
      "time" : "16:26:25"
    }
  }
}

这就是我读取 JSON 文件的方式

Future loadSalesData() async {
  final String jsonString = await getJsonFromFirebase();
  final dynamic jsonResponse = json.decode(jsonString);
  for (Map<String, dynamic> i in jsonResponse)
    chartData.add(SalesData.fromJson(i));
  }

getJsonFromFirebase() 看起来像这样：

Future<String> getJsonFromFirebase() async {
  String url =
      "https://emailpassword. . .seio.com/water.json";
  http.Response response = await http.get(Uri.parse(url));
  return response.body;
}

当您单击链接时，它会将您发送到如下所示的 JSON 文件

{
    "-Mnbk2ye2P8bfpaQvNaU": {
        "milliliters": 0.0,
        "time": "18:07:00"
    },
    "-Mnbk6wd-wJze8P0JknK": {
        "milliliters": 0.12,
        "time": "18:07:00"
    },
    "-Mnbk7Ek629vgBu-MiLg": {
        "milliliters": 44.91,
        "time": "18:07:00"
    },
    "-Mnbk7bPuzqwsz9d5nm6": {
        "milliliters": 5.43,
        "time": "18:07:00"
    },
    "-Mnbk7v7MADi7YzEbeFI": {
        "milliliters": 24.54,
        "time": "18:07:00"
    },
    "-Mnbk8DGfqswckdsA1qP": {
        "milliliters": 47.58,
        "time": "18:07:00"
    },
    "-Mnbk8Xw2kJPxLrqCl6h": {
        "milliliters": 13.98,
        "time": "18:07:00"
    }
}

我得到错误

_InternalLinkedHashMap' 不是“Iterable”类型的子类型

Answer 1

根据您收到的 JSON 格式，json.decode 将返回一个Map<String, dynamic>（更具体地说是_InternalLinkedHashMap<String, dynamic> 专业化的一个实例）。此类型未实现 Iterable，因此您无法使用 for-in 构造直接对其进行迭代，而这正是您在运行时遇到的确切错误。

根据构建SalesData 实例所需的内容，您有两种选择：

• 迭代entries 属性，如果您需要每个项目的key（"-Mnbk2ye2P8bfpaQvNaU"、"-Mnbk6wd-wJze8P0JknK" 等），否则
• 如果不这样做，请遍历 values 属性

参赛作品

迭代：

for (MapEntry<String, dynamic> i in jsonResponse.entries) {
  chartData.add(SalesData.fromJson(i));
}

SalesData.fromJson:

SalesData.fromJson(MapEntry<String, dynamic> data) {
  id = data.key;
  milliliters = data.value['milliliters'];
  time = data.value['time'];
}

价值观

迭代：

for (Map<String, dynamic> i in jsonResponse.values) {
  chartData.add(SalesData.fromJson(i));
}

SalesData.fromJson:

SalesData.fromJson(Map<String, dynamic> data) {
  milliliters = data['milliliters'];
  time = data['time'];
}

类型推断

此外，无论您决定如何迭代 Map 实例，您都可以利用 Dart 的 type inference 稍微清理代码，因此（假设您正在迭代条目）loadSalesData 可能变为：

Future loadSalesData() async {
  final jsonString = await getJsonFromFirebase();
  final jsonResponse = json.decode(jsonString);

  for (final i in jsonResponse.entries) {
    chartData.add(SalesData.fromJson(i));
  }
}

而getJsonFromFirebase 可能变成：

Future<String> getJsonFromFirebase() async {
  final url = "http://localhost:8080/data.json";
  final response = await http.get(Uri.parse(url));
  return response.body;
}

Answer 2

似乎flutter 不理解jsonResponse 是iterable，因为您将其定义为dynamic。

调整定义告诉flutter它是一张地图：

final Map<String, dynamic> jsonResponse = json.decode(jsonString);