如何从 flutter 中的 api 解析 json？

Question

我想从 Flutter 中的链接解析 JSON。 这是我的api 结构。

这是model.dart class 使用jsontodart.Z4D236D9A2D402C5FE6AD1C5生成

这是services.dart 。dart class：

import 'dart:convert';
import 'package:get_api/model.dart';
import 'package:http/http.dart' as http;

class Services {
  //
  static const String url = 'http://...............';
  static Future<List<User>> getUsers() async {
    try {
      final response = await http.get(url);
      if (response.statusCode == 200) {
        final body = jsonDecode(response.body);
        //print(body);
        final Iterable json = body;
        return json.map((user) => User.fromJson(user)).toList();
      } else {
        return List<User>();
      }
    } catch (e) {
      return List<User>();
    }
  }
}

这里是main.dart

import 'package:flutter/material.dart';
import 'package:get_api/model.dart';
import 'package:get_api/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: JsonParseDemo(),
    );
  }
}

class JsonParseDemo extends StatefulWidget {
  //
  JsonParseDemo() : super();
  @override
  _JsonParseDemoState createState() => _JsonParseDemoState();
}

class _JsonParseDemoState extends State<JsonParseDemo> {
  //
  List<User> _users;
  bool _loading;
  @override
  void initState() {
    super.initState();
    _loading = true;
    Services.getUsers().then((users) {
      setState(() {
        _users = users;
        _loading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_loading ? 'Loading...' : 'Users'),
      ),
      body: Container(
        color: Colors.white,
        child: ListView.builder(
          itemCount: _users == null ? 0 : _users.length,
          itemBuilder: (context, index) {
            User user = _users[index];
            return ListTile(
              title: Text(user.clientInfos[index].cLINTNAME),
              subtitle: Text(user.clientInfos[index].cLINTEMAIL),
            );
          },
        ),
      ),
    );
  }
}

但问题是它只显示一个列表。 如何显示所有列表？ 我不明白为什么它不起作用。

Answer 1

我修改了一些文件并创建了一个新文件，这里是我的代码：

model.dart

class User {
...

  String show() {
    if (success) {
      return '''
"clientInfos" has ${clientInfos.length} items 
"projectInfos" has ${projectInfos.length} items 
"ticketPriorityInfos" has ${ticketPriorityInfos.length} items 
"ticketTypeInfos" has ${ticketTypeInfos.length} items 
"ticketModeInfos" has ${ticketModeInfos.length} items 
"ticketStatusInfos" has ${ticketStatusInfos.length} items 
"ticketTitleInfos" has ${ticketTitleInfos.length} items 
''';
    } else {
      return "Nothing to show, what a pity!!!";
    }
  }
}

net_service.dart

import 'dart:convert';

import 'package:http/http.dart' as http;
import 'package:read_json2/models/model.dart';


class NetService {
  static Future fetchJsonData(String url) {
    return
      http.get(url)
        .then((response) => response?.statusCode == 200 ? jsonDecode(response.body) : null)
        .catchError((err) => print(err));
  }

  static Future<User> fetchTickesInfo() {
    return fetchJsonData('http://203.130.133.166/ATI-ERP2/ticket-lookup')
      .then((response) => (response != null) ? User.fromJson(response[0]) : null)
      .catchError((err) => print('OMFG!!! an error: $err'));
  }
}

home_page.dart

编辑：忘记列表项，但已解决

import 'package:flutter/material.dart';
import 'package:read_json2/models/model.dart';
import 'package:read_json2/services/net_service.dart';


class HomePage extends StatelessWidget {
  /* ---------------------------------------------------------------------------- */
  const HomePage({Key key}) : super(key: key);
  /* ---------------------------------------------------------------------------- */
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hi!'),
        centerTitle: true,
      ),
      body: FutureBuilder<User>(
        future: NetService.fetchTickesInfo(),
        builder: (context, snapshot) => snapshot.hasData
          ? ListView.builder(
            itemCount: snapshot.data.clientInfos.length,
            itemBuilder: (context, index) => Card(
              child: Column(
                children: [
                  Text(snapshot.data.clientInfos[index]?.cLINTNAME ?? '--'),
                  Text(snapshot.data.clientInfos[index]?.cLINTEMAIL ?? '--'),
                ],
              ),
            ),
          )
          : snapshot.hasError
            ? Text('Something was wrong!: ${snapshot.error}')
            : Text('Loading...'),
      ),
    );
  }
}

Answer 2

您的问题是如何计算列表的索引。 在您的 JSON 中，您有一个长度为 1 的数组，即您的用户，现在该用户有 57 个您正在使用的clientInfos 。 我假设你想显示这些，所以你应该有这样的东西：

@override
  Widget build(BuildContext context) {
    User user;
    if(_users != null && _users.length > 0) {
       user = _users[index];
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(_loading ? 'Loading...' : 'Users'),
      ),
      body: Container(
        color: Colors.white,
        child: ListView.builder(
          itemCount: user?.clientInfos?.length ?? 0,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(user.clientInfos[index].cLINTNAME),
              subtitle: Text(user.clientInfos[index].cLINTEMAIL),
            );
          },
        ),
      ),
    );
  }