Flutter：如何 map 嵌套 json object

Question

I'm new to flutter and am trying to get data into a list view in my app.

I have this json object structure retrieved from a webserver:

{
  "item_data1":
  {
    "index": 0, 
    "age": 39, 
    "picture": "http://placehold.it/32x32", 
    "name": "Sospeter", 
    "email": "sospeter@123.com"
  }, 
  "item_data2":
  {
    "index": 1, 
    "age": 49, 
    "picture": "http://placehold.it/32x32", 
    "name": "Eric", 
    "email": "mericr@123.com"
  }
}

NB: The keys "item_data1" and "item_data2" are dynamic and cannot be pre-determined in code.

You may use the following link to get the json: http://www.json-generator.com/api/json/get/bUAhSFmhNK?indent=2

My intention is to dart:convert the json in my project.

So far I have this:

Future<List<User>> _getUsers() async {

    var url = "http://www.json-generator.com/api/json/get/bUAhSFmhNK?indent=2"; //Obj
    var data = await http.get(url);

    var jsonData = json.decode(data.body);
    //print(jsonData.toString()); <-- returns data
    List<User> users = [];

    for(var u in jsonData){ <!-- breaks

      User user = User(u["index"], u["age"], u["name"], u["email"], u["picture"]);

      users.add(user);

    }

    //print(users.length);

    return users;

  }

How can I safely get the "name", "email",...etc?

I'm stumped. I'll appreciate any help I can get:)

Answer 1

You can use the Object from json approach.

https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51

It consist of defined a function which will parse the icoming json and build your object, setting null when properties missing.

Answer 2

Try changing
var jsonData = json.decode(data.body);
to
var jsonData = json.decode(data.body) as Map<String, dynamic>;

Then use

 jsonData.forEach((k, v) => print("Key : $k, Value : $v"));

to see what you have.

You should then be able to populate your User object and add it to the list with the following code:

    User user = User(v["index"], v["age"], v["name"], v["email"], v["picture"]);
    users.add(user);

(I am assuming your User model is set up to support this)

Answer 3

Another way:

import 'package:http/http.dart' as http;
import 'package:json_helpers/json_helpers.dart';

Future<void> main() async {
  final users = await _getUsers();
  print(users.first.name);
}

Future<List<User>> _getUsers() async {
  final url = 'http://www.json-generator.com/api/json/get/bUAhSFmhNK?indent=2';
  final response = await http.get(Uri.parse(url));
  final map = response.body.jsonMap((e) => User.fromJson(e));
  return map.values.toList();
}

class User {
  int age;
  int index;
  String email;
  String name;
  String picture;

  User({this.age, this.email, this.index, this.name, this.picture});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      age: json['age'] as int,
      email: json['email'] as String,
      index: json['index'] as int,
      name: json['name'] as String,
      picture: json['picture'] as String,
    );
  }
}

Output:

Eric