如何从嵌套 Map 中获取值？

Question

newbie here in Flutter, from the json response, I would like to simply get the values.

JSON Response Sample:

{
  "success": true,
  "kits": {
    "Kit One": {
      "area": "area one"
    },
    "Kit Two": {
      "area": "area two"
    },
    "Kit Three": {
      "area": "area three"
    },
    "Kit Four": {
      "area": "area four"
    },
    "Kit Five": {
      "area": "area five"
    },
    "Kit Six": {
      "area": "area six"
    },
    "Kit Seven": {
      "area": "area seven"
    },
    "Kit Eight": {
      "area": "area eight"
    },
    "Kit Nine": {
      "area": "area nine"
    },
    "Kit Ten": {
      "area": "area ten"
    }
  }
}

QuickType - JSON to Dart

import 'dart:convert';

Kits kitsFromJson(String str) => Kits.fromJson(json.decode(str));

String kitsToJson(Kits data) => json.encode(data.toJson());

class Kits {
    bool success;
    Map<String, Kit> kits;

    Kits({
        this.success,
        this.kits,
    });

    factory Kits.fromJson(Map<String, dynamic> json) => Kits(
        success: json["success"] == null ? null : json["success"],
        kits: json["kits"] == null ? null : Map.from(json["kits"]).map((k, v) => MapEntry<String, Kit>(k, Kit.fromJson(v))),
    );

    Map<String, dynamic> toJson() => {
        "success": success == null ? null : success,
        "kits": kits == null ? null : Map.from(kits).map((k, v) => MapEntry<String, dynamic>(k, v.toJson())),
    };enter code here
}

class Kit {
    String area;

    Kit({
        this.area,
    });

    factory Kit.fromJson(Map<String, dynamic> json) => Kit(
        area: json["area"] == null ? null : json["area"],
    );

    Map<String, dynamic> toJson() => {
        "area": area == null ? null : area,
    };
}

Question:

Given what I have above, I have figured out how to get values such as 'Kit One', 'Kit Two', etc. But unfortunately, I am bit confused on how can I get values such as 'area one', 'area two', etc.

Additional Info: 'Kit One', 'Kit Two', 'Kit Three', etc. will be displayed as a List, selecting a row will send its values ('area one' or 'area two', etc.) to the next page.

Thank you so much in advanced and appreciate all your help. May the force be with you! :)

Answer 1

My take on this would be to use this library https://github.com/k-paxian/dart-json-mapper to map your json onto your Dart classes.

It will allow you to have a clean and neat model code, without hell of fromJson/toJson hard coded boilerplate, without literals baked in.

If you have more than one model class in your project it will make sense to use ready made solution to save your efforts further.

@jsonSerializable
class Kit {
  String area;
}

@jsonSerializable
class Kits {

  final Map<String, dynamic> _kitsMap = {};

  @jsonProperty
  void setKit(String name, dynamic value) {
    _kitsMap[name] = JsonMapper.fromMap<Kit>(value);
  }

  @jsonProperty
  Map<String, dynamic> getMap() {
    return _kitsMap;
  }
}

@jsonSerializable
class Response {
  bool success;
  Kits kits;
}

// here is the input json

      final json = '''
{
  "success": true,
  "kits": {
    "Kit One": {
      "area": "area one"
    },
    "Kit Two": {
      "area": "area two"
    },
    "Kit Three": {
      "area": "area three"
    },
    "Kit Four": {
      "area": "area four"
    },
    "Kit Five": {
      "area": "area five"
    },
    "Kit Six": {
      "area": "area six"
    },
    "Kit Seven": {
      "area": "area seven"
    },
    "Kit Eight": {
      "area": "area eight"
    },
    "Kit Nine": {
      "area": "area nine"
    },
    "Kit Ten": {
      "area": "area ten"
    }
  }
} ''';

  // Now you have an response model instance populated from json in one line of code
  final responseInstance = JsonMapper.deserialize<Response>(json);

  // Now you have a model instance back to json in one line of code
  print(JsonMapper.serialize(responseInstance));

console output will be

