showing key along side data json - json

Question

Hi I have a dynamic json the details in it changes in every product so I wanna show keys along side their corresponding data
any example would be great I am struggling with this. sample json in appDetails wanna show all the keys like systemoverview,benefits, mainFeatures and their data.
In next product it will be changed but appdetails will remain same.
import 'package:flutter/material.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MaterialApp(home: TestScreen()));
}
class TestScreen extends StatefulWidget {
const TestScreen({Key? key}) : super(key: key);
#override
State<TestScreen> createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> {
List<AppDetails>? details = [];
final Map<String, dynamic> json = {
"name": "TestingApp",
"category": "Production",
"subcategory": "Productivity",
"imageUrl": "Testing-Banner.jpg",
"logo": "PI.png",
"description": "Testing is an application for easy & effective Inspection",
"appDetails": [
{
"systemOverview": "https:url.com",
"multiDeviceSupport": [
{"item1": "Multi-Device"},
{"item2": "Multi-Lingual"},
{"item3": "Multi-Database"}
],
"mainFeatures": [
{"feature1": "Testing"},
{"feature2": "Ease"},
{"feature3": "Select failure "}
],
"benefits": [
{"benfits1": "Easy & quick solution "},
{"benefits2": "Go paperless "},
personnel’s"}
]
}
]
};
#override
void initState() {
super.initState();
final data = AppDetailModel.fromJson(json);
details = data.appDetails;
List<AppDetails>? parseCategorizedBooksJson(Map<String, dynamic> json) => [
for (var detai in json.values)
for (var de in detai) AppDetails.fromJson(de)
];
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.blue,
title: const Text('Home'),
),
body: SizedBox(
child: ListView.builder(
itemCount: details?.length,
itemBuilder: (context, index) {
final detail = details?[index];
return buildProduct(detail);
},
),
),
);
}
}
Widget buildProduct(AppDetails? detail) => Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: (detail?.benefits ?? []).map((e) {
final index = (detail?.benefits ?? []).indexOf(e);
return Row(
children: [
SizedBox(width: 20, child: Text('${index + 1}.')),
Text('${e.label}'),
],
);
}).toList(),
),
);
class AppDetailModel {
String? name;
String? category;
String? subcategory;
String? imageUrl;
String? logo;
String? description;
List<AppDetails>? appDetails;
AppDetailModel(
{this.name,
this.category,
this.subcategory,
this.imageUrl,
this.logo,
this.description,
this.appDetails});
AppDetailModel.fromJson(Map<String, dynamic> json) {
name = json['name'];
category = json['category'];
subcategory = json['subcategory'];
imageUrl = json['imageUrl'];
logo = json['logo'];
description = json['description'];
if (json['appDetails'] != null) {
appDetails = <AppDetails>[];
json['appDetails'].forEach((v) {
appDetails!.add(AppDetails.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = <String, dynamic>{};
data['name'] = name;
data['category'] = category;
data['subcategory'] = subcategory;
data['imageUrl'] = imageUrl;
data['logo'] = logo;
data['description'] = description;
if (appDetails != null) {
data['appDetails'] = appDetails!.map((v) => v.toJson()).toList();
}
return data;
}
}
class AppDetails {
String? systemOverview;
List<Label>? multiDeviceSupport;
List<Label>? mainFeatures;
List<Label>? benefits;
AppDetails(
{this.systemOverview,
this.multiDeviceSupport,
this.mainFeatures,
this.benefits});
AppDetails.fromJson(Map<String, dynamic> json) {
systemOverview = json['systemOverview'];
if (json['multiDeviceSupport'] != null) {
multiDeviceSupport = <Label>[];
json['multiDeviceSupport'].forEach((v) {
multiDeviceSupport!.add(Label.fromJson(v));
});
}
if (json['mainFeatures'] != null) {
mainFeatures = <Label>[];
json['mainFeatures'].forEach((v) {
mainFeatures!.add(Label.fromJson(v));
});
}
if (json['benefits'] != null) {
benefits = <Label>[];
json['benefits'].forEach((v) {
benefits!.add(Label.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = <String, dynamic>{};
data['systemOverview'] = systemOverview;
if (multiDeviceSupport != null) {
data['multiDeviceSupport'] =
multiDeviceSupport!.map((v) => v.toJson()).toList();
}
if (mainFeatures != null) {
data['mainFeatures'] = mainFeatures!.map((v) => v.toJson()).toList();
}
if (benefits != null) {
data['benefits'] = benefits!.map((v) => v.toJson()).toList();
}
return data;
}
}
class Label {
String? label;
Label({this.label});
Label.fromJson(Map<String, dynamic> json) {
label = json['label'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = <String, dynamic>{};
data['label'] = label;
return data;
}
}
```
currently What I am doing right now

Answer 1

so taking your example:
final map = {
"appDetails": [
{
"systemOverview": "https:url.com",
"multiDeviceSupport": [
{"label": "Multi-Device"}
],
"mainFeatures": [
{"label": "Testing"}
],
"benefits": [
{"label": "Easy & quick solution "},
{"label": "Go paperless "}
]
}
]
};
we can get both the key and value using the entries like this:
map!["appDetails"]![0].entries.forEach((e) {
print("${e.key}, ${e.value}");
});
This code will print this result:
systemOverview, https:url.com
multiDeviceSupport, [{label: Multi-Device}]
mainFeatures, [{label: Testing}]
benefits, [{label: Easy & quick solution }, {label: Go paperless }]
it will print the key along with it's value, you can use this sample to achieve your result.

Answer 2

print all keys of JSON data
var data = convert.jsonDecode(response.body);
print(data.keys.toList());

Answer 3

you can do somthing like this
Column(children:
data['appDetails']
.map(
(system) => Column(
children: system.entries
.map<Widget>(
(systemeEntry) => systemeEntry.value is String
? Row(
children: [
Text("${systemeEntry.key}: "),
Expanded(child: Text(systemeEntry.value)),
],
)
: systemeEntry.value is List
? Row(
children: [
Text(" ${systemeEntry.key} => "),
Expanded(
child: Column(
children:
systemeEntry.value is List
? systemeEntry.value
.map<Widget>(
(detail) => Column(
children: [
...detail
.entries
.map(
(detailEntry) =>
Row(
children: [
Text(" ${detailEntry.key}: "),
Text(detailEntry.value),
]),
)
.toList()
]),
)
.toList()
: [const SizedBox()],
),
)
],
)
: const SizedBox(),
)
.toList(),
),
)
.toList(),
)