How do I iterate JSON Map and retrieve key-value results in flutter Dart?

Question

I am working on json in flutter dart.

    final response = http.get('url'). 
response.body returns this json String format: String stringJson = {"symbols_returned":147,"base":"USD","data":{"AED":"3.672940","AFN":"75.617000","ALL":"109.780000","AMD":"490.740000","ANG":"1.797350","AOA":"313.147500","ARS":"37.864500","AUD":"1.408450","AWG":"1.800000","AZN":"1.702500","BAM":"1.727050","BBD":"2.004250","BCH":"0.008196","BDT":"83.950500","BGN":"1.726900","BHD":"0.377470","BIF":"1800.000000","BMD":"1.000000","BND":"1.357650","BOB":"6.919100","BRL":"3.729400","BSD":"1.001300","BTC":"0.000278","BWP":"10.474000","BZD":"2.018350","CAD":"1.328050","CDF":"1631.000000","CHF":"1.000300","CLF":"0.025048","CLP":"658.100000","CNY":"6.746600","COP":"3121.850000","CRC":"612.970000","CUP":"1.001395","CVE":"97.373000","CZK":"22.793600","DJF":"177.720000","DKK":"6.589100","DOP":"50.646500","DZD":"118.840000","EGP":"17.609500","ETB":"28.413000","ETH":"0.008377","EUR":"0.883085","FJD":"2.125900","GBP":"0.773115","GEL":"2.645000","GHS":"5.276200","GIP":"0.770005","GMD":"49.550000","GNF":"9127.200000","GTQ":"7.765200","GYD":"209.360000","HKD":"7.846950","HNL":"24.439500"}
    }


    Map mapJson = json.decode(response.body) returns the following format: 
    {symbols_returned: 147, base: USD, data: {AED: 3.672940, AFN: 75.617000, ALL: 109.780000, AMD: 490.740000, ANG: 1.797350, AOA: 313.147500, ARS: 37.864500, AUD: 1.408450, AWG: 1.800000, AZN: 1.702500, BAM: 1.727050, BBD: 2.004250, BCH: 0.008196, BDT: 83.950500, BGN: 1.726900, BHD: 0.377470, BIF: 1800.000000, BMD: 1.000000, BND: 1.357650, BOB: 6.919100, BRL: 3.729400, BSD: 1.001300, BTC: 0.000278, BWP: 10.474000, BZD: 2.018350, CAD: 1.328050, CDF: 1631.000000, CHF: 1.000300, CLF: 0.025048, CLP: 658.100000, CNY: 6.746600, COP: 3121.850000, CRC: 612.970000, CUP: 1.001395, CVE: 97.373000, CZK: 22.793600, DJF: 177.720000, DKK: 6.589100, DOP: 50.646500, DZD: 118.840000, EGP: 17.609500, ETB: 28.413000, ETH: 0.008377, EUR: 0.883085, FJD: 2.125900, GBP: 0.773115, GEL: 2.645000, GHS: 5.276200, GIP: 0.770005, GMD: 49.550000, GNF: 9127.200000, GTQ: 7.765200, GYD: 209.360000, HKD: 7.846950, HNL: 24.439500, HRK: 6.537500, HTG: 82.810000, HUF: 281.363000, IDR: 14042.950000, ILS: 3.640660, INR: 71.165000, IQD: 1194.800000}}

The former is a String, while the latter is a Map object. My question are

1. how do I iterate through and access each currency in Dart: e.g. var currencyValue = stringJson['AED']

The following is what I tried: Both stringJson and mapJson are returned from future method jsonTest().

var stringJson = jsonOperation()

 stringJson.then((onValue){
  if(onValue != null){
        onValue.forEach((k,v){  
       print(onValue['AED'])
        print('$k,$v');                                          
    });
  }
});

The above code returns: print(onValue['AED']) printed null while print('$k,$v'); printed the following:

