How to parse Nested JSON in flutter?

143

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:

enter image description here

Share:
143
DASH
Author by

DASH

Updated on January 03, 2023

Comments

  • DASH
    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
    DASH about 2 years
    Thank you can you also tell me how to show anything from this data in Listview builder and list tile!
  • DASH
    DASH about 2 years
    Thanks for your response
  • Victor Eronmosele
    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.