Flutter中如何解析URL返回的JSON响应并提取指定字段展示

你当前解析失败的核心原因是对接口返回的JSON结构层级判断错误：目标URL返回的并非顶层JSON数组，而是嵌套多层对象的结构，直接将响应当作数组解析，一定会抛出type '_Map<String, dynamic>' is not a subtype of type 'List'这类类型转换异常。

分步实现流程 #

1. 导入必要的内置依赖
   在文件顶部引入Dart官方内置的JSON解析工具，无需额外安装第三方包：

   import 'dart:convert';
   import 'package:http/http.dart' as http;
   

2. 改造原请求逻辑，完成字段提取
   http请求返回的response.body是纯字符串格式，必须先通过jsonDecode()转换为Dart可操作的结构化Map，再按照接口实际嵌套层级逐层定位到目标字段的位置：

   // 定义变量存储提取到的目标字段，初始值为空
   String? verseContent;
   String? chapterNo;
   
   _makeGetRequest() async {
     var url = Uri.parse("http://quotes.rest/bible/vod.json");
     try {
       Response response = await http.get(url);
       // 先校验请求状态码，非200直接返回不做后续解析
       if (response.statusCode != 200) {
         ScaffoldMessenger.of(context).showSnackBar(
           SnackBar(content: Text("请求失败，状态码：${response.statusCode}"))
         );
         return;
       }
       // 第一步：将字符串格式的响应转为结构化Map
       final parsedResponse = jsonDecode(response.body) as Map<String, dynamic>;
       // 第二步：按接口实际嵌套层级逐层取值
       // 该接口的实际路径为： parsedResponse -> contents -> verses数组 -> 数组首个元素
       final versesArray = parsedResponse['contents']['verses'] as List;
       final verseItem = versesArray[0] as Map<String, dynamic>;
       // 第三步：提取目标字段值
       verseContent = verseItem['verse'];
       chapterNo = verseItem['chapter'];
       // 触发界面刷新，将提取到的值绑定到组件
       setState(() {});
     } catch (e) {
       // 捕获全流程异常，在SnackBar中输出具体错误方便定位
       ScaffoldMessenger.of(context).showSnackBar(
         SnackBar(content: Text("解析出错：$e"))
       );
     }
   }
   

3. 将提取到的字段绑定到文本组件展示
   在页面build方法中，加入判空逻辑避免初始空值导致的渲染异常：

   Center(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Text(
           "章节号：${chapterNo ?? '加载中...'}",
           style: TextStyle(fontSize: 18),
         ),
         SizedBox(height: 16),
         Text(
           "经文内容：${verseContent ?? '加载中...'}",
           style: TextStyle(fontSize: 16),
         ),
       ],
     ),
   )
   

新手常见踩坑提醒 #

• 不要直接照搬网上的JSON解析路径，你可以先把parsedResponse打印到控制台，对照实际输出的结构调整每一层的key拼写，避免因为key名写错（比如把contents写成content）抛出空值异常
• 每一层类型转换要匹配实际结构：返回对象就转Map，返回列表就转List，不要强行跨类型转换
• 网络请求和解析逻辑必须包裹try-catch块，避免请求超时、接口结构变动等场景下直接造成页面崩溃

内容的提问来源于stack exchange，提问作者Mehwish Mustafa