在 Flutter 中显示 JSON 数据

Question

我想显示一些我从 API 接收到的数据，这是我从 Node JS 服务器接收到的数据：

[
    {
        "NAME": "Matematicas"
    },
    {
        "NAME": "Naturales"
    },
    {
        "NAME": "Ciencias Sociales"
    },
    {
        "NAME": "Lenguaje"
    },
    {
        "NAME": "Religion"
    }
]

这就是我在前端接收数据的方式（由@Mofidul Islam 更新）：

Future<List<Subject>> fetchSubject() async {
  var url = Uri.http('localhost:8000', "/subjects");
  var prefs = await SharedPreferences.getInstance();
  var token = prefs.getString('token');
  final response = await http.get(
      Uri.parse('http://localhost:8000/subjects'),
      headers: {'x-access-token': token!});

  print(response.body);
  List<dynamic> list = "[" + response.body + "]" as List<dynamic>;
  List<Subject> subjectList = [];

  list.forEach((element) {
    subjectList.add(Subject.fromJson(element));
  });

  return subjectList;
}

这是处理传入数据的类（已更新 @Mofidul Islam）：

class Subject {
  final String name;

  Subject({
    required this.name,
  });

  factory Subject.fromJson(Map<String, dynamic> json) {
    return Subject(name: json['NAME'] as String);
  }

  parseJson(String responseBody) {
    final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
    return parsed.map<Subject>((json) => Subject.fromJson(json)).toList();
  }
}

这是我的初始化状态：

void initState() {
    super.initState();    
    futureSubject = fetchSubject();
  }

这就是我尝试显示数据的方式：

Widget build(BuildContext context) {
return MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Materias',
  theme: ThemeData(
    primarySwatch: Colors.green,
  ),
  home: Scaffold(
    appBar: AppBar(
      title: const Text('Materias'),
    ),
    body: Center(
      child: FutureBuilder<List<Subject>>(
        future: futureSubject,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Column(
              children: snapshot.data!
                  .map((subject) => Text(subject.name))
                  .toList(),
            );
          } else if (snapshot.hasError) {
            return Text('${snapshot.error}');
          }
          return const CircularProgressIndicator();
        },
  

),
    ),
  ),
);

}

但是，页面加载时唯一显示的是：

Matematicas

我正在努力实现两件事：

1. 以列表方式显示数据，例如：

Subject Name 
Matematicas 
Naturales 
Ciencias Sociales 
Lenguaje Religion

1. 能够在点击时将它们用作另一个页面的链接

PD：如果我在return Subject.fromJson(jsonDecode(response.body)[0]); 上删除索引访问[0] 我得到Expected a value of type Map<String, dynamic> but got one of type List<dynamic>

关于如何完成此操作的任何建议或指南？

感谢您的宝贵时间

Answer 1

你需要循环播放它

parseJson(String responseBody) {
    final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
    return parsed
        .map<Subject>((json) => Subject.fromJson(json))
        .toList();
  }

并将您的 api 调用更改为此

Future<List<Subject>> fetchSubject() async {
  .....
  return parseJson(json.encode(response.body));
}

对不起我的英语。

Answer 2

请试试这个并从api方法返回列表

Future<List<Subject>> fetchSubject() async {
  var url = Uri.http('localhost:8000', "/subjects");
  var prefs = await SharedPreferences.getInstance();
  var token = prefs.getString('token');
  final response = await http.get(Uri.parse('http://localhost:8000/subjects'),
      headers: {'x-access-token': token!});
List<dynamic>list=response.body as List<dynamic>;
      List<Subject>subjectList=[];
        
      list.forEach((element){
        subjectList.add(Subject.fromJson(element));
      });

      return subjectList;
  
}

像这样重构 UI

Center(
          child: FutureBuilder<List<Subject>>(
            future: futureSubject,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Column(children: snapshot.data.map((subject)=>Text(subject.name)).toList(),);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return const CircularProgressIndicator();
            },
          ),
        )