flutter rest api get json - json

Question

I just started using flutter. I have a rest api service that I wrote with nodejs. below is producing the output "result.json". I am trying to access this with flutter.
Connecting to the server.
Getting json data from server.
But I cannot take this into card. can you help me ?
Customers.dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:hasta_takip/models/customers_model.dart';
import 'package:http/http.dart' as http;
class Customers extends StatefulWidget {
#override
_CustomersState createState() => _CustomersState();
}
class _CustomersState extends State<Customers> {
Future<List<CustomersModel>> _fetchCustomers() async {
var response = await http.get("http://localhost:3000/customers");
if (response.statusCode == 200) {
return (json.decode(response.body))
.map((e) => CustomersModel.fromJson(e))
.toList();
} else {
throw Exception("not connected ${response.statusCode}");
}
}
#override
void initState() {
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Customer list"),
),
body: FutureBuilder(
future: _fetchCustomers(),
builder: (BuildContext context,
AsyncSnapshot<List<CustomersModel>> snapshot) {
print(snapshot.data);
if (snapshot.hasData) {
print(snapshot);
return ListView.builder(
//itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return ListTile();
});
} else {
return Center(child: CircularProgressIndicator());
}
},
),
);
}
}
CustomersModel.dart
import 'dart:convert';
CustomersModel customersModelFromJson(String str) => CustomersModel.fromJson(json.decode(str));
String customersModelToJson(CustomersModel data) => json.encode(data.toJson());
class CustomersModel {
CustomersModel({
this.result,
});
List<Result> result;
factory CustomersModel.fromJson(Map<String, dynamic> json) => CustomersModel(
result: List<Result>.from(json["result"].map((x) => Result.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"result": List<dynamic>.from(result.map((x) => x.toJson())),
};
}
class Result {
Result({
this.id,
this.customerName,
this.customerLastname,
});
int id;
String customerName;
String customerLastname;
factory Result.fromJson(Map<String, dynamic> json) => Result(
id: json["id"],
customerName: json["customer_name"],
customerLastname: json["customer_lastname"],
);
Map<String, dynamic> toJson() => {
"id": id,
"customer_name": customerName,
"customer_lastname": customerLastname,
};
}
Result.json
{
"result": [
{
"id": 1,
"customer_name": "John",
"customer_lastname": "simon"
},
{
"id": 2,
"customer_name": "peter",
"customer_lastname": "bratt"
}
]
}

Answer 1

Change the _fetchCustomer() with below
Future<CustomersModel> _fetchCustomers() async { // this line
var response = await http.get("http://localhost:3000/customers");
if (response.statusCode == 200) {
return customersModelFromJson(response.body); // this line
} else {
throw Exception("not connected ${response.statusCode}");
}
}
And change your FutureBuilder with below
FutureBuilder(
future: _fetchCustomers(),
builder: (BuildContext context,
AsyncSnapshot<CustomersModel> snapshot) { // this line
print(snapshot.data);
if (snapshot.hasData) {
print(snapshot);
return ListView.builder(
itemCount: snapshot.data.result.length, // this line
itemBuilder: (context, index) {
return ListTile();
});
} else {
return Center(child: CircularProgressIndicator());
}
},
)