Type error in http method while fetching data from api(php)

Question

Why I'm getting this exception:

_TypeError (type 'List<dynamic>' is not a subtype of type 'Map<String, dynamic>')

this is my http method:

import 'dart:convert';
import 'package:arzenafees/model/areaguide.dart';
import 'package:http/http.dart' as http;

Future<Areaguide> fetcharea() async {
  final response = await http.get(
      Uri.parse('https://arz-e-nafees.nafeessolutions.com/public/api/view'));
  if (response.statusCode == 200) {
    return Areaguide.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Unexpected error occured!');
  }
}

this is my model class which I created using quicktype.io:

import 'dart:convert';

List<Areaguide> areaguideFromJson(String str) =>
    List<Areaguide>.from(json.decode(str).map((x) => Areaguide.fromJson(x)));

String areaguideToJson(List<Areaguide> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Areaguide {
  Areaguide({
    required this.propertyImage,
    required this.propertyTitle,
    required this.locationCity,
    required this.locationArea,
    required this.propertyDescription,
    required this.propertyPrice,
  });

  String propertyImage;
  String propertyTitle;
  String locationCity;
  String locationArea;
  String propertyDescription;
  String propertyPrice;

  factory Areaguide.fromJson(Map<String, dynamic> json) => Areaguide(
        propertyImage: json["property_image"],
        propertyTitle: json["property_title"],
        locationCity: json["location_city"],
        locationArea: json["location_area"],
        propertyDescription: json["property_description"],
        propertyPrice: json["property_price"],
      );

  Map<String, dynamic> toJson() => {
        "property_image": propertyImage,
        "property_title": propertyTitle,
        "location_city": locationCity,
        "location_area": locationArea,
        "property_description": propertyDescription,
        "property_price": propertyPrice,
      };
}

please provide answer which applies to all related question, do not limits it to this specific problem, which might help others with type errors.

If you getting data from API and display it into Flutter. refer my answers [Answer 1](https://stackoverflow.com/a/68533647/13997210), [Answer 2](https://stackoverflow.com/a/68807671/13997210), [Answer 3](https://stackoverflow.com/a/69131277/13997210), [Answer 4](https://stackoverflow.com/a/68709502/13997210), [Answer 5](https://stackoverflow.com/a/68594656/13997210) and official documentation [here](https://docs.flutter.dev/cookbook/networking/fetch-data), I have try your solution in other format it working good but some images gives error they are not display — Ravindra S. Patil, Jun 08 '22 at 06:07
Since we do not know what JSON you get we don't know what's wrong. Can you post the JSON you get from the API? The most obvious guess would be that your API does indeed not deliver *one* item, but a list of items. If that were the case, what would you like to do with it? — nvoigt, Jun 08 '22 at 06:14
@nvoigt yes u r right, api is giving list of maps, will you please check Maqsood answer, it is working but not explained — Ali Punjabi, Jun 09 '22 at 05:30
@Ravindra S. Patil, yes, some images are just network path and some are base64encode, will you please tell me how to show base64encode image in cards from api, maqsood answer is working, but I want to get image not image path i.e network path — Ali Punjabi, Jun 09 '22 at 05:32

score 2 · Accepted Answer · answered Jun 08 '22 at 06:22

2

Try this.

static Future<List<Areaguide>?> fetcharea() async {
       
        final response = await http.get(
            Uri.parse('https://arz-e-nafees.nafeessolutions.com/public/api/view));
                if (response.statusCode == 200) {
                  List<Areaguide> property = (json.decode(response.body)).map<Areaguide>((m)=> Areaguide.fromJson(m)).toList();
                  return property;
            } else {
            throw Exception('Unexpected error occured!');
            }
        }

answered Jun 08 '22 at 06:22

Maqsood

807
3
14

yes, your code is working, but please explain me how u resolve it by adding this line:.map((m)=> Areaguide.fromJson(m)).toList() and how it is working, after that I will mark your answer accepted and upvote it. – Ali Punjabi Jun 09 '22 at 05:27
1

Simple list of objects is coming in your (response.body). I simple map that list of objects coming in response with your Model (Areaguide) and parse it with your fromJson and made it a list of Areaguide. – Maqsood Jun 09 '22 at 05:36

score 0 · Answer 2 · answered Jun 08 '22 at 06:35

Instead of writing fromJson and toJson methods, you can use json_serializable library (https://docs.flutter.dev/development/data-and-backend/json). In short: after installing the dependency you just define your model and run a command. It works also for nested models.

Type error in http method while fetching data from api(php)

2 Answers2