arrays - 在 Flutter 中编码/解码复杂的 Json

Question

我将使用真正的 json。首先，我应该运行一下用Flask写的项目，然后使用本地主机实现数据。这是我正在使用的真实 Json

{
   "devices":[
      {
         "device_desc":"cooler",
         "device_title":"cooler",
         "functions":[
            {
               "device_id":1,
               "function_desc":"pomp",
               "function_title":"pomp",
               "status":1
            },
            {
               "device_id":1,
               "function_desc":"less",
               "function_title":"less",
               "status":1
            },
            {
               "device_id":1,
               "function_desc":"up",
               "function_title":"up",
               "status":1
            }
         ],
         "image_path":"fdfdfsf",
         "status_id":1,
         "statuss":{
            "status_desc":"device is on",
            "status_title":"on"
         }
      },
      {
         "device_desc":"panke",
         "device_title":"panke",
         "functions":[
            {
               "device_id":2,
               "function_desc":"less",
               "function_title":"pomp",
               "status":2
            },
            {
               "device_id":2,
               "function_desc":"less",
               "function_title":"less",
               "status":2
            }
         ],
         "image_path":"vfx",
         "status_id":2,
         "statuss":{
            "status_desc":"device is off",
            "status_title":"off"
         }
      }
   ]
}

这是我的代码:

这些是定义 json 属性的数据模型:

class Base{
//the type of our object is the array
  List<Device> _devices;


  Base(this._devices);

  List<Device> get devices => _devices;

  set devices(List<Device> value) {
    _devices = value;
  }
}

class Device {
  String _device_desc,_device_title,_image_path;
  int _status_id;
  List<function> _functions;
  List<Status> _statuss ;

  Device(this._device_desc, this._device_title, this._image_path,
      this._status_id, this._functions, this._statuss);

  List<Status> get statuss => _statuss;

  set statuss(List<Status> value) {
    _statuss = value;
  }

  List<function> get functions => _functions;

  set functions(List<function> value) {
    _functions = value;
  }

  int get status_id => _status_id;

  set status_id(int value) {
    _status_id = value;
  }

  get image_path => _image_path;

  set image_path(value) {
    _image_path = value;
  }

  get device_title => _device_title;

  set device_title(value) {
    _device_title = value;
  }

  String get device_desc => _device_desc;

  set device_desc(String value) {
    _device_desc = value;
  }
}

class Status {
  String _status_desc, _status_title;

  Status(this._status_desc, this._status_title);

  get status_title => _status_title;

  set status_title(value) {
    _status_title = value;
  }

  String get status_desc => _status_desc;

  set status_desc(String value) {
    _status_desc = value;
  }}
class function {
   String _function_desc, _function_title;
   int _device_id, _status;

   function(this._function_desc, this._function_title, this._device_id,
       this._status);

   get status => _status;

   set status(value) {
     _status = value;
   }

   int get device_id => _device_id;

   set device_id(int value) {
     _device_id = value;
   }

   get function_title => _function_title;

   set function_title(value) {
     _function_title = value;
   }

   String get function_desc => _function_desc;

   set function_desc(String value) {
     _function_desc = value;
   }}

这是有状态的类:

class MyHomePage extends StatefulWidget {
  var title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  Future<Base> _getBase() async {
var data = await http.get(Uri.encodeFull("http://192.168.1.111:5000/mobile-home"));
var jsonData = json.decode(data.body);

Base base = Base(jsonData);
  return Base(jsonData[0]);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Container(
        child: FutureBuilder(
          future: _getBase(),
          builder: (BuildContext context,  AsyncSnapshot snapshot) {
            if (snapshot.data == null) {
              return Container(
                child: Center(
                  child: Text("Loading..."),
                ),
              );
            } else {
              return ListView.builder(
                itemCount: snapshot.data.devices.length,
                itemBuilder: (BuildContext context, int index) {
                  snapshot.data.devices.map<Widget>((devices){
                    return ListTile(
                      subtitle: Text(devices[index].device_desc.toString()),
                      title: Text(devices[index].device_title),
                      /*leading: CircleAvatar(
                      // ignore: argument_type_not_assignable
                      backgroundImage:  NetworkImage(snapshot.data[index].thumbnailUrl),
                    )*/
                    );
                  }
                  );

                },
              );
            }
          },
        ),
      ),
    );
  }
}

