如何从包含嵌套地图列表的 json 文件中获取和显示数据答案

【问题标题】：How to fetch and show data from a json file which has a list of nested maps如何从包含嵌套地图列表的 json 文件中获取和显示数据
【发布时间】：2021-05-08 09:37:28
【问题描述】：

我正在尝试从包含嵌套地图列表的 json 文件中获取和显示数据，作为初学者，我在编码时遇到了很多困难，请帮助我从 json 文件中获取和显示数据.我不知道如何获取数据，我必须在 App UI 中显示姓名、电子邮件、城市、年龄等。我不知道处理这个嵌套地图的程序是什么。帮助我使这段代码工作。

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:http/http.dart';
import 'package:task/model/model_class.dart';

class EmployeeListView extends StatefulWidget {
  @override
  _EmployeeListViewState createState() => _EmployeeListViewState();
}

class _EmployeeListViewState extends State<EmployeeListView> {
  
  List<Results> _results = List<Results>();
 @override
  void initState() {
    super.initState();
    fetchResults.then((value){
setState(() {
  _results.addAll(value);
});
});
    
  }

  
  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Employee"),
        backgroundColor: Colors.black,
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index){
          return Card(
            color: Colors.white,
            shadowColor: Colors.black,
            elevation: 4.5,
            child: ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.transparent,
                radius: 25.0,
                backgroundImage: NetworkImage("url"),
                ),
                title: Text("Name"),
                subtitle: Text("Email"),
                trailing: IconButton(icon: Icon(Icons.call), onPressed: (){}),
            ),
          );
        }),
    );
  }
  Future<List<Results>> fetchResults() async{
     var url = "https://randomuser.me/api?page=2&results=10&seed=99d7541361f1e116";
     var response = await http.get(url);
     if(response.statusCode == 200){
     var resultsJson = json.decode(response.body);
     for(var resultsJson in resultsJson){
     _results.add(Results.fromJson(resultsJson));
      return _results;
   }
 }
}
}

【问题讨论】：

我可以看看你的结果模型吗？

标签： json flutter fetch

【解决方案1】：

你必须解码来自http请求的json数据
从响应中返回 [result] 和 [info]
我使用了结果部分并提供了详细信息

第 1 步：

class Results {
  String gender;
  String phone;
  String nat;
  DocumentReference reference;

  Results(this.gender, this.phone, this.nat);

  factory Results.fromSnapshot(DocumentSnapshot snapshot) {
    Results newEmployee = Results.fromJson(snapshot.data());
    newEmployee.reference = snapshot.reference;
    return newEmployee;
  }

  factory Results.fromJson(Map<String, dynamic> json) =>
      _resultsFromJson(json);

  Map<String, dynamic> toJson() => _resultsToJson(this);

  @override
  String toString() => 'employeeName ${Results}';
}

Results _resultsFromJson(Map<String, dynamic> data) {
  return Results(
    data['gender'],
    data['phone'],
    data['nat'],
  );
}

Map<String, dynamic> _resultsToJson(Results instance) {
  return {
    'gender': instance.gender,
    'phone': instance.phone,
    'nat': instance.nat,
  };
}

第 2 步：

 List<Results> collectionData = [];
 
  @override
  void initState() {
    super.initState();
    fetchResults().then((value) {
      setState(() {
        collectionData.addAll(value);
      });
    });
  }


Future<List<Results>> fetchResults() async {
    List<Results> _results = [];
    var url =
        "https://randomuser.me/api?page=2&results=10&seed=99d7541361f1e116";
    var response = await http.get(url);
    if (response.statusCode == 200) {
      var resultsJson = json.decode(response.body)['results'].cast<Map<String,dynamic>>();
      await Future.forEach(resultsJson, (element) {
        _results.add(Results.fromJson(element));
      });
    }

    return Future.value(_results);
  }

【讨论】：

【解决方案2】：

我可以看到你在 for 循环的某个地方犯了一个错误。

for(var resultsJson in resultsJson){
 _results.add(Results.fromJson(resultsJson));
 return _results;

您使用 JsonList(resultsJson) 来表示列表中的 Json 对象。也声明一个新列表，并在循环外返回。将其更改为;

List<Results> resultsList = [];
for(var result in resultsJson){
 resultsList.add(Results.fromJson(result));
}
return resultsList;

请尝试并提供反馈。
好的，根据您在初始化状态下的代码。我不建议您在 initState 中使用 setState，而是在 didChangeDependences 中使用。

【讨论】：