使用http解析飞镖颤振中的产品列表时出错

Question

我有一个 api，我想从中解析一些数据，我有一个将数据转换为 dart 模型类的插件，但是每当我尝试获取响应时，如果有人可以提供帮助，它会一直显示错误，将不胜感激

• 这是api链接

 https://fakestoreapi.com/products/category/electronics 

• 这是模型类（使用 dart 插件生成）

class ProductsModel {
    String category;
    String description;
    int id;
    String image;
    double price;
    String title;

    ProductsModel({this.category, this.description, this.id, this.image, this.price, this.title});

    factory ProductsModel.fromJson(Map<String, dynamic> json) {
        return ProductsModel(
            category: json['category'], 
            description: json['description'], 
            id: json['id'], 
            image: json['image'], 
            price: json['price'], 
            title: json['title'], 
        );
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['category'] = this.category;
        data['description'] = this.description;
        data['id'] = this.id;
        data['image'] = this.image;
        data['price'] = this.price;
        data['title'] = this.title;
        return data;
    }
}

• 这就是我解析数据的方式

void main(){
  runApp(MaterialApp(
    home: FirstScreenApp(),
    debugShowCheckedModeBanner: false,
  ));
}

class FirstScreenApp extends StatefulWidget {
  @override
  _FirstScreenAppState createState() => _FirstScreenAppState();
}

class _FirstScreenAppState extends State<FirstScreenApp> {

  Future<ProductsModel> _getElectronics() async {
    var url = "https://fakestoreapi.com/products/category/electronics";
    var response = await http.get(Uri.parse(url));
    if(response.statusCode == 200){
      // success
      var decodedResponse = json.decode(response.body);
      return ProductsModel.fromJson(decodedResponse);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: FutureBuilder<ProductsModel>(
         future: _getElectronics(),
         builder: (context,data){
           if(data.hasError){
             return Center(
               child: Text("Error " + data.error.toString()),
             );
           }
           if(data.connectionState == ConnectionState.done){
             return ListView.builder(
               itemCount: 4 ,
               itemBuilder: (context,index){
                 return Container(
                   margin: const EdgeInsets.all(10),
                   child: Card(
                     elevation: 10,
                     child: Padding(
                       padding: const EdgeInsets.all(12.0),
                       child: Row(
                         children: [
                           Image.network(data.data.image),
                           SizedBox(height: 10,),
                           Column(
                             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
                               Text("League : " + data.data.title),
                               Text("Sport : " + data.data.category),
                               Text("DP : " + data.data.price.toString())
                             ],
                           ),
                         ],
                       )
                     ),
                   ),
                 );
               },
             );
           }
           return Center(
             child: CircularProgressIndicator(),
           );
         },
       ),
    );
  }
}

 * This is the error generated

type 'List 不是

Answer 1

您可以通过以下方式获取 JSON 列表。

 Future<List<ProductsModel>> _getElectronics() async {
    var url = "https://fakestoreapi.com/products/category/electronics";
    var response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      // success
      List decodedResponse = json.decode(response.body);

   
      return decodedResponse
          .map((data) => ProductsModel.fromJson(data))
          .toList();
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load data');
    }
  }

您可以复制粘贴我的代码并感谢我。

 import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class FirstScreenApp extends StatefulWidget {
  @override
  _FirstScreenAppState createState() => _FirstScreenAppState();
}

class _FirstScreenAppState extends State<FirstScreenApp> {
  Future<List<ProductsModel>>? loadedData;
  Future<List<ProductsModel>> _getElectronics() async {
    var url = "https://fakestoreapi.com/products/category/electronics";
    var response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      // success
      List decodedResponse = json.decode(response.body);

      // var d=decodedResponse.map((data) => ProductsModel.fromJson(data)).toList();
      print(decodedResponse[1]);
      return decodedResponse
          .map((data) => ProductsModel.fromJson(data))
          .toList();
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load data');
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    loadedData = _getElectronics();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<ProductsModel>>(

        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(
              child: Text("Error " + snapshot.error.toString()),
            );
          }
          if (snapshot.connectionState == ConnectionState.done) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return Container(
                  margin: const EdgeInsets.all(10),
                  child: Card(
                    elevation: 10,
                    child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Row(
                          children: [
                            Image.network(snapshot.data![index].image!),
                            SizedBox(
                              height: 10,
                            ),
                            Column(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                    "League : " + snapshot.data![index].title!),
                                Text("Sport : " +
                                    snapshot.data![index].category!),
                                Text("DP :  ${snapshot.data![index].price!} ")
                              ],
                            ),
                          ],
                        )),
                  ),
                );
              },
            );
          }
          return Center(
            child: CircularProgressIndicator(),
          );
        },
        future: loadedData,
      ),
    );
  }
}

这是你的模型类

class ProductsModel {
  final category;
  final description;
  final id;
  final image;
  final price;
  final title;

  ProductsModel(
      {this.category,
      this.description,
      this.id,
      this.image,
      this.price,
      this.title});

  factory ProductsModel.fromJson(Map<String, dynamic> json) {
    return ProductsModel(
      id: json['id'],
      title: json['title'],
      price: json['price'],
      description: json['description'],
      category: json['category'],
      image: json['image'],
    );
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['category'] = this.category;
    data['description'] = this.description;
    data['id'] = this.id;
    data['image'] = this.image;
    data['price'] = this.price;
    data['title'] = this.title;
    return data;
  }
}