Can I display my JSON data in Table format using DataTable in Flutter?

Question

I'm successfully getting my JSON response in cosole. Trying to display it in table format using DataTable in flutter. I tried to use this package but it only accepting JSON array list format.But my JSON is not in Array List.

My JSON response simply a <Map> What syntax I should use to display it in table?

{
"EncPartnerId": "LEuT1eIlpLEMAAkZme3wpQ==",
"EncTestId": "U4exk+vfMGrn7cjNUa/PBw==",
"Fee": "100",
"DiscountedFee": "80",
"BookingFee": "50"
}

My API function:

Future<void> GetTestFee() async {
var jsonResponse;
if (encTestId.isNotEmpty) {
  var response = await http.post(
      Uri.parse("http://medbo.digitalicon.in/api/medboapi/GetTestFee"),
      body: ({
        'EncPartnerId': "LEuT1eIlpLEMAAkZme3wpQ==",
        'EncTestId': "U4exk+vfMGrn7cjNUa/PBw==",

      }));
  if (response.statusCode == 200) {
    print("Correct");
    print(response.body);
    jsonResponse = json.decode(response.body.toString());
    print(jsonResponse);
    //Navigator.push(context,MaterialPageRoute(builder: (context) => DieticianAfterDateSelectPage( rresponse: DieticianEncBookingIdModel.fromJson(jsonResponse),)));
     ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text("Test Added")));
  } else {
    throw Exception("Faild to fetch");
  }
} else {
  throw Exception("Faild to fetch");
}

 }

Then insted of Dummy data how can I display my JSON response data? Should I use ListView.builder?

Container(
   child: Column(
    children:[
        DataTable(
              columns: <DataColumn>[
              DataColumn(label: Text("Test Name")),
              DataColumn(label: Text("Fee")),
              DataColumn(label: Text("Discounted Fee")),
              ],

              rows: <DataRow>[
                DataRow(
                   cells: <DataCell>[
                   DataCell(Text("jjj")),
                   DataCell(Text("jsjf")),
                   DataCell(Text("jsjf")),
               ]
             )
          ]
        )
     ]
  )

)

[flutter-map-in-data-table](https://stackoverflow.com/questions/66067146/flutter-map-in-data-table) — mohit yadav, Sep 09 '21 at 17:51

mohit yadav · Accepted Answer · 2021-09-09T18:43:08.113

You can map your json data to datatable like this

class User {
String? encPartnerId;
String? encTestId;
String? fee;
String? discountedFee;
String? bookingFee;

User(
  {this.encPartnerId,
  this.encTestId,
  this.fee,
  this.discountedFee,
  this.bookingFee});

User.fromJson(Map<String, dynamic> json) {
  encPartnerId = json['EncPartnerId'];
  encTestId = json['EncTestId'];
  fee = json['Fee'];
  discountedFee = json['DiscountedFee'];
  bookingFee = json['BookingFee'];
}

Map<String, dynamic> toJson() {
  final Map<String, dynamic> data = new Map<String, dynamic>();
  data['EncPartnerId'] = this.encPartnerId;
  data['EncTestId'] = this.encTestId;
  data['Fee'] = this.fee;
  data['DiscountedFee'] = this.discountedFee;
  data['BookingFee'] = this.bookingFee;
  return data;
 }
}

class DataTableEg extends StatefulWidget {
const DataTableEg({Key? key}) : super(key: key);

@override
_DataTableEgState createState() => _DataTableEgState();
}

class _DataTableEgState extends State<DataTableEg> {
 User? user;

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

 void getData() {
 // final response=         //your api call
 // user=User.fromJson(response.body);
 }
 @override
 Widget build(BuildContext context) {
   return DataTable(columns: <DataColumn>[
    DataColumn(label: Text("EncPartnerId")),
    DataColumn(label: Text("EncTestId")),
    ], rows: <DataRow>[
    DataRow(cells: <DataCell>[
    DataCell(Text(user?.encPartnerId ?? '')),
    DataCell(Text(user?.encTestId ?? '')),
    ])
  ]);
}
}

create model based on your json and then you can use it in data table — mohit yadav, Sep 09 '21 at 18:11
[refer this](https://stackoverflow.com/questions/60498520/how-can-we-use-json-with-datatable) — mohit yadav, Sep 09 '21 at 18:19
Again as I mentioned in question they able to use this package [ https://pub.dev/packages/json_table ] because their Json response is like `[ {"equipe1":"PSG","equipe2":"DIJON.......} ]` but my Json response just in `{"DiscountedFee": "80","BookingFee": "50"}` — Toujo, Sep 09 '21 at 18:28
above package only work with `ArrayList object` starting and end with `[ ]` — Toujo, Sep 09 '21 at 18:31

Can I display my JSON data in Table format using DataTable in Flutter?

1 Answers1