how to access properties of json object flutter

Question

I want to access the properties of this json object and display them for test purposes on the screen.

I can display the whole json object on the screen:

{
  "2021": {
            "januari": {
                "value": 100,
            },
            "februari": {
                "value": 200,
            },
        }
"2022": {
            "januari": {
                "value": 100,
            },
            "februari": {
                "value": 200,
            },
        }
}

This is how i display it:

 Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Page View'),
        ),
        body: Container(
            child: Card(
                child: FutureBuilder(
          future: getJson(),
          builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
            if (snapshot.hasData) {
              return Text(snapshot.data);
            }
            return const Text("no data");
          },
        ))));
  }

It displays the json exactly like i showed with the example. I just wonder how i can access and show the properties for example "2021", "januari" and the value of "value" on the screen?

Edit

When i do: Text(snapshot.data['2021']['januari'])

i get: type 'String' is not a subtype of type 'int' of 'index'

This is what i get when i do that: type 'String' is not a subtype of type 'int' of 'index' — FDjawid
– FDjawid, Commented Dec 26, 2021 at 12:33
try: Text(snapshot.data['2021']['januari']['value'].toString()) — Er1
– Er1, Commented Dec 26, 2021 at 14:42

Arti Scream · Accepted Answer · 2021-12-26 17:44:03Z

2

Here is sample for you. You can take it in dartpad. So to fix you behavior probably take your snapshot data and put it inside Map<dynamic,dynamic> and then use it like in code below.

import 'dart:convert';

String data = '''{
  "2021": {
    "januari": {
      "value": 100
    },
    "februari": {
      "value": 200
    }
  },
  "2022": {
    "januari": {
      "value": 100
    },
    "februari": {
      "value": 200
    }
  }
} ''';

void main() { 

  Map<dynamic,dynamic> json = jsonDecode(data);
  print(json.keys.first);
  print(json['2021'].keys.first);
  print(json['2021']['januari']['value']);
}

answered Dec 26, 2021 at 17:44

Arti Scream

1401 silver badge17 bronze badges

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

Collectives™ on Stack Overflow

how to access properties of json object flutter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related