How to parse Nested JSON in flutter?
Following your json object structure, your fetchData
method should have the return type of Map<String, Map<String, dynamic>>
since it is a Map of a Map.
After updating the return type, the missing part of your code is the casting of your decoded response.body
to Map<String, Map<String, dynamic>>
.
See the solution below.
Solution:
Future<Map<String, Map<String, dynamic>>> fetchData() async {
final response =
await http.get(Uri.parse("https://api.wazirx.com/api/v2/tickers"));
if (response.statusCode == 200) {
final responseJson = (json.decode(response.body) as Map).map(
(key, value) => MapEntry(key as String, value as Map<String, dynamic>));
return responseJson;
} else {
throw Exception('Unexpected Error Occured!');
}
}
In a ListView Builder
You can use the method above to display the data in a ListView builder by using it in a FutureBuilder
like below:
FutureBuilder<Map<String, Map<String, dynamic>>>(
future: fetchData(),
builder: (BuildContext context,
AsyncSnapshot<Map<String, Map<String, dynamic>>> snapshot) {
if (snapshot.data == null) {
return const Center(child: CircularProgressIndicator());
}
final data = snapshot.data;
return ListView.builder(
itemBuilder: ((context, index) {
final item = data!.entries.elementAt(index);
final map = item.value;
final String baseUnit = map['base_unit'];
final String quoteUnit = map['quote_unit'];
final String high = map['high'];
final String low = map['low'];
return ListTile(
title: Text(baseUnit),
subtitle: Text('High-$high$quoteUnit Low - $low$quoteUnit'),
);
}),
itemCount: data!.entries.length,
);
},
),
Below is a screenshot of the UI generated from the above code:
DASH
Updated on January 03, 2023Comments
-
DASH about 1 year
Can anyone tell me how to parse this JSON in flutter.I'M stucked i created classes successfully but getting errors from parse method Here is The JSON
{ "btcinr": { "base_unit": "btc", "quote_unit": "inr", "low": "3001337.0", "high": "3145000.0", "last": "3107312.0", "type": "SPOT", "open": "3085453", "volume": "243.1121", "sell": "3114335.0", "buy": "3106628.0", "at": 1646663606, "name": "BTC/INR" } }
The method where i'm stuked and getting errors is
Future<List<Map<String, dynamic>>> fetchData() async { final response = await http.get(Uri.parse("https://api.wazirx.com/api/v2/tickers")); if (response.statusCode == 200) { final responseJson = json.decode(response.body); } else { throw Exception('Unexpected Error Occured!'); } }
This method is incomplete ,any help will be appreciated Thank You!
-
DASH about 2 yearsThank you can you also tell me how to show anything from this data in Listview builder and list tile!
-
DASH about 2 yearsThanks for your response
-
Victor Eronmosele about 2 years@DASH, I've updated my answer with a sample code showing how to use the
fetchData()
method in a ListView builder.