Flutter：无法获取 json API 数据

Question

I am trying to fetch data from a json API to my flutter mobile application. But I failed.

I think I have a problem in my model.dart file.

Here is my code for model.dart

import 'dart:async';
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;

Future<List<Book>> fetchBooks(http.Client client) async {
  final response =
      await client.get('https://boimarket.abirahsan.com/public/api/v1/books');

  // Use the compute function to run parsePhotos in a separate isolate.
  return compute(parseBooks, response.body);
}

// A function that converts a response body into a List<Photo>.
List<Book> parseBooks(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();

  return parsed.map<Book>((json) => Book.fromJson(json)).toList();
}

class Book {
  final String name;
  final String author;
  final String genreClass;
  final String imgUrl;
  final String pdf;
  final int category;

  Book({
    this.name,
    this.author,
    this.genreClass,
    this.imgUrl,
    this.pdf,
    this.category,
  });

  factory Book.fromJson(Map<String, dynamic> json) {
    return Book(
      name: json['name'] as String,
      imgUrl: json['image'] as String,
      pdf: json['pdf'] as String,
      author: json['author'] as String,
      genreClass: json['genre_class'] as String,
      category: json['category'] as int,
    );
  }
}

and here is my output Image

Where is the problem? And How can I fix it?

Answer 1

Replace your parseBooks function with the given function. The cast method takes <RK, RV>() not Map<Rv,RK>(). The compiled also told to replace cast<Map<String,dynamic>>() with cast<String,dynamic>(). You can read more about the cast method here https://api.dart.dev/stable/2.8.4/dart-core/Map/cast.html .

You can also use as keyword instead of cast method.

final parsed = jsonDecode(responseBody) as Map<String, dynamic>;

List<Book> parseBooks(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<String, dynamic>();
  return parsed['data'].map<Book>((json) => Book.fromJson(json)).toList();
}