How can I parse this response in flutter and have values from response in text field from both the arrays in API response?

Question

I'm using Flutter/Dart. This endpoint gives me this response:

{"listroute":[{"id":"1","route_title":"Brooklyn East","no_of_vehicle":null,"fare":"101.00","note":null,"is_active":"no","created_at":"2018-06-02 12:49:21","updated_at":"0000-00-00 00:00:00","vehicles":[{"vec_route_id":"1","id":"1","vehicle_no":"101","vehicle_model":"101","manufacture_year":"2000","driver_name":"arvind","driver_licence":"544575854","driver_contact":"1305442045","note":"","created_at":"2018-06-02 12:54:13"}]},{"id":"2","route_title":"Brooklyn South","no_of_vehicle":null,"fare":"1010.00","note":null,"is_active":"no","created_at":"2018-06-02 12:50:06","updated_at":"0000-00-00 00:00:00","vehicles":[{"vec_route_id":"3","id":"3","vehicle_no":"2145","vehicle_model":"425","manufacture_year":"2017","driver_name":"amit","driver_licence":"4526320125","driver_contact":"23054420456","note":"","created_at":"2018-06-02 12:57:23"},{"vec_route_id":"2","id":"2","vehicle_no":"1010","vehicle_model":"242","manufacture_year":"2016","driver_name":"abhisekh","driver_licence":"4526320125","driver_contact":"23054420456","note":"","created_at":"2018-06-02 12:56:41"}]},{"id":"3","route_title":"Brooklyn West","no_of_vehicle":null,"fare":"100.00","note":null,"is_active":"no","created_at":"2018-06-02 12:51:00","updated_at":"0000-00-00 00:00:00","vehicles":[]},{"id":"4","route_title":"Uppal","no_of_vehicle":null,"fare":"101.00","note":null,"is_active":"no","created_at":"2018-06-02 12:51:22","updated_at":"0000-00-00 00:00:00","vehicles":[{"vec_route_id":"6","id":"3","vehicle_no":"2145","vehicle_model":"425","manufacture_year":"2017","driver_name":"amit","driver_licence":"4526320125","driver_contact":"23054420456","note":"","created_at":"2018-06-02 12:57:23"},{"vec_route_id":"5","id":"2","vehicle_no":"1010","vehicle_model":"242","manufacture_year":"2016","driver_name":"abhisekh","driver_licence":"4526320125","driver_contact":"23054420456","note":"","created_at":"2018-06-02 12:56:41"},{"vec_route_id":"4","id":"1","vehicle_no":"101","vehicle_model":"101","manufacture_year":"2000","driver_name":"arvind","driver_licence":"544575854","driver_contact":"1305442045","note":"","created_at":"2018-06-02 12:54:13"}]},{"id":"5","route_title":"MAHE","no_of_vehicle":null,"fare":"101.00","note":null,"is_active":"no","created_at":"2018-06-02 12:51:37","updated_at":"0000-00-00 00:00:00","vehicles":[{"vec_route_id":"7","id":"2","vehicle_no":"1010","vehicle_model":"242","manufacture_year":"2016","driver_name":"abhisekh","driver_licence":"4526320125","driver_contact":"23054420456","note":"","created_at":"2018-06-02 12:56:41"}]},{"id":"6","route_title":"CMD Chowk","no_of_vehicle":null,"fare":"200.00","note":null,"is_active":"no","created_at":"2018-06-02 12:51:58","updated_at":"0000-00-00 00:00:00","vehicles":[]},{"id":"9","route_title":"x","no_of_vehicle":null,"fare":"10.00","note":null,"is_active":"no","created_at":"2018-06-11 07:22:46","updated_at":"0000-00-00 00:00:00","vehicles":[]},{"id":"10","route_title":"xy","no_of_vehicle":null,"fare":"10.00","note":null,"is_active":"no","created_at":"2018-06-11 07:22:53","updated_at":"0000-00-00 00:00:00","vehicles":[]},{"id":"11","route_title":"mmm","no_of_vehicle":null,"fare":"10.00","note":null,"is_active":"no","created_at":"2018-06-11 11:48:02","updated_at":"0000-00-00 00:00:00","vehicles":[]}],"childs":[{"transport_fees":"0.00","vehroute_id":"6","student_session_id":"1","fees_discount":"0.00","class_id":"1","class":"Nursery A","section_id":"1","section":"A","id":"1","admission_no":"1","roll_no":"01052018","admission_date":"2018-05-30","firstname":"Amit","lastname":"Teja","image":"uploads\/student_images\/no_image.png","mobileno":"09021902190","email":"[email protected]","state":null,"city":null,"pincode":null,"religion":"Teja","cast":"Gen","dob":"2016-07-06","current_address":"ttetet\r\nasdasdasd","previous_school":"","guardian_is":"father","permanent_address":"ttetet\r\nasdasdasd","category_id":"1","adhar_no":"iewk123kaqws12","samagra_id":"iewk123kaqws12","bank_account_no":"9999999999999999999999","bank_name":"CITY Bank","ifsc_code":"city000010","guardian_name":"Sumit","guardian_relation":"Father","guardian_phone":"8309632153","guardian_address":"ttetet\r\nasdasdasd","is_active":"no","created_at":"2018-06-06 11:52:43","updated_at":"0000-00-00 00:00:00","father_name":"Sumit","father_phone":"Teja","father_occupation":"Business","mother_name":"Sumitra","mother_phone":"9876543211","mother_occupation":"House Wife","guardian_occupation":"Business","gender":"Male","rte":"Yes","guardian_email":"[email protected]"},{"transport_fees":"0.00","vehroute_id":"0","student_session_id":"2","fees_discount":"0.00","class_id":"1","class":"Nursery A","section_id":"1","section":"A","id":"2","admission_no":"2","roll_no":"01052019","admission_date":"2018-06-01","firstname":"vibhav","lastname":"Teja","image":"uploads\/student_images\/no_image.png","mobileno":"7894561230","email":"[email protected]","state":null,"city":null,"pincode":null,"religion":"Teja","cast":"Gen","dob":"2018-06-09","current_address":"ttetet\r\nasdasdasd","previous_school":"","guardian_is":"father","permanent_address":"ttetet\r\nasdasdasd","category_id":"1","adhar_no":"iewk123kaqws12","samagra_id":"iewk123kaqws12","bank_account_no":"125423625642","bank_name":"City Bank","ifsc_code":"12542362","guardian_name":"Sumit","guardian_relation":"Father","guardian_phone":"8309632153","guardian_address":"ttetet\r\nasdasdasd","is_active":"no","created_at":"2018-06-06 11:29:26","updated_at":"0000-00-00 00:00:00","father_name":"Sumit","father_phone":"Teja","father_occupation":"Business","mother_name":"Sumitra","mother_phone":"9876543211","mother_occupation":"House Wife","guardian_occupation":"Business","gender":"Male","rte":"Yes","guardian_email":"[email protected]"},{"transport_fees":"0.00","vehroute_id":"6","student_session_id":"11","fees_discount":"0.00","class_id":"2","class":"Nursery B","section_id":"2","section":"B","id":"5","admission_no":"1234-A1","roll_no":"0105202010","admission_date":"2018-06-11","firstname":"Rajat","lastname":"Teja","image":"uploads\/student_images\/no_image.png","mobileno":"07697019875","email":"[email protected]","state":null,"city":null,"pincode":null,"religion":"Teja","cast":"","dob":"2018-06-14","current_address":"ttetet\r\nasdasdasd","previous_school":"","guardian_is":"father","permanent_address":"ttetet\r\nasdasdasd","category_id":"3","adhar_no":"","samagra_id":"","bank_account_no":"","bank_name":"","ifsc_code":"","guardian_name":"Sumit","guardian_relation":"Father","guardian_phone":"8309632153","guardian_address":"ttetet\r\nasdasdasd","is_active":"no","created_at":"2018-06-11 07:35:54","updated_at":"0000-00-00 00:00:00","father_name":"Sumit","father_phone":"Teja","father_occupation":"Business","mother_name":"Sumitra","mother_phone":"9876543211","mother_occupation":"House Wife","guardian_occupation":"Business","gender":"Female","rte":"No","guardian_email":""}]}