调试时出现错误:

 "type 'List<dynamic>' is not a subtype of type 'List<Device>'"

我无法从 json 中获取数据。

Answer 1

你的问题没有问题，但我认为问题是:

My Json code is not working - How do I efficiently parse and encode complex json objects in my flutter program.

对于复杂的 JSON，您可能需要考虑使用代码生成来减少您必须编写的样板。 flutter 页面有一个很好的使用 JsonSerializable 的例子。以下是您示例的基本说明:

1. 将依赖添加到pubspec.yaml 并在命令行中运行flutter pub get:

    dependencies:        
        json_annotation: ^1.2.0

    dev_dependencies:       
        build_runner: ^1.0.0 
        json_serializable: ^1.5.1

1. 创建基本对象模型(类似于您所做的)。除了以下差异:

   1. 您没有字段状态的状态列表，而是单个状态对象。
   2. 不要使用私有(private)字段。

2. 要启用 json 样板代码生成，请执行以下三个步骤:

   1. 为每个类添加 json-annotations，
   2. 在每个类上添加一个工厂 .fromJson 方法并
   3. 在每个类上添加一个 .toJson 方法:

    @JsonSerializable()
    class Base {
      List<Device> devices;
      Base({this.devices});
      factory Base.fromJson(Map<String, dynamic> json) => _$BaseFromJson(json);     
      Map<String, dynamic> toJson() => _$BaseToJson(this); 
    }

    @JsonSerializable()
    class Device {
      String device_desc,device_title,image_path;
      int status_id;
      List<function> functions;
      Status statuss ;
      Device(this.device_desc, this.device_title, this.image_path,
          this.status_id, this.functions, this.statuss);
      factory Device.fromJson(Map<String, dynamic> json) => _$DeviceFromJson(json);       
      Map<String, dynamic> toJson() => _$DeviceToJson(this); 
    }

    @JsonSerializable()
    class Status {
      String status_desc, status_title;
      Status(this.status_desc, this.status_title);
      factory Status.fromJson(Map<String, dynamic> json) => _$StatusFromJson(json);   
      Map<String, dynamic> toJson() => _$StatusToJson(this); 
    }

    @JsonSerializable()
    class function {
      String function_desc, function_title;
      int device_id, status;
      function(this.function_desc, this.function_title, this.device_id,
          this.status);
      factory function.fromJson(Map<String, dynamic> json) => _$functionFromJson(json);  
      Map<String, dynamic> toJson() => _$functionToJson(this);       
    }

1. 运行命令行以在项目根文件夹中开始代码生成:

    flutter packages pub run build_runner watch

1. 现在会出现一个额外的源文件，其中包含您生成的样板代码。使用 part 关键字将此文件添加到您自己的源文件中，例如，如果您的源文件是 main.dart，请添加以下行:

    part 'main.g.dart';

大功告成 - 这就是测试编码/解码所需的全部内容。例如使用以下代码:

    import 'dart:convert';
    void main() => (){
      var jsonExample = '{"devices": [{"device_desc": "cooler", "device_title": "cooler", "functions": [{"device_id": 1, "function_desc": "pomp", "function_title": "pomp", "status": 1}, {"device_id": 1, "function_desc": "less", "function_title": "less", "status": 1}, {"device_id": 1, "function_desc": "up", "function_title": "up", "status": 1}], "image_path": "fdfdfsf", "status_id": 1, "statuss": {"status_desc": "device is on", "status_title": "on"}}, {"device_desc": "panke", "device_title": "panke", "functions": [{"device_id": 2, "function_desc": "less", "function_title": "pomp", "status": 2}, {"device_id": 2, "function_desc": "less", "function_title": "less", "status": 2}], "image_path": "vfx", "status_id": 2, "statuss": {"status_desc": "device is off", "status_title": "off"}}]}';

      Map base_example = json.decode(jsonExample);
      Base base_example_parsed = Base.fromJson(base_example);
      var numberDevices = base_example_parsed.devices.length;
      var numberFuncs = base_example_parsed.devices[0].functions.length;
      print('$base_example_parsed has $numberDevices devices and the first device has $numberFuncs functions');

      var base_example_encoded_again = json.encode(base_example_parsed);
      print('$base_example_encoded_again');
    };

更多信息请引用: 1.official example . 2.这个blog .