About Flutter Firestore Rest Api Json Output - json

Question

{
"documents": [
{
"name": "projects/xxxxx/databases/(default)/documents/blogs/Hao5IboeA6b7ySlmx0qN",
"fields": {
"imgUrl": {
"stringValue": "https://firebasestorage.googleapis.com/v0/b/xxxxxx/o/blogImages%2F72H566888.jpg?alt=media&token=75b75deb-69a3-4019-a82e-335a2d72b52e"
},
"authorName": {
"stringValue": "iki"
},
"title": {
"stringValue": "dd"
},
"desc": {
"stringValue": "ee"
}
},
"createTime": "2020-10-31T08:57:46.799862Z",
"updateTime": "2020-10-31T08:57:46.799862Z"
},
]
}
I am using Firebase Firestore Rest Api. I have the output in json format like above. I created my model using Json to dart. My model is as follows.
class Model {
List<Documents> documents;
Model({this.documents});
Model.fromJson(Map<String, dynamic> json) {
if (json['documents'] != null) {
documents = new List<Documents>();
json['documents'].forEach((v) {
documents.add(new Documents.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
if (this.documents != null) {
data['documents'] = this.documents.map((v) => v.toJson()).toList();
}
return data;
}
}
class Documents {
String name;
Fields fields;
String createTime;
String updateTime;
Documents({this.name, this.fields, this.createTime, this.updateTime});
Documents.fromJson(Map<String, dynamic> json) {
name = json['name'];
fields =
json['fields'] != null ? new Fields.fromJson(json['fields']) : null;
createTime = json['createTime'];
updateTime = json['updateTime'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['name'] = this.name;
if (this.fields != null) {
data['fields'] = this.fields.toJson();
}
data['createTime'] = this.createTime;
data['updateTime'] = this.updateTime;
return data;
}
}
......
return jsonModel.map((item) => model.fromJson(item)).toList(); I returned it as but in FutureBuilder it comes as snapshot.data[index].documents.
How do I access the imgUrl, authorName, title, desc fields? I am having difficulty with this kind of mixed json output. Can you help me?

Answer 1

You can make a nested structure listView, and you access to field models.
First way:
return FutureBuilder<List<Document>>(
future: getDocuments(),
builder: (BuildContext context, AsyncSnapshot<List<Document>> snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return buildListView(snapshot.data[index].documents);
},
);
} else {
return Text("error");
}
},
);
And you do sub inner method then draw.
ListView buildListView(List<Documents> documents) {
return ListView.builder(
itemCount: documents.length,
itemBuilder: (context, index) => ListTile(
title: Text(documents[index].name),
leading: Text(documents[index].fields.imgUrl.stringValue),
subtitle: Text(documents[index].fields.desc.stringValue),
),
);
2.You could be convert list to list model with list expand functions.
Future<List<Document>> getDocuments() async {
await Future.delayed(Duration(seconds: 100));
return dummyItems;
}
Future<List<Documents>> getFieldsOnly() async {
final response = await getDocuments();
return response.expand((f) => f.documents).toList();
}
Now, it's all done. You can look at this repo for more details(lib/fire-store-document)