json - 将 ison 转换为可读的飞镖
问题描述
我是 Flutter 框架的新手，并试图从 REST API 获取数据到我的应用程序并对其进行可视化。我收到 Jason 响应，我需要访问该 json 中的每个数据，您能帮我将此 json 转换为可读的 dart 格式，以便我可以访问每个数据吗？如何在颤振飞镖中处理这种转换？即使我至少可以在调试打印中看到它们也会很好。
非常感谢您的任何解释性贡献，
这是json
"success": true,
"pet": {
"id": 17,
"activity_level_name": "Low Activity (<1hr/day)",
"daily_allowance_guidelines_details": [
{
"name": "Muscle Meat",
"bones": true,
"percentage": 60
},
{
"name": "Organ Meat",
"bones": false,
"percentage": 10
},
{
"name": "Fruit and Veg",
"bones": false,
"percentage": 20
},
{
"name": "Bone",
"bones": true,
"percentage": 10
}
],
"eatbone": true,
"ideal_weight": 3.3,
"image": {
"url": null,
"thumb": {
"url": null
}
},
"name": "Roxy",
"nutrient_guideline_detail": [
{
"name": "Protein",
"amount": 9.99,
"unit": "g"
},
{
"name": "Crude fat",
"amount": 3.06,
"unit": "g"
},
{
"name": "Calcium/Phosphorus ratio",
"amount": 0.44,
"unit": "ratio"
},
{
"name": "Omega-3/6 ratio",
"amount": 0.06,
"unit": "ratio"
},
{
"name": "Omega-6",
"amount": 0.62,
"unit": "g"
},
{
"name": "Omega-3 excl. ALA and SDA",
"amount": 0.02,
"unit": "g"
},
{
"name": "Calcium",
"amount": 0.28,
"unit": "g"
},
{
"name": "Phosphorus",
"amount": 0.22,
"unit": "g"
},
{
"name": "Potassium",
"amount": 0.33,
"unit": "g"
},
{
"name": "Sodium (Na)",
"amount": 0.04,
"unit": "mg"
},
{
"name": "Magnesium",
"amount": 0.03,
"unit": "mg"
},
{
"name": "Iron",
"amount": 2.22,
"unit": "mg"
},
{
"name": "Copper",
"amount": 0.41,
"unit": "mg"
},
{
"name": "Manganese",
"amount": 0.28,
"unit": "mg"
},
{
"name": "Zinc (Zn)",
"amount": 4.44,
"unit": "mg"
},
{
"name": "Iodine",
"amount": 55.49,
"unit": "mcg"
},
{
"name": "Selenium",
"amount": 0.02,
"unit": "mcg"
},
{
"name": "Vitamin A",
"amount": 83.23,
"unit": "mcg"
},
{
"name": "Vitamin D",
"amount": 0.69,
"unit": "mcg"
},
{
"name": "Vitamin E",
"amount": 2.5,
"unit": "mg"
},
{
"name": "Thiamin (B1)",
"amount": 0.12,
"unit": "mg"
},
{
"name": "Riboflavin (B2)",
"amount": 0.29,
"unit": "mg"
},
{
"name": "Niacin (B3)",
"amount": 0.75,
"unit": "mg"
},
{
"name": "Pantothenic acid (B5)",
"amount": 0.67,
"unit": "mg"
},
{
"name": "Folate",
"amount": 11.98,
"unit": "mcg"
},
{
"name": "Choline",
"amount": 75.46,
"unit": "mg"
},
{
"name": "Vitamin C",
"amount": 0,
"unit": "mg"
}
],
"total_daily_calories": "221.94",
"weight": 3.1,
"breed": {
"id": 1,
"creator_id": null,
"updater_id": null,
"deleter_id": null,
"deleted_at": null,
"giant": null,
"name": "Abyssinian San Terrier",
"created_at": "2020-09-23T18:38:45.675+09:30",
"updated_at": "2020-09-23T18:38:45.675+09:30"
}
}
} ```
解决方案
您可以在下面复制粘贴运行完整代码
您可以先转换为模型，您可以查看完整代码以获取详细
代码片段
Payload payloadFromJson(String str) => Payload.fromJson(json.decode(str));
工作演示
完整代码
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
Payload payloadFromJson(String str) => Payload.fromJson(json.decode(str));
String payloadToJson(Payload data) => json.encode(data.toJson());
class Payload {
Payload({
this.success,
this.pet,
});
bool success;
Pet pet;
factory Payload.fromJson(Map<String, dynamic> json) => Payload(
success: json["success"],
pet: Pet.fromJson(json["pet"]),
);
Map<String, dynamic> toJson() => {
"success": success,
"pet": pet.toJson(),
};
}
class Pet {
Pet({
this.id,
this.activityLevelName,
this.dailyAllowanceGuidelinesDetails,
this.eatbone,
this.idealWeight,
this.image,
this.name,
this.nutrientGuidelineDetail,
this.totalDailyCalories,
this.weight,
this.breed,
});
int id;
String activityLevelName;
List<DailyAllowanceGuidelinesDetail> dailyAllowanceGuidelinesDetails;
bool eatbone;
double idealWeight;
Image image;
String name;
List<NutrientGuidelineDetail> nutrientGuidelineDetail;
String totalDailyCalories;
double weight;
Breed breed;
factory Pet.fromJson(Map<String, dynamic> json) => Pet(
id: json["id"],
activityLevelName: json["activity_level_name"],
dailyAllowanceGuidelinesDetails:
List<DailyAllowanceGuidelinesDetail>.from(
json["daily_allowance_guidelines_details"]
.map((x) => DailyAllowanceGuidelinesDetail.fromJson(x))),
eatbone: json["eatbone"],
idealWeight: json["ideal_weight"].toDouble(),
image: Image.fromJson(json["image"]),
name: json["name"],
nutrientGuidelineDetail: List<NutrientGuidelineDetail>.from(
json["nutrient_guideline_detail"]
.map((x) => NutrientGuidelineDetail.fromJson(x))),
totalDailyCalories: json["total_daily_calories"],
weight: json["weight"].toDouble(),
breed: Breed.fromJson(json["breed"]),
);
Map<String, dynamic> toJson() => {
"id": id,
"activity_level_name": activityLevelName,
"daily_allowance_guidelines_details": List<dynamic>.from(
dailyAllowanceGuidelinesDetails.map((x) => x.toJson())),
"eatbone": eatbone,
"ideal_weight": idealWeight,
"image": image.toJson(),
"name": name,
"nutrient_guideline_detail":
List<dynamic>.from(nutrientGuidelineDetail.map((x) => x.toJson())),
"total_daily_calories": totalDailyCalories,
"weight": weight,
"breed": breed.toJson(),
};
}
class Breed {
Breed({
this.id,
this.creatorId,
this.updaterId,
this.deleterId,
this.deletedAt,
this.giant,
this.name,
this.createdAt,
this.updatedAt,
});
int id;
dynamic creatorId;
dynamic updaterId;
dynamic deleterId;
dynamic deletedAt;
dynamic giant;
String name;
DateTime createdAt;
DateTime updatedAt;
factory Breed.fromJson(Map<String, dynamic> json) => Breed(
id: json["id"],
creatorId: json["creator_id"],
updaterId: json["updater_id"],
deleterId: json["deleter_id"],
deletedAt: json["deleted_at"],
giant: json["giant"],
name: json["name"],
createdAt: DateTime.parse(json["created_at"]),
updatedAt: DateTime.parse(json["updated_at"]),
);
Map<String, dynamic> toJson() => {
"id": id,
"creator_id": creatorId,
"updater_id": updaterId,
"deleter_id": deleterId,
"deleted_at": deletedAt,
"giant": giant,
"name": name,
"created_at": createdAt.toIso8601String(),
"updated_at": updatedAt.toIso8601String(),
};
}
class DailyAllowanceGuidelinesDetail {
DailyAllowanceGuidelinesDetail({
this.name,
this.bones,
this.percentage,
});
String name;
bool bones;
int percentage;
factory DailyAllowanceGuidelinesDetail.fromJson(Map<String, dynamic> json) =>
DailyAllowanceGuidelinesDetail(
name: json["name"],
bones: json["bones"],
percentage: json["percentage"],
);
Map<String, dynamic> toJson() => {
"name": name,
"bones": bones,
"percentage": percentage,
};
}
class Image {
Image({
this.url,
this.thumb,
});
dynamic url;
Thumb thumb;
factory Image.fromJson(Map<String, dynamic> json) => Image(
url: json["url"],
thumb: Thumb.fromJson(json["thumb"]),
);
Map<String, dynamic> toJson() => {
"url": url,
"thumb": thumb.toJson(),
};
}
class Thumb {
Thumb({
this.url,
});
dynamic url;
factory Thumb.fromJson(Map<String, dynamic> json) => Thumb(
url: json["url"],
);
Map<String, dynamic> toJson() => {
"url": url,
};
}
class NutrientGuidelineDetail {
NutrientGuidelineDetail({
this.name,
this.amount,
this.unit,
});
String name;
double amount;
Unit unit;
factory NutrientGuidelineDetail.fromJson(Map<String, dynamic> json) =>
NutrientGuidelineDetail(
name: json["name"],
amount: json["amount"].toDouble(),
unit: unitValues.map[json["unit"]],
);
Map<String, dynamic> toJson() => {
"name": name,
"amount": amount,
"unit": unitValues.reverse[unit],
};
}
enum Unit { G, RATIO, MG, MCG }
final unitValues = EnumValues(
{"g": Unit.G, "mcg": Unit.MCG, "mg": Unit.MG, "ratio": Unit.RATIO});
class EnumValues<T> {
Map<String, T> map;
Map<T, String> reverseMap;
EnumValues(this.map);
Map<T, String> get reverse {
if (reverseMap == null) {
reverseMap = map.map((k, v) => new MapEntry(v, k));
}
return reverseMap;
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<Payload> _future;
Future<Payload> getData() async {
String jsonString = '''
{"success": true,
"pet": {
"id": 17,
"activity_level_name": "Low Activity (<1hr/day)",
"daily_allowance_guidelines_details": [
{
"name": "Muscle Meat",
"bones": true,
"percentage": 60
},
{
"name": "Organ Meat",
"bones": false,
"percentage": 10
},
{
"name": "Fruit and Veg",
"bones": false,
"percentage": 20
},
{
"name": "Bone",
"bones": true,
"percentage": 10
}
],
"eatbone": true,
"ideal_weight": 3.3,
"image": {
"url": null,
"thumb": {
"url": null
}
},
"name": "Roxy",
"nutrient_guideline_detail": [
{
"name": "Protein",
"amount": 9.99,
"unit": "g"
},
{
"name": "Crude fat",
"amount": 3.06,
"unit": "g"
},
{
"name": "Calcium/Phosphorus ratio",
"amount": 0.44,
"unit": "ratio"
},
{
"name": "Omega-3/6 ratio",
"amount": 0.06,
"unit": "ratio"
},
{
"name": "Omega-6",
"amount": 0.62,
"unit": "g"
},
{
"name": "Omega-3 excl. ALA and SDA",
"amount": 0.02,
"unit": "g"
},
{
"name": "Calcium",
"amount": 0.28,
"unit": "g"
},
{
"name": "Phosphorus",
"amount": 0.22,
"unit": "g"
},
{
"name": "Potassium",
"amount": 0.33,
"unit": "g"
},
{
"name": "Sodium (Na)",
"amount": 0.04,
"unit": "mg"
},
{
"name": "Magnesium",
"amount": 0.03,
"unit": "mg"
},
{
"name": "Iron",
"amount": 2.22,
"unit": "mg"
},
{
"name": "Copper",
"amount": 0.41,
"unit": "mg"
},
{
"name": "Manganese",
"amount": 0.28,
"unit": "mg"
},
{
"name": "Zinc (Zn)",
"amount": 4.44,
"unit": "mg"
},
{
"name": "Iodine",
"amount": 55.49,
"unit": "mcg"
},
{
"name": "Selenium",
"amount": 0.02,
"unit": "mcg"
},
{
"name": "Vitamin A",
"amount": 83.23,
"unit": "mcg"
},
{
"name": "Vitamin D",
"amount": 0.69,
"unit": "mcg"
},
{
"name": "Vitamin E",
"amount": 2.5,
"unit": "mg"
},
{
"name": "Thiamin (B1)",
"amount": 0.12,
"unit": "mg"
},
{
"name": "Riboflavin (B2)",
"amount": 0.29,
"unit": "mg"
},
{
"name": "Niacin (B3)",
"amount": 0.75,
"unit": "mg"
},
{
"name": "Pantothenic acid (B5)",
"amount": 0.67,
"unit": "mg"
},
{
"name": "Folate",
"amount": 11.98,
"unit": "mcg"
},
{
"name": "Choline",
"amount": 75.46,
"unit": "mg"
},
{
"name": "Vitamin C",
"amount": 0,
"unit": "mg"
}
],
"total_daily_calories": "221.94",
"weight": 3.1,
"breed": {
"id": 1,
"creator_id": null,
"updater_id": null,
"deleter_id": null,
"deleted_at": null,
"giant": null,
"name": "Abyssinian San Terrier",
"created_at": "2020-09-23T18:38:45.675+09:30",
"updated_at": "2020-09-23T18:38:45.675+09:30"
}
}
}
''';
http.Response response = http.Response(jsonString, 200);
if (response.statusCode == 200) {
return payloadFromJson(response.body);
} else {
throw Exception();
}
}
@override
void initState() {
_future = getData();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: FutureBuilder(
future: _future,
builder: (context, AsyncSnapshot<Payload> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'${snapshot.error}',
style: TextStyle(color: Colors.red),
);
} else {
return Column(
children: [
Text("Name ${snapshot.data.pet.name}"),
ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data.pet
.dailyAllowanceGuidelinesDetails.length,
itemBuilder: (context, index) {
return Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.only(
top: 6.0,
bottom: 6.0,
left: 8.0,
right: 8.0),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(snapshot
.data
.pet
.dailyAllowanceGuidelinesDetails[
index]
.name
.toString()),
Spacer(),
Text(
snapshot
.data
.pet
.dailyAllowanceGuidelinesDetails[
index]
.percentage
.toString(),
),
],
),
));
}),
],
);
}
}
}));
}
}
推荐阅读
- python - 使用 for 循环将字符串风格化为 ASCII 艺术
- node.js - 在多个子域之间共享会话
- android - PendingInent 创建的 Android 任务无法再次使用 pendingIntent 启动另一个活动
- three.js - 在threeJs中的鼠标悬停对象周围画一条水平线
- openvpn - 查找 tun0 ip 地址
- javascript - 如何将原始 github 文件数据转换为 JSON
- python - 尝试导入错误：“withRouter”未从“react-router”导出
- hibernate - 如何在主表与其他 2 个表没有任何外键引用的 Hibernate 中连接 3 个表
- python - 'ManyToManyDescriptor' 对象在带有 PostgreSQL 的 Django 中没有属性 'add'
- reactjs - 如何在react.js中的recharts条形图中等间距（包括开始和结束）