How to cast objects to a list in flutter - api

Question

My API returns data in this format below, how do I use the data returned from the API?
{
"result": {
"circles": [
{
"_id": "5f03b28e81518d0017f250bf",
"name": "reflex",
"description": "reflex is not bad at the same 6time and then ",
"moderators": [],
"__v": 0
},
{
"_id": "5f03b32881518d0017f250c0",
"name": "dej ivo IDF",
"description": "talk ugh to be honest with my friends ",
"moderators": [],
"__v": 0
},
]
}
}

Answer 1

You can copy paste run full code below
You can parse with payloadFromJson , you can see related Payload class definition in full code
and display with FutureBuilder
code snippet
Payload payloadFromJson(String str) => Payload.fromJson(json.decode(str));
...
FutureBuilder(
future: _future,
builder: (context, AsyncSnapshot<Payload> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'${snapshot.error}',
style: TextStyle(color: Colors.red),
);
} else {
return ListView.builder(
itemCount: snapshot.data.result.circles.length,
working demo
full code
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
Payload payloadFromJson(String str) => Payload.fromJson(json.decode(str));
String payloadToJson(Payload data) => json.encode(data.toJson());
class Payload {
Payload({
this.result,
});
Result result;
factory Payload.fromJson(Map<String, dynamic> json) => Payload(
result: Result.fromJson(json["result"]),
);
Map<String, dynamic> toJson() => {
"result": result.toJson(),
};
}
class Result {
Result({
this.circles,
});
List<Circle> circles;
factory Result.fromJson(Map<String, dynamic> json) => Result(
circles:
List<Circle>.from(json["circles"].map((x) => Circle.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"circles": List<dynamic>.from(circles.map((x) => x.toJson())),
};
}
class Circle {
Circle({
this.id,
this.name,
this.description,
this.moderators,
this.v,
});
String id;
String name;
String description;
List<dynamic> moderators;
int v;
factory Circle.fromJson(Map<String, dynamic> json) => Circle(
id: json["_id"],
name: json["name"],
description: json["description"],
moderators: List<dynamic>.from(json["moderators"].map((x) => x)),
v: json["__v"],
);
Map<String, dynamic> toJson() => {
"_id": id,
"name": name,
"description": description,
"moderators": List<dynamic>.from(moderators.map((x) => x)),
"__v": v,
};
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
Future<Payload> _future;
Future<Payload> _getRecords() async {
String jsonString = '''
{
"result": {
"circles": [
{
"_id": "5f03b28e81518d0017f250bf",
"name": "reflex",
"description": "reflex is not bad at the same 6time and then ",
"moderators": [],
"__v": 0
},
{
"_id": "5f03b32881518d0017f250c0",
"name": "dej ivo IDF",
"description": "talk ugh to be honest with my friends ",
"moderators": [],
"__v": 0
}
]
}
}
''';
var response = http.Response(jsonString, 200);
if (response.statusCode == 200) {
return payloadFromJson(jsonString);
} else {
print(response.statusCode);
}
}
#override
void initState() {
_future = _getRecords();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: FutureBuilder(
future: _future,
builder: (context, AsyncSnapshot<Payload> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'${snapshot.error}',
style: TextStyle(color: Colors.red),
);
} else {
return ListView.builder(
itemCount: snapshot.data.result.circles.length,
itemBuilder: (context, index) {
return Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.only(
top: 6.0,
bottom: 6.0,
left: 8.0,
right: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(snapshot
.data.result.circles[index].name),
Spacer(),
Text(snapshot.data.result.circles[index]
.description),
],
),
));
});
}
}
}));
}
}

Answer 2

Check the docs on JSON serialization.
Assuming that JSON is in a string format, this will convert it to a dart map:
Map<String, dynamic> data = jsonDecode(yourJsonString)