json.decode to List<Map<String,dynamic>> issue in flutter

Question

snap shot from the code

Hello I am trying to get Data from API And put it inside List<Map<String,dynamic>> I use a several ways but they doesn't work In the image the data saved in the variable but when i use foreach it ignore the index 0 I try to print index 0 and it is ignore it and ignore print (extracted data [0]) and i can't print the length of that list it ignore the print Their is no errors Snapshot of the console

I am using flutter 2.8.0 And dart 2.15.0

Answer 1

Whenever flutter is acting strange, I recommend running the following commands (close the debug session first):

Command 1

flutter clean

Command 2

flutter pub get

If it's still acting strange, it means that the problem is in the code.

Now, your code runs perfectly on my computer, so I'm not sure what the problem is. Although we can try another aproach with it:

Future<void> initAndSet() async {
    var url = 'http://muhammeddevxd.pythonanywhere.com/api/ecommerce';
    final response = await http.get(Uri.parse(url));
    var extractedData =
        List<Map<String, dynamic>>.from(jsonDecode(response.body));
    extractedData.forEach((element) {
      print(element);
    });
  }

!! Don't forget to import 'dart:convert' and 'package:http/http.dart' as http.

Answer 2

This is your UI code

class ApiExample extends StatefulWidget {
  const ApiExample({Key? key}) : super(key: key);

  @override
  _ApiExampleState createState() => _ApiExampleState();
}

class _ApiExampleState extends State<ApiExample> {
  final items = initAndSet();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<StackHelp>>(
        future: items,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text(snapshot.data.toString()));
          }
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) => ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(snapshot.data![index].logo!),
                ),
                title: Text(snapshot.data![index].name!),
              ),
            );
          }
          return Center(
            child: Text("Waiting..."),
          );
        },
      ),
    );
  }
}

This is your API code

import 'dart:convert';
import 'dart:io';

import 'package:http/http.dart' as http;
import 'package:stackoverflow/model/stackHelp.dart';

Future<List<StackHelp>> initAndSet() async {
  const url = "http://muhammeddevxd.pythonanywhere.com/api/ecommerce";
  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    final Iterable decodeJson = jsonDecode(response.body);
    return decodeJson.map((item) => StackHelp.fromJson(item)).toList();
  } else {
    throw SocketException("No Internet Connection");
  }
}

This is your model class

class StackHelp {
  int? id;
  String? name;
  String? logo;

  StackHelp({this.id, this.name, this.logo});

  StackHelp.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
    logo = json['logo'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    data['logo'] = this.logo;
    return data;
  }
}

final result is this