Flutter nested JSON to listview

Question

I'm new to flutter and How can l parse this JSON Object to listview ?

// API response

 "code": 200,
    "message": "OK",
    "payload": {
        "items": [
            {
                "package": {
                    "order": {
                        "orderer": "xxxx",
                        "cost": {
                            "amount": "0.0",
                            "currency": {
                                "code": "USD",
                                "name": "US Dollar",
                                "symbol": "$"
                            }
                        },
                        "order_number": "212121",
                        "tracking_code": "833939339",
                        "store": {
                            "name": "ABC",
                            "id": 2,
                            "created_at": "2019-01-21T16:05:45+00:00"
                        },
                        "id": 74,
                        "created_at": "2019-02-08T11:55:14+00:00"
                    },
                    "weight": {
                        "value": "12.9000",
                        "unit": {
                            "name": "Kilogram",
                            "symbol": "kg",
                            "base": "1.00000000",
                            "id": 1
                        }
                    },
                    "length": {
                        "value": "4.0000",
                        "unit": {
                            "name": "Foot",
                            "symbol": "ft",
                            "base": "0.30480000",
                            "id": 7
                        }
                    },
                    "height": {
                        "value": "34.4000",
                        "unit": {
                            "name": "Millimetre",
                            "symbol": "mm",
                            "base": "0.00100000",
                            "id": 4
                        }
                    },
                    "width": {
                        "value": "98.5600",
                        "unit": {
                            "name": "Centimetre",
                            "symbol": "cm",
                            "base": "0.01000000",
                            "id": 2
                        }
                    },
                    "handlings": [
                        {
                            "description": "description",
                            "rate": "0.0200",
                            "icon": "icon-hazadous",
                            "id": 1
                        },
                        {
                            "description": "none ",
                            "rate": "0.0500",
                            "icon": "icon-none",
                            "id": 2
                        }
                    ],
                    "description": "Item description",
                    "id": 113,
                    "created_at": "2019-02-08T11:55:14+00:00"
                },
                "owner": {
                    "name": "Jo B",
                    "phone": "+1",
                    "blocked": false,
                    "activated": true,
                    "id": 98,
                    "created_at": "2019-01-21T16:05:46+00:00",
                    "updated_at": "2018-12-21T15:03:41+00:00"
                },
                "sender": {
                    "name": "A B C",
                    "phone": "+1",
                    "blocked": false,
                    "activated": true,
                    "id": 98,
                    "created_at": "2019-01-21T16:05:46+00:00",
                    "updated_at": "2018-12-21T15:03:41+00:00"
                },
                "creator": {
                    "name": "Jo B",
                    "phone": "+1",
                    "blocked": false,
                    "activated": true,
                    "id": 98,
                    "created_at": "2019-01-21T16:05:46+00:00",
                    "updated_at": "2018-12-21T15:03:41+00:00"
                },
                "source": {
                    "contact_name": "Some name",
                    "contact_phone": "+1",
                    "name": "Some name",
                    "longitude": "-0.0",
                    "latitude": "1.1",
                    "id": 113,
                    "created_at": "2019-02-08T11:55:14+00:00"
                },
                "destination": {
                    "contact_name": "xxxx",
                    "contact_phone": "323232232",
                    "name": "xxx ssss",
                    "longitude": "-0.0",
                    "latitude": "1.1",
                    "id": 113,
                    "created_at": "2019-02-08T11:55:14+00:00"
                },
                "fare": {
                    "amount": "3185.7377",
                    "currency": {
                        "code": "USD",
                        "name": "US Dollar",
                        "symbol": "$"
                    }
                },
                "type": {
                    "name": "some name",
                    "code": "01",
                    "commission": "0.0",
                    "id": 2,
                    "created_at": "2019-01-21T16:05:45+00:00"
                },
                "freight": {
                    "name": "Land",
                    "code": "Land",
                    "id": 1,
                    "created_at": "2019-01-21T16:05:45+00:00"
                },
                "status": {
                    "name": "Pending",
                    "code": "PENDING",
                    "id": 1,
                    "created_at": "2019-01-21T16:05:45+00:00"
                },
                "payment": {
                    "method": {
                        "name": "None",
                        "code": "None",
                        "id": 1,
                        "created_at": "2019-01-21T16:05:46+00:00"
                    },
                    "status": {
                        "name": "Unpaid",
                        "code": "UNPAID",
                        "id": 1,
                        "created_at": "2019-01-21T16:05:46+00:00"
                    },
                    "id": 113,
                    "created_at": "2019-02-08T11:55:14+00:00"
                },
                "id": 113,`enter code here`
                "created_at": "2019-02-08T11:55:14+00:00"
              ],
        "total": 34,
        "offset": 34
    }
}

Flutter async http request to fetch API data, JSON printed but l don't seem to creat listview from the JSON request.

 Future<Null> _fetchData() async {
    setState(() {
      loading = true;
    });
    final response =
        await http.get("url" ,  headers: {"someh header": "xxxx"});
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);

// request prints here`enter code here`
      print(data);

     );
    }
  }

Hey welcome to SO. What specifically you want to show in listview? — Pushan Gupta
– Pushan Gupta, Commented Feb 10, 2019 at 17:09
Please order(name..) , description , owner(name..) ,fare, (amount , amount, currency : code , symbol ) type (name, code ..) , status(name and code) , id and created_at — Asfos22
– Asfos22, Commented Feb 10, 2019 at 18:01

bytesizedwizard · Accepted Answer · 2019-02-11 09:43:42Z

0

Check out this blog. I think it explains the solution to your problem with detailed steps. Let me know if this works for you! I think the point in the blog specific to your question would be JSON structure #4 : Nested structures with Lists.

Once you get the List of objects you need to display from the steps above, you can use this list in a ListView.builder to display them in your app.

Example:

showList(List<Your_Model_Class_Name> list) {
  return ListView.builder(
    shrinkWrap: true,
    itemCount: list.length,
    itemBuilder: (BuildContext context, int index) {
      /*Your widget code goes here instead of the ListTile*/
      return ListTile(
        title: Text('${list[index].title}'),
      );
    }
  );
}

You can check this link for a complete example. Let me know if this helps!

edited Feb 11, 2019 at 9:43

answered Feb 11, 2019 at 9:28

bytesizedwizard

6,1013 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Asfos22 Over a year ago

Thanks @Siddharth Patankar , please how could l 'package' objects such as the order etc... l'm newbie to flutter.

bytesizedwizard Over a year ago

I'm not clear on what exactly you mean by 'package', but by my understanding you could have separate classes for each data type, for example Orders can be once class, Items can be other. And the ListView can be of type ListView<Items> or ListView<Orders> depending on what data you need to display.

Nabin Dhakal Over a year ago

please help me with this stackoverflow.com/questions/60432234/…

Fellipe Malta · Accepted Answer · 2019-02-11 09:52:46Z

0

You're not decoding correctly

final dynamic data = json.decode(response.body)

Now when you print it, it'll show you what you want to see.

answered Feb 11, 2019 at 9:52

Fellipe Malta

3,5601 gold badge9 silver badges12 bronze badges

1 Comment

Asfos22 Over a year ago

THanks @Fellipe , please l'm newbie to flutter

Collectives™ on Stack Overflow

Flutter nested JSON to listview

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related