👓

[Flutter]API経由でJSONを取得、パースする方法

2 min read
Aパターン
{
  “data” : [
    { "id": 1, "name": "tanaka" },
    { "id": 2, "name":"nakata" }
  ]  
}
Bパターン
[
  {"id": 1, "name": "tanaka"},
  {"id": 2, "name": "nakata"}
]

多くのAPIサーバはAパターンでレスポンスしますが、Bパターンの形式もあります。
本記事ではhttpパッケージでAPIサーバにGETでリクエストし、レスポンスの形式別にパースする方法を説明します。

パッケージをプロジェクトに追加

$ flutter pub add http

Aパターン

Google Books APIをサンプルにし、プログラムを説明します。

GETし、APIをパースする

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

class Book {
  final int totalItems;
  final List items;

  Book({
    required this.totalItems,
    required this.items,
  });

  factory Book.fromJson(Map<String, dynamic> json) {
    return Book(
      totalItems: json['totalItems'],
      items: json['items'],
    );
  }
}

Future<Book> fetchBook() async {
  final response = await http.get(Uri.parse('https://www.googleapis.com/books/v1/volumes?q=%E8%BE%BB%E6%9D%91%E6%B7%B1%E6%9C%88'));

  if (response.statusCode == 200) {
    return Book.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}

(Book)インスタンスを結果として返します。

APIの値を取得

fetchAPI.dart
fetchBook().then((value) => _apiInfo(value));
viewResult.dart
void _apiInfo(Book data) {
  /// "totalItems"を表示
  print(data.totalItems);
  /// "items"の要素を全て表示
  for(var i = 0; i < data.items.length; i++) {
    print(data.items[i]);
  }
  /// "items"の要素0のidを表示
  print(data.items[0]['id']);
}

Bパターン

サンプルに適したAPIが見当たらないため、一部簡略化して説明します。

GETし、APIをパースする

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

class Server {
  final int id;

  Server.fromJson(Map<int, dynamic> json):
        id = json['id'],
}

Future<Map<id, String>> fetchServer() async {
  final response = await http.get(Uri.parse('リクエストURL'));

  if (response.statusCode == 200) {
    int number = 0;
    for(var i = 0; i < json.decode(response.body).length; i++) {
      number += Server.fromJson(json.decode(response.body)[i]).id as int;
    }
    return number;
  } else {
    throw Exception('Fail to search repository');
  }
}

変数を結果として返します。(形式は求める情報によって、書き分けてください)

APIの値を取得

fetch_viewResult.dart
fetchServer().then((value) => print(value));

おまけ

  • Aパターンは前者、後者どちらでもパースが可能です。しかし、Bパターンは後者しかパースできません。
  • (ステータスコード)200はサーバにリクエストが受理され、レスポンスが返ってきたことです。

Discussion

ログインするとコメントできます