How can I parse this type of output?

Solution

The data in the question already seems to be parsed. May be you want to know how to use the received data. Here's an example of it.

class HomeState extends State<Home> {
List listRoute = [];

Future getData() async {
    http.Response res = await http.get(
        'http://app.webcraft.co.in/eschool/parent/routejson?parent_id=2&student_id=1');
    Map mapRes = json.decode(res.body);
    print('Response from server: $mapRes');
    setState(() {
    listRoute = mapRes['listroute'];
    });
}

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

@override
Widget build(BuildContext context) {
    return new Scaffold(
    appBar: new AppBar(
        title: new Text('HTTP demo'),
    ),
    body: listRoute.length == 0
        ? new Container()
        : new ListView(
            children: listRoute
                .map((route) => new ListTile(
                    title: new Text(route['route_title']),
                    subtitle: new Text(route['fare'])))
                .toList(),
            ),
    );
}
}

Or may be you need to understand that, what you have received is a Map where value of key listroute is a list which you need to iterate.

OR

If you are unable to access some other key or data in the map please ask in the comment.

NOTE: If you are unable to understand/read the data, there are several sites to view json data in pretty format like http://json.parser.online.fr/

Comments

[Rémi Rousselet]

What did you try ?

[Fırat Esmer]

Welcome to Stackoverflow. When asking a question, you will get much better answers if you provide code. Add what you have tried so far. Also please check How to create a Minimal, Complete, and Verifiable example

[Ron Nabuurs]

You should give us examples or atleast what you've tried to us so we are able to help. Regardless have you tried this: flutter.io/json ?

[Ayush Jain WebCraft IT]

hey, thanks actully i need to parse values of both listroute and vihicles array values and use it on a text

[Ayush Jain WebCraft IT]

i need to show vehicles value too in text along with other listroutes values

[s.j]

@AyushJainWebCraftIT getting this error - Unhandled Exception: NoSuchMethodError: The method '[]' was called on null. E/flutter (24765): Receiver: null E/flutter (24765): Tried calling: []("BankName")

[s.j]

in my case not list response fetched in textview but every time getting this error