我想在Flutter中显示复杂的JSON数据，但一无所获

如何解决我想在Flutter中显示复杂的JSON数据，但一无所获

我正在尝试从URL向我的Flutter应用程序显示JSON数据，但尚未找到任何解决方案。

如何在Flutter的ListView中显示此数据？

这是我完整的Flutter项目代码：

Main.dart

import 'package:flutter/material.dart';
import 'package:jsontest/Json.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Cricket',theme: new ThemeData(
        primarySwatch: Colors.green,),home: new JsonParseDemo(),);
  }
}

Match.dart Json Data处于组织形式的地方

import 'dart: convert';

Match matchesFromJson(String str) => Match.fromJson(json.decode(str));

String matchesToJson(Match data) => json.encode(data.toJson());

class Match {
  Match({
    this.name,this.status,});


  String name;
  String status;

  factory Match.fromJson(Map<String,dynamic> json) => Match(

    name: json["name"],status: json["status"],);

  Map<String,dynamic> toJson() => {
    "name": name,"status": status,};
}

Service.dart 这是获取JSON数据的基本URL

import 'package:http/http.dart' as http;
import 'Users.dart';
class Services {
  //
  static const String url = 'https://api.cricket.com.au/matches';

  static Future<List<Match>> getMatches() async{
  try{
    final response = await http.get(url);
    if (200 == response.statusCode){
      final List<Match> match = matchesFromJson(response.body) as List<Match>;
          return match;
    }
    else{
      return List<Match>();
    }
  }
  catch(e){
    return List<Match>();
  }
  }
}

这是我要显示数据的主类代码。

JsonParser.dart

import 'package:flutter/material.dart';
import 'Services.dart';
import 'Users.dart';

class JsonParseDemo extends StatefulWidget {
  //
  JsonParseDemo() : super();

  @override
  _JsonParseDemoState createState() => _JsonParseDemoState();
}

class _JsonParseDemoState extends State<JsonParseDemo> {
  //
  List<Match> _match;
  bool _loading;

  @override
  void initState() {
    super.initState();
    _loading = true;
    Services.getMatches().then((matches) {
      setState(() {
        _loading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_loading ? 'Loading...' : 'Matches'),body: Container(
        color: Colors.white,child: ListView.builder(
          itemCount: null == _match ? 0 : _match.length,itemBuilder: (context,index) {
            Match match = _match[index];
            return ListTile(
              title: Text(match.name),subtitle: Text(match.status),);
          },);
  }
}

如何从此JSON获取匹配项的“名称和状态”？

解决方法

在下面尝试我的代码：

json_parse_demo_screen.dart

class JsonParseDemo extends StatefulWidget {
  //
  JsonParseDemo() : super();

  @override
  _JsonParseDemoState createState() => _JsonParseDemoState();
}

class _JsonParseDemoState extends State<JsonParseDemo> {
  //
  List<Match> _match;
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _loading = true;
    Services.getMatches().then((matches) {
      setState(() {
        _match = matches;
        _loading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_loading ? 'Loading...' : 'Matches'),),body: Container(
        color: Colors.white,child: ListView.builder(
          itemCount: null == _match ? 0 : _match.length,itemBuilder: (context,index) {
            Match match = _match[index];
            return ListTile(
              title: Text(match.name),subtitle: Text(match.status),);
          },);
  }
}

match.dart

import 'dart:convert';

String matchesToJson(Match data) => json.encode(data.toJson());

class Match {
  Match({
    this.name,this.status,});


  String name;
  String status;

  factory Match.fromJson(Map<String,dynamic> json) => Match(
    name: json["name"],status: json["status"],);

  Map<String,dynamic> toJson() => {
    "name": name,"status": status,};
}

service.dart

在这里，您将必须检查获得的响应的层次结构。

响应的层次结构是：

- meta
- matchList
    - matches

然后，您必须寻找期望的结果（此处匹配）

class Services {
  //
  static const String url = 'https://api.cricket.com.au/matches';

  static Future<List<Match>> getMatches() async{
    try{
      final response = await http.get(url);
      final responseFormatted = json.decode(response.body);

      final matches = responseFormatted["matchList"]["matches"];
      if (200 == response.statusCode){
        final List<Match> match = matches.map<Match>((item) => Match.fromJson(item)).toList();
        return match;
      }
      else{
        return List<Match>();
      }
    }
    catch(e){
      return List<Match>();
    }
  }
}

输出

,

您没有初始化match

List<Match> _match;

您可以这样做

Services.getMatches().then((matches) {
      setState(() {
         _match=matches
       _loading = false;
     });
    });