Decode complex JSON?

Question

I want to decode this complex JSON data into normal String, how can I do that in a simple way?

Answer 1

UPDATED

    List<Map> list = [];

      @override
      void initState() {
        super.initState();
        getList();
      }

      void getList() async {
        //get data from internet/api
        //for ex. I m using offline data
        var jsonData = [
  {
    "id": "1",
    "date": "18-Sep-2019",
    "paystub_Details": {
      "name": "Henry Nixon",
      "position": "Senior Programmer",
      "address": "30 Wertheim Crt",
      "suite": "Suite C16",
      "richmond": "Richmond Hill, ON L4B 1B9",
      "e_id": 21,
      "peroid": "10-Sep-2019 to 18-Sep-2019",
      "payment_date": "18-Sep-2019",
      "net_pay": 24600,
      "e_total": 38000,
      "d_total": 13400
    },
    "earn": {
      "detail": [
        {
          "description": "EI",
          "Units": 80,
          "Rate": 800,
          "Amount": 24000
        },
        {
          "description": "Hourly Wages",
          "Units": 80,
          "Rate": 800,
          "Amount": 14000
        }
      ]
    },
    "deduction": {
      "detail": [
        {
          "description": "CPP/QPP",
          "Units": 2400
        },
        {
          "description": "EI",
          "Units": 1400
        },
        {
          "description": "Fed Inc Tax",
          "Units": 2400
        },
        {
          "description": "Prov Inc Taxi",
          "Units": 2400
        },
        {
          "description": "Cpp/Qpp",
          "Units": 2400
        },
        {
          "description": "Cpp/Qpp",
          "Units": 2400
        }
      ]
    }
  },
  {
    "id": "2",
    "date": "18-Oct-2019",
    "paystub_Details": {
      "name": "Naveen Avidi",
      "position": "The Programmer",
      "address": "30 Wertheim Crt",
      "suite": "Suite C16",
      "richmond": "Richmond Hill, ON L4B 1B9",
      "e_id": 21,
      "peroid": "10-Oct-2019 to 18-Oct-2019",
      "payment_date": "18-Oct-2019",
      "net_pay": 24600,
      "e_total": 38000,
      "d_total": 13400
    },
    "earn": {
      "detail": [
        {
          "description": "EI",
          "Units": 80,
          "Rate": 800,
          "Amount": 25000
        },
        {
          "description": "Hourly Wages",
          "Units": 80,
          "Rate": 800,
          "Amount": 17000
        }
      ]
    },
    "deduction": {
      "detail": [
        {
          "description": "CPP/QPP",
          "Units": 2400
        },
        {
          "description": "EI",
          "Units": 1400
        },
        {
          "description": "Fed Inc Tax",
          "Units": 2400
        },
        {
          "description": "Prov Inc Taxi",
          "Units": 2400
        },
        {
          "description": "Cpp/Qpp",
          "Units": 2400
        },
        {
          "description": "Cpp/Qpp",
          "Units": 2400
        }
      ]
    }
  }
];

    setState(() {
      for(Map js in jsonData){
        list.add(js);
      }
    });
      }

      @override
      Widget build(BuildContext context) {
        return Container(
            padding: EdgeInsets.all(20),
            color: Colors.white,
            child: list.length < 1
                ? ListTile(
                    leading: CircularProgressIndicator(), title: Text('Loading...'))
                : ListView.builder(
                    itemCount: list.length,
                    itemBuilder: (rCon, rInd) {
                      return Card(
                          color: Colors.blueAccent,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment:CrossAxisAlignment.start,            
                                        children: [
                            Padding(
                              padding: const EdgeInsets.all(5.0),
                              child: Text('${list[rInd]['paystub_Details']['name']}',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                      fontSize: 17)),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(3.0),
                              child: Text(
                                  '${list[rInd]['paystub_Details']['position']}',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                      fontSize: 15)),
                            ),
                            SizedBox(height: 10),
                            Container(
                              padding: const EdgeInsets.all(7.0),
                              height: 50,
                              child: ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  itemCount: list[rInd]['earn']['detail'].length,
                                  itemBuilder: (con, ind) {
                                    return Container(
                                        padding: const EdgeInsets.all(5.0),
                                        margin: const EdgeInsets.all(5.0),
                                        decoration: BoxDecoration(
                                            borderRadius: BorderRadius.circular(7),
                                            color: Colors.cyanAccent),
                                        child: Text(
                                            '${list[rInd]['earn']['detail'][ind]['Amount']}',
                                            style: TextStyle(
                                                color: Colors.black,
                                                fontWeight: FontWeight.bold,
                                                fontSize: 15)));
                                  }),
                            )
                          ]));
                    }));
      }