Flutter 嵌套 JSON 到列表视图
Posted
技术标签:
【中文标题】Flutter 嵌套 JSON 到列表视图【英文标题】：Flutter nested JSON to listview 【发布时间】：2019-07-04 06:05:44 【问题描述】：我是 Flutter 新手，如何将这个 JSON 对象解析为 listview？
// API 响应
"code": 200,
"message": "OK",
"payload":
"items": [
"package":
"order":
"orderer": "xxxx",
"cost":
"amount": "0.0",
"currency":
"code": "USD",
"name": "US Dollar",
"symbol": "$"
,
"order_number": "212121",
"tracking_code": "833939339",
"store":
"name": "ABC",
"id": 2,
"created_at": "2019-01-21T16:05:45+00:00"
,
"id": 74,
"created_at": "2019-02-08T11:55:14+00:00"
,
"weight":
"value": "12.9000",
"unit":
"name": "Kilogram",
"symbol": "kg",
"base": "1.00000000",
"id": 1
,
"length":
"value": "4.0000",
"unit":
"name": "Foot",
"symbol": "ft",
"base": "0.30480000",
"id": 7
,
"height":
"value": "34.4000",
"unit":
"name": "Millimetre",
"symbol": "mm",
"base": "0.00100000",
"id": 4
,
"width":
"value": "98.5600",
"unit":
"name": "Centimetre",
"symbol": "cm",
"base": "0.01000000",
"id": 2
,
"handlings": [
"description": "description",
"rate": "0.0200",
"icon": "icon-hazadous",
"id": 1
,
"description": "none ",
"rate": "0.0500",
"icon": "icon-none",
"id": 2
],
"description": "Item description",
"id": 113,
"created_at": "2019-02-08T11:55:14+00:00"
,
"owner":
"name": "Jo B",
"phone": "+1",
"blocked": false,
"activated": true,
"id": 98,
"created_at": "2019-01-21T16:05:46+00:00",
"updated_at": "2018-12-21T15:03:41+00:00"
,
"sender":
"name": "A B C",
"phone": "+1",
"blocked": false,
"activated": true,
"id": 98,
"created_at": "2019-01-21T16:05:46+00:00",
"updated_at": "2018-12-21T15:03:41+00:00"
,
"creator":
"name": "Jo B",
"phone": "+1",
"blocked": false,
"activated": true,
"id": 98,
"created_at": "2019-01-21T16:05:46+00:00",
"updated_at": "2018-12-21T15:03:41+00:00"
,
"source":
"contact_name": "Some name",
"contact_phone": "+1",
"name": "Some name",
"longitude": "-0.0",
"latitude": "1.1",
"id": 113,
"created_at": "2019-02-08T11:55:14+00:00"
,
"destination":
"contact_name": "xxxx",
"contact_phone": "323232232",
"name": "xxx ssss",
"longitude": "-0.0",
"latitude": "1.1",
"id": 113,
"created_at": "2019-02-08T11:55:14+00:00"
,
"fare":
"amount": "3185.7377",
"currency":
"code": "USD",
"name": "US Dollar",
"symbol": "$"
,
"type":
"name": "some name",
"code": "01",
"commission": "0.0",
"id": 2,
"created_at": "2019-01-21T16:05:45+00:00"
,
"freight":
"name": "Land",
"code": "Land",
"id": 1,
"created_at": "2019-01-21T16:05:45+00:00"
,
"status":
"name": "Pending",
"code": "PENDING",
"id": 1,
"created_at": "2019-01-21T16:05:45+00:00"
,
"payment":
"method":
"name": "None",
"code": "None",
"id": 1,
"created_at": "2019-01-21T16:05:46+00:00"
,
"status":
"name": "Unpaid",
"code": "UNPAID",
"id": 1,
"created_at": "2019-01-21T16:05:46+00:00"
,
"id": 113,
"created_at": "2019-02-08T11:55:14+00:00"
,
"id": 113,`enter code here`
"created_at": "2019-02-08T11:55:14+00:00"
],
"total": 34,
"offset": 34
Flutter 异步 http 请求以获取 API 数据，打印 JSON，但我似乎没有从 JSON 请求创建列表视图。
Future<Null> _fetchData() async
setState(()
loading = true;
);
final response =
await http.get("url" , headers: "someh header": "xxxx");
if (response.statusCode == 200)
final data = jsonDecode(response.body);
// request prints here`enter code here`
print(data);
);
【问题讨论】：
您好，欢迎来到 SO。您想在列表视图中具体显示什么？ 请订购(name..) , description , owner(name..) ,fare, (amount , amount, currency : code , symbol ) type (name, code ..) , status(name和代码），id 和 created_at 【参考方案1】：查看this blog。我认为它通过详细的步骤解释了您的问题的解决方案。 让我知道这是否适合您！ 我认为博客中针对您的问题的重点是 JSON 结构 #4 : 带有列表的嵌套结构。
从上述步骤中获得需要显示的对象List 后，您可以在ListView.builder 中使用此列表在您的应用中显示它们。
例子：
showList(List<Your_Model_Class_Name> list)
return ListView.builder(
shrinkWrap: true,
itemCount: list.length,
itemBuilder: (BuildContext context, int index)
/*Your widget code goes here instead of the ListTile*/
return ListTile(
title: Text('$list[index].title'),
);
);
您可以查看this link 以获取完整示例。让我知道这是否有帮助！
【讨论】：
谢谢@Siddharth Patankar，请问我如何“打包”订单等对象......我是新手。 我不清楚您所说的“包”到底是什么意思，但据我了解，您可以为每种数据类型设置单独的类，例如Orders 可以是一次类，Items可以是其他的。 ListView 可以是 ListView<Items> 或 ListView<Orders> 类型，具体取决于您需要显示的数据。
请帮我解决这个问题***.com/questions/60432234/…【参考方案2】：
你没有正确解码
final dynamic data = json.decode(response.body)
现在，当您打印它时，它会显示您想看到的内容。
【讨论】：
谢谢@Fellipe，请我是新手来扑灭以上是关于Flutter 嵌套 JSON 到列表视图的主要内容，如果未能解决你的问题，请参考以下文章
如何使用从 Flutter 中的 json 解析的嵌套映射列表中的函数创建对象