> symbols_returned,147 
>I/flutter ( 4575): base,USD 
>I/flutter ( 4575):
> data,{AED: 3.673050, AFN: 74.450000, ALL: 110.130000, AMD: 489.850000,
> ANG: 1.795100, AOA: 313.147500, ARS: 38.223700, AUD: 1.415500, AWG:
> 1.794500, AZN: 1.705000, BAM: 1.728800, BBD: 2.001800, BCH: 0.008256, BDT: 83.907000, BGN: 1.735350, BHD: 0.377050, BIF: 1830.000000, BMD:
> 1.000000, BND: 1.350750, BOB: 6.913550, BRL: 3.764500, BSD: 1.000100, BTC: 0.000278, BWP: 10.505000, BZD: 2.010200, CAD: 1.330845, CDF:
> 1630.000000, CHF: 1.004050, CLF: 0.025048, CLP: 662.775000, CNY: 6.792400, COP: 3134.400000, CRC: 611.915000, CUP: 1.000550, CVE: 97.511500, CZK: 22.949000, DJF: 177.720000, DKK: 6.618750, DOP: 50.580000, DZD: 118.915000, EGP: 17.586000, ETB: 28.600000, ETH: 0.008363, EUR: 0.886920, FJD: 2.134350, GBP: 0.777245, GEL: 2.645000, GHS: 5.225000, GIP: 0.769990, GMD: 49.545000, GNF: 9220.000000, GTQ:
> 7.755600, GYD: 209.510000, HKD: 7.847850, HNL: 24.500000, HRK: 6.569900, HTG: 82.551000, HUF: 283.885000, IDR: 14100.500000, ILS: 3.645750, INR: 71.165000, IQD: 1190.000000, IRR: 42105.000000 } }

Instead of printing each currency in key value format. The problem is that I am not able to access each currency value.

Answer 1

Cast the decoded value to a Map, then you can access the 'data' key and cast that to a Map as well. You can then iterate the keys in that map.

Future<void> printCurrencies() async {
  final response = await http.get('url');
  final decoded = jsonDecode(response) as Map;
  final data = decoded['data'] as Map;
  print(data['AED']); // prints 3.672940
  for (final name in data.keys) {
    final value = data[name];
    print('$name,$value'); // prints entries like "AED,3.672940"
  }
}

Note that if you want to have a fully typed map, you cannot use as Map<String, num> since at runtime the reified type is Map<String, dynamic>. Instead you'll need to use the cast method. (decoded['data'] as Map).cast<String, num>();

Answer 2

I eventually was able to access each currency in the key-value pair format. since the json Map format is as given below:

 {symbols_returned: 147, base: USD, data: {AED: 3.672940, AFN: 75.617000, ALL: 109.780000, AMD: 490.740000, ANG: 1.797350, AOA: 313.147500, ARS: 37.864500, AUD: 1.408450, AWG: 1.800000, AZN: 1.702500, BAM: 1.727050, BBD: 2.004250, BCH: 0.008196, BDT: 83.950500, BGN: 1.726900, BHD: 0.377470, BIF: 1800.000000, BMD: 1.000000, BND: 1.357650, BOB: 6.919100, BRL: 3.729400, BSD: 1.001300, BTC: 0.000278, BWP: 10.474000, BZD: 2.018350, CAD: 1.328050, CDF: 1631.000000, CHF: 1.000300, CLF: 0.025048, CLP: 658.100000, CNY: 6.746600, COP: 3121.850000, CRC: 612.970000, CUP: 1.001395, CVE: 97.373000, CZK: 22.793600, DJF: 177.720000, DKK: 6.589100, DOP: 50.646500, DZD: 118.840000, EGP: 17.609500, ETB: 28.413000, ETH: 0.008377, EUR: 0.883085, FJD: 2.125900, GBP: 0.773115, GEL: 2.645000, GHS: 5.276200, GIP: 0.770005, GMD: 49.550000, GNF: 9127.200000, GTQ: 7.765200, GYD: 209.360000, HKD: 7.846950, HNL: 24.439500, HRK: 6.537500, HTG: 82.810000, HUF: 281.363000, IDR: 14042.950000, ILS: 3.640660, INR: 71.165000, IQD: 1194.800000}}

i used print(onValue['data']['AED']) which returns 3.672940. where data(in the square bracket) is the name of json collection and AED(also in square bracket) is the specific currency whose value i intend to access. To iterate through the json map use the following code:

                              stringJson().then((onValue){ 
                              onValue['data'].forEach((k,v){                                      
                              //the following access AUD currency value
                              print(onValue['data']['AUD']);
                              //the following print all the currency in 
                              key-value format
                              print('$k,$v');                                     
                            });

Hope this helps someone.

Answer 3

I believe you are actually iterating the parent object, which has a data property that contains the values. You need to iterate the data property.

So to get the values you can use just:

  stringJson.then((onValue){
    if(onValue != null){
      onValue.data.forEach((k,v){  // add .data here
        print(onValue['AED'])
        print('$k,$v');                                          
      });
    }
  });