Flutter how to parse JSON data

Question

I'm writing a flutter method in which I want to parse a simple JSON data

{"alm":3,"co2":1,"hu":2,"temp":32,"th":11,"tm":31,"ts":41}

I tried to parse it in a simple get class

List data;
  Future<String> getData() async {
    http.Response response = await http.get(
        Uri.encodeFull("http://chicken20.pythonanywhere.com/jsonn"),
        headers: {"Accept": "application/json"});
    print(response.body);
    data = json.decode(response.body);
    print(data);
    return "Success!";

and this how I tried to use in material app

body: new ListView.builder(
          itemCount: data == null ? 0 : data.length,
          itemBuilder: (BuildContext context, int index) {
            return new ListTile(
              leading: const Icon(Icons.stay_primary_portrait),
              title: Text(data.length.toString()),
              subtitle:
              Text('${_deviceData}'),
              trailing: Icon(Icons.more_vert),
              dense: true,
              isThreeLine: true,
            );
          },
        ),

and I got this error

[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'List<dynamic>'

and nothing was shown in the screen

The data from your API is a Map and you're trying to assign it to a List and use in a ListView. What are you trying to accomplish? — JideGuru
– JideGuru, Commented Jun 23, 2020 at 12:06
if you try to enter to the link you will find a small json data i want to show it in a list view — Mohamed Borhene Hamedi
– Mohamed Borhene Hamedi, Commented Jun 23, 2020 at 12:08
The data seem to be a Map. you cant display it in a ListView — JideGuru
– JideGuru, Commented Jun 23, 2020 at 12:09
Maybe you want to display it in a ListTile and not a ListView — JideGuru
– JideGuru, Commented Jun 23, 2020 at 12:11

Tanuj · Accepted Answer · 2020-06-23 13:01:57Z

1

First thing the response from API is not a json list, its a simple json object. If you wanna iterate over the keys of the above object you can create a list with all the keys and then use key index to get the actual key name in the response.

final List<String> keys = ["alm","co2","hu","temp","th","tm","ts"];

then you can modify your body widget like following -

body: new ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          return new ListTile(
            leading: const Icon(Icons.stay_primary_portrait),
            title: Text(data.length.toString()),
            subtitle: Text(data[keys[index]]),
            trailing: Icon(Icons.more_vert),
            dense: true,
            isThreeLine: true,
          );
        },
      ),

Hope this helps!

answered Jun 23, 2020 at 13:01

Tanuj

2,29013 silver badges20 bronze badges

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

Comments

ARAB KUMAR · Accepted Answer · 2020-06-23 11:48:49Z

0

Your Url hai double 'n' in json. are you sure about that?

answered Jun 23, 2020 at 11:48

ARAB KUMAR

961 silver badge8 bronze badges

1 Comment

Mohamed Borhene Hamedi Over a year ago

yes when i print response.body it show me the response in console

JideGuru · Accepted Answer · 2020-06-23 12:19:42Z

You're getting a Map from your API. you cannot use that on a ListView.builder. You can use a regular ListView and add the ListTiles manually.

Create the ListView and add the ListTiles manually using each key in the map.

body: ListView(
        children: <Widget>[
          buildTile('alm'),
          buildTile('co2'),
          buildTile('hu'),
          buildTile('temp'), // continue this for others
        ],
      ),

Create the ListTile to be used in the ListView

buildTile(String key){
    return ListTile(
      leading: const Icon(Icons.stay_primary_portrait),
      title: Text('$key'),
      subtitle: Text('${data['$key']}'),
      trailing: Icon(Icons.more_vert),
      dense: true,
      isThreeLine: true,
    );
  }

Collectives™ on Stack Overflow

Flutter how to parse JSON data

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related