How to solve this Error Unhandled Exception: type 'List<dynamic>' is not a subtype of type 'Map<String, dynamic>

Question

Here I am Trying to Fetch data from PHP by using http Request and I get the Array JSon Format looks like this:

[
    {
        "productId": "8",
        "product_reference": "439588839",
        "product_title": "Fried potatoes",
        "price": "12.0",
        "buying_price": "5.0",
        "discounted_price": "0.0",
        "discription": "Slices of Potato, seasoning and sauce. Preparation Time: 20 min",
        "preparationTime": "0",
        "productImagePath": "productImages/IMG-produt63e3b504bb3664.13306114.jpg",
        "categoryId": "1",
        "unitId": "8",
        "product_status": "1",
        "createdOn": "2023-02-08 16:43:16",
        "udatedOn": "2023-02-08 16:43:16",
        "addedBy": "1"
    }
]

And in Flutter I have function that will help me to get data called fetchProduct() inside the Product Controller Looks Like This:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:http/http.dart' as http;
import 'package:restaurentapp/api_connection/api_connection.dart';
import 'package:restaurentapp/model/product_model.dart';

class ProductController extends GetxController {
  var productList = <ProductModel>[].obs;
  var isLoading = true.obs;

  @override
  void onInit() {
    super.onInit();
    fetchProduct();
  }

  Future<void> fetchProduct() async {
    final response = await http.get(Uri.parse(API.getCardDataProduct));
    // print("enockDataProduct:${response.body}");
    if (response.statusCode == 200) {
      ProductModel productModel = ProductModel.fromJson(jsonDecode(response.body));

      productList.add(
        ProductModel(
          productId: productModel.productId,
          title: productModel.title,
          product_reference: productModel.product_reference,
          product_price: productModel.product_price,
          buying_price: productModel.buying_price,
          product_description: productModel.product_description,
          product_category: productModel.product_category,
          unitId: productModel.unitId,
          productImagePath: productModel.productImagePath,
        ),
      );
      isLoading.value = true;
    }else{
      Get.snackbar("Error Loading data!", 'Server Response: ${response.statusCode}: ${response.reasonPhrase.toString()}');
    }
  }
}

and the model where I the Map String Dynamic

class ProductModel {
  String productId;
  String title;
  String product_reference;
String product_price;
String buying_price;
String product_description;
String product_category;
String unitId;
String productImagePath;

  ProductModel({
    required this.productId,
    required this.title,
    required this.product_reference,
    required this.product_price,
    required this.buying_price,
    required this.product_description,
    required this.product_category,
    required this.unitId,
    required this.productImagePath,
  });

  factory ProductModel.fromJson(Map<String, dynamic> json) {
    return ProductModel(
      productId: json['productId'],
      title: json['product_title'],
      product_reference: json['product_reference'],
      product_price: json['product_price'],
      buying_price: json['buying_price'],
      product_description: json['product_description'],
      product_category: json['product_category'],
      unitId: json['unitId'],
      productImagePath: json['productImagePath'],
    );
  }
}

Please I need this Please help for me! help as soon as possible! Please.

Answer 1

Here, You are trying to convert the List type to Map, which is invalid. You need to update the decode line with the following code.

List<ProductModel>.from(jsonDecode(response.body).map((x) => ProductModel.fromJson(x)))

It will bring a direct List from Json, you don't need to add a model to the list.

Future<void> fetchProduct() async {
  final response = await http.get(Uri.parse(API.getCardDataProduct));
  // print("enockDataProduct:${response.body}");
  if (response.statusCode == 200) {
    final productList = List<ProductModel>.from(
        jsonDecode(response.body).map((x) => ProductModel.fromJson(x)));

    productList.addAll(productList);
    isLoading.value = true;
  } else {
    Get.snackbar("Error Loading data!",
        'Server Response: ${response.statusCode}: ${response.reasonPhrase.toString()}');
  }
}