Why DataTable Not Showing JSON in Flutter - flutter

Question

I was building a DataTable from json call. Everything is going well but data is not showing.
//standing.dart
import '../modal/catelog_point_table_model.dart';
import '../services/category_point_table_services.dart';
import 'package:flutter/material.dart';
class DataTableWidget extends StatefulWidget {
#override
DataTableWidgetState createState() => DataTableWidgetState();
}
class DataTableWidgetState extends State<DataTableWidget> {
final List<String> cityColumns = [
'Team',
'M',
'W',
'NRR',
'Pts'
];
List<City> cities;
bool ascending;
#override
void initState() {
super.initState();
ascending = false;
}
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
width: width*1.5,
child: ListView(
children: <Widget>[
buildDataTable(),
],
),
),
);
}
Widget buildDataTable() => DataTable(
sortAscending: ascending,
columns: cityColumns
.map(
(String column) => DataColumn(
label: Text(column),
onSort: (int columnIndex, bool ascending) => onSortColumn(
columnIndex: columnIndex, ascending: ascending),
),
)
.toList(),
rows: cities.map((City city) => DataRow(
cells: [
DataCell(Text('${city.title}')),
DataCell(Text('${city.price}')),
DataCell(Text('${city.description}')),
DataCell(Text('${city.nrr}')),
DataCell(Text('${city.pts}')),
],
))
.toList(),
);
void onSortColumn({int columnIndex, bool ascending}) {
if (columnIndex == 0) {
setState(() {
if (ascending) {
cities.sort((a, b) => a.title.compareTo(b.title));
} else {
cities.sort((a, b) => b.title.compareTo(a.title));
}
this.ascending = ascending;
});
}
}
}
//catelog_point_table_model.dart
import 'dart:async' show Future;
import '../modal/catelog_point_table_model.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
Future<List<City>> loadCatelog(String id) async {
String url = 'https://icc-point-table.nittodigital.now.sh/api/Catelogs/category/5ce1a425eda9891fa8b51430';
final response = await http.get(url);
print(response.body);
return cities(response.body);
}
//catelog_point_table_model.dart
import 'dart:convert';
class City {
final int imgcount;
final String id;
final String title;
final String price;
final String description;
final String nrr;
final String pts;
final List<String> gallery;
City({
this.imgcount,
this.id,
this.title,
this.price,
this.description,
this.nrr,
this.pts,
this.gallery
});
factory City.fromJson(Map<String, dynamic> parsedJson) {
var streetsFromJson = parsedJson['gallery'];
//print(streetsFromJson.runtimeType);
// List<String> streetsList = new List<String>.from(streetsFromJson);
List<String> galleryList = streetsFromJson.cast<String>();
return new City(
imgcount: parsedJson['img_v'],
id: parsedJson['_id'],
title: parsedJson['title'],
price: parsedJson['price'],
description: parsedJson['description'],
nrr: parsedJson['nrr'],
pts: parsedJson['pts'],
gallery: galleryList,
);
}
}
List<City> cities(str) {
final jsonData = json.decode(str);
return List<City>.from(jsonData.map((x) => City.fromJson(x)));
}
NoSuchMethodError: The method 'map' was called on null
This is what I am getting. Maybe I am not getting data because List is not static type.
it would be really nice if someone told me how to fetch the data correctly and make a bond with DataRow.
*sorry for my poor English.

Answer 1

You have to call your loadCatelog from inside your initState function. Since your call is async and initState does not allow async calls, you have to put the code in a seperate method:
#override
void initState() {
super.initState();
ascending = false;
_getData();
}
void _getData() async{
cities = await loadCatelog();
}
Also, you are asking for an id as a parameter for your function, but never use it. So either remove that parameter or pass it accordingly.
There would be an even more elegant way by using FutureBuilder if you only need to retreive the data from the API once, or StreamBuilder if you want to get live updates from said API.