Flutter Api how to display multiple data?-CodePudding

This code below display one data only because i put 0 at line final Album = Album.fromJson(data[0]);. I intend to display multiple data but I don't know how to do that. any idea?

Btw i got this code from https://docs.flutter.dev/cookbook/networking/fetch-data and modified it for my personal work.

Future<Album> fetchAlbum() async {
final response =
await http.get(Uri.parse('-----'));

if (response.statusCode == 200) {
  // If the server did return a 200 OK response,
  // then parse the JSON.
  final data = jsonDecode(response.body);
  final Album = Album.fromJson(data[0]);
  return Album;
} else {
  // If the server did not return a 200 OK response,
  // then throw an exception.
  throw Exception('Failed to load Album');
}

}

CodePudding user response：

If I understand your question correct, you want to return multiple Albums. If that is the case, you can return a List of Albums and work with a foreach loop. This could look like this, for example:

Future<List<Album>> fetchAlbum() async {
List<Album> myAlbums = [];
final response =
await http.get(Uri.parse('-----'));

if (response.statusCode == 200) {
  // If the server did return a 200 OK response,
  // then parse the JSON.
  final data = List<dynamic>.from(jsonDecode(response.body));
  data.forEach((element) { 
    myAlbums.add(Album.fromJson(element));
  });
  return myAlbums;
} else {
  // If the server did not return a 200 OK response,
  // then throw an exception.
  throw Exception('Failed to load Album');
}

CodePudding user response：

You need to make a list-type Album.

Future<Album> fetchAlbum() async {
final response =
await http.get(Uri.parse('-----'));

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    final data = jsonDecode(response.body);
    var listAlbum = data.map<Album>((json) => Album.fromJson(json)).toList();
    return listAlbum; 
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load Album');
  }
}

CodePudding user response：

Your json must be like this=> [{ "userId": 1, "id": 1, "title": "quidem molestiae enim" }, { "userId": 2, "id": 2, "title": "quidem molestiae" }]

Update your Album class like this.

import 'dart:convert';
List<Album> albumFromJson(String str) => List<Album>.from(json.decode(str).map((x) => Album.fromJson(x)));

class Album {
Album({
this.userId,
this.id,
this.title,});
  
int userId; int id;String title;

factory Album.fromJson(Map<String, dynamic> json) => Album(
userId: json["userId"],
id: json["id"],
title: json["title"],);}

Then, update your code

Future<Album> fetchAlbum() async {

Future<List<Album>> fetchAlbum() async {

and

final Album = Album.fromJson(data[0]);
return Album;

final List<Album> AlbumList = albumFromJson(data);
return AlbumList;

Now you can get display multiple data (Data list);