无法加载 JSON 数据以在 ListView 中显示

Posted 2023-02-23

【中文标题】无法加载 JSON 数据以在 ListView 中显示

【英文标题】：Unable to load JSON data to show in ListView

【发布时间】：2020-09-24 23:24:15

【问题描述】：

我需要通过提供get方法来获取flutter app中的json数组数据。

我面临的问题是我无法将记录放在空列表 carList 中。

但我得到了如下所示的对象数组（邮递员）

print(json.decode(response.body)) // 在cars.dart文件中

因此，如果您能帮助我了解如何在 List carlist = [];

中获得响应

Car_list.dart 文件调用 get 请求的方法。

如果您需要我提供任何进一步的信息，请告诉我。

谢谢

邮递员

[

"id": "1",
"carModel" : "Maruti swift",
"carDescription" : "The car has a top speed of 180 km/hr"
,

"id": "1",
"carModel" : "Hyundai santro",
"carDescription" : "The car has a top speed of 150 km/hr"
,

"id": "1",
"carModel" : "Hyundai creta",
"carDescription" : "The car has a top speed of 160 km/hr"

]

CarsModel.dart

class Cars with ChangeNotifier
   String userId;
   String carModel
   String carDescription;


  Cars(
  
    this.userId = '1111',
    this.carModel,
    this.carDescription,
  
);

 factory Cars.fromJSON(Map<String,dynamic> json) => Cars(
     userId : json['userId'],
     carModel : json['CarModel'],
     carDescription : json['carDescription'],
 );


toJSON() 
  return 
    'userId':'111',
    'carModel':carModel,
    'carDescription' : carDescription
  ;

cars.dart

class CarProvider with ChangeNotifier

List<Cars> carlist = [
//Sample data to show the format in which the data needs to be shown as the listview gets populated from below records which we are supposed to get from postman 
//Cars (
//    userid: 1111,
//    carModel: 'Maruti Alto',
//    carDescription: 'Top speed 140 km/hr'


    ),
];

Future<void> readListofCars(int id) async 

 print(id.toString());


 const url = 'http://localhost/userlist';

// 'id': id.toString()

 Map<String, String> headers =    
"Content-type": "application/json";

try
  
  final response = await http.get(url,headers: headers);

  List<dynamic> bodyCars = jsonDecode(response.body);

  List<Cars> loadedCars = bodyCars.map((dynamic item) => new Cars.fromJSON(item)).toList();


  /*
    for (Map i in bodyCars) 
    _notificationitems.add(Cars.fromJSON(i));
  
 */

  );

 print(response.statusCode);
  carlist  = loadedCars; 
 print(json.decode(response.body));
 notifyListeners();

catch (error)
  throw error;

Car_list.dart

class TabScreenCar extends StatefulWidget 

  final String userId;


  TabScreenCar(this.userId);

  @override
  _TabScreenCarState createState() => _TabScreenCarState();


class _TabScreenCarState extends State<TabScreenCar> 
@override
void didChangeDependencies() 
   final id = 1111;
    Provider.of<CarProvider>(context).readListofCars(id);

  super.didChangeDependencies(); 

【问题讨论】：

你能打印出cars.dart的catch块中的错误吗

嗨 wilson....我没有收到任何错误.....所以似乎数据没有插入到列表中，因此列表返回空，结果列表视图为空

【参考方案1】：

在您的模型类中，您获取 json 数据的变量不正确

为了简化流程，您可以查看此链接

https://***.com/a/58708634/9236994

只需将您的json response 粘贴到https://javiercbk.github.io/json_to_dart/

并使用将生成的json模型类。

您的问题将得到解决。

您使用的变量与您的 json 响应不匹配

或者保持简单

使用下面提到的fromJSON方法

factory Cars.fromJSON(Map<String,dynamic> json) => Cars(
     userId : json['id'],
     carModel : json['carModel'],
     carDescription : json['carDescription'],
 );

编辑

我认为您也面临在列表变量中设置数据的问题。

如果汽车数据，使用下面显示的代码将响应填充到列表中

List<Cars> loadedCars = List<Cars>();
var data = jsonDecode(response.body);

data.forEach((val) 
    loadedCars.add(Cars.fromJSON(val));

【讨论】：

嗨，vicky 做了相关的更改，但仍然面临同样的问题

嗨@akhilmodi 我已经在我的回答中添加了一个关于填写列表的编辑，请检查一下。