Parse nested JSON in Dart/Flutter

Question

I'm trying to parse my JSON into Data class object. I did some research and did come upon some helpful articles but am still running into errors.

The response I get from the backend:

  "entrances": {
    "options": {
      "mainEntrance": {
        "text": "Enter through the main doors"
      },
      "backEntrance": {
        "text": "Enter through the back doors"
      },
      "sideEntrance": {
        "text": "Enter through the side doors"
      }
    },
    "footer": "Text goes here"
  },
  "status": {
    "state": "open"
  }
}

Model

class MyClass {
  String id;
  Options option;

  MyClass({this.id, this.option});

  MyClass.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    option = json['option'];
  }

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

class Options {
  String name;
  String text;

  Options({this.name, this.text});

  Options.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    text = json['text'];
  }

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

Decoding the response and mapping

      setState(() {

        Map myMap = json.decode(response.body);
        List<MyClass> myClassList = new List<MyClass>();
        myMap['entrances'].forEach((key, value) {
          value['id'] = key;
          myClassList.add(MyClass.fromJson(value));
        });

        myClassList.forEach((MyClass) {
          print(MyClass.id);
          print(MyClass.option.name);
          print("--------------------\n");
        });
      });

I get this error:

Unhandled Exception: NoSuchMethodError: Class 'String' has no instance method '[]='.
Tried calling: []=("id", "footer")

What am I doing wrong? Are there better approaches out there?

Solution

You can use this website to convert your JSON to a Dart model. I assume that your JSON starts with curly brackets.

{
    "entrances": {
        "options": {
            "mainEntrance": {
                "text": "Enter through the main doors"
            },
            "backEntrance": {
                "text": "Enter through the back doors"
            },
            "sideEntrance": {
                "text": "Enter through the side doors"
            }
        },
        "footer": "Text goes here"
    },
    "status": {
        "state": "open"
    }
}

Then your model should look like:

class ResponseModel {
  Entrances entrances;
  Status status;

  ResponseModel({this.entrances, this.status});

  ResponseModel.fromJson(Map<String, dynamic> json) {
    entrances = json['entrances'] != null
        ? new Entrances.fromJson(json['entrances'])
        : null;
    status =
        json['status'] != null ? new Status.fromJson(json['status']) : null;
  }

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

class Entrances {
  Options options;
  String footer;

  Entrances({this.options, this.footer});

  Entrances.fromJson(Map<String, dynamic> json) {
    options =
        json['options'] != null ? new Options.fromJson(json['options']) : null;
    footer = json['footer'];
  }

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

class Options {
  MainEntrance mainEntrance;
  MainEntrance backEntrance;
  MainEntrance sideEntrance;

  Options({this.mainEntrance, this.backEntrance, this.sideEntrance});

  Options.fromJson(Map<String, dynamic> json) {
    mainEntrance = json['mainEntrance'] != null
        ? new MainEntrance.fromJson(json['mainEntrance'])
        : null;
    backEntrance = json['backEntrance'] != null
        ? new MainEntrance.fromJson(json['backEntrance'])
        : null;
    sideEntrance = json['sideEntrance'] != null
        ? new MainEntrance.fromJson(json['sideEntrance'])
        : null;
  }

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

class MainEntrance {
  String text;

  MainEntrance({this.text});

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

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

class Status {
  String state;

  Status({this.state});

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

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

Comments

[user3908260]

Thank you. Can you give an example of how to display the data with listview.builder?