{
 "success": true,
 "kits": {
  "Kit One": {
   "area": "area one"
  },
  "Kit Two": {
   "area": "area two"
  },
  "Kit Three": {
   "area": "area three"
  },
  "Kit Four": {
   "area": "area four"
  },
  "Kit Five": {
   "area": "area five"
  },
  "Kit Six": {
   "area": "area six"
  },
  "Kit Seven": {
   "area": "area seven"
  },
  "Kit Eight": {
   "area": "area eight"
  },
  "Kit Nine": {
   "area": "area nine"
  },
  "Kit Ten": {
   "area": "area ten"
  }
 }
}

Answer 2

You can use this JSON to Dart -->

class MainKits {
  bool success;
  Kits kits;

  MainKits({this.success, this.kits});

  MainKits.fromJson(Map<String, dynamic> json) {
    success = json['success'];
    kits = json['kits'] != null ? new Kits.fromJson(json['kits']) : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['success'] = this.success;
    if (this.kits != null) {
      data['kits'] = this.kits.toJson();
    }
    return data;
  }
}

class Kits {
  KitOne kitOne;
  KitOne kitTwo;
  KitOne kitThree;
  KitOne kitFour;
  KitOne kitFive;
  KitOne kitSix;
  KitOne kitSeven;
  KitOne kitEight;
  KitOne kitNine;
  KitOne kitTen;

  Kits(
      {this.kitOne,
      this.kitTwo,
      this.kitThree,
      this.kitFour,
      this.kitFive,
      this.kitSix,
      this.kitSeven,
      this.kitEight,
      this.kitNine,
      this.kitTen});

  Kits.fromJson(Map<String, dynamic> json) {
    kitOne =
        json['Kit One'] != null ? new KitOne.fromJson(json['Kit One']) : null;
    kitTwo =
        json['Kit Two'] != null ? new KitOne.fromJson(json['Kit Two']) : null;
    kitThree = json['Kit Three'] != null
        ? new KitOne.fromJson(json['Kit Three'])
        : null;
    kitFour =
        json['Kit Four'] != null ? new KitOne.fromJson(json['Kit Four']) : null;
    kitFive =
        json['Kit Five'] != null ? new KitOne.fromJson(json['Kit Five']) : null;
    kitSix =
        json['Kit Six'] != null ? new KitOne.fromJson(json['Kit Six']) : null;
    kitSeven = json['Kit Seven'] != null
        ? new KitOne.fromJson(json['Kit Seven'])
        : null;
    kitEight = json['Kit Eight'] != null
        ? new KitOne.fromJson(json['Kit Eight'])
        : null;
    kitNine =
        json['Kit Nine'] != null ? new KitOne.fromJson(json['Kit Nine']) : null;
    kitTen =
        json['Kit Ten'] != null ? new KitOne.fromJson(json['Kit Ten']) : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.kitOne != null) {
      data['Kit One'] = this.kitOne.toJson();
    }
    if (this.kitTwo != null) {
      data['Kit Two'] = this.kitTwo.toJson();
    }
    if (this.kitThree != null) {
      data['Kit Three'] = this.kitThree.toJson();
    }
    if (this.kitFour != null) {
      data['Kit Four'] = this.kitFour.toJson();
    }
    if (this.kitFive != null) {
      data['Kit Five'] = this.kitFive.toJson();
    }
    if (this.kitSix != null) {
      data['Kit Six'] = this.kitSix.toJson();
    }
    if (this.kitSeven != null) {
      data['Kit Seven'] = this.kitSeven.toJson();
    }
    if (this.kitEight != null) {
      data['Kit Eight'] = this.kitEight.toJson();
    }
    if (this.kitNine != null) {
      data['Kit Nine'] = this.kitNine.toJson();
    }
    if (this.kitTen != null) {
      data['Kit Ten'] = this.kitTen.toJson();
    }
    return data;
  }
}

class KitOne {
  String area;

  KitOne({this.area});

  KitOne.fromJson(Map<String, dynamic> json) {
    area = json['area'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['area'] = this.area;
    return data;
  }
}

And now you can access all the variables you want.

Rate me if I helped you.