Display JSON data in Flutter-CodePudding

I want to display some data I am receiving from an API, this is the data I am receiving from my Node JS server:

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

This is how I am receiving the data in my front end:

Future<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);

  return Subject.fromJson(jsonDecode(response.body)[0]);
}

This is the class to handle the incoming data:

class Subject {
  final String name;

  Subject({
    required this.name,
  });

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

This is my init state:

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

This is how I am trying to display the data:

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<Subject>(
            future: futureSubject,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data!.name);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }

However, the only thing being displayed when the page loads is:

Matematicas

I am trying to achieve 2 things:

Display the data in a list fashion like:

Subject Name 
Matematicas 
Naturales 
Ciencias Sociales 
Lenguaje Religion

Be able to use them as a link to another page when clicked

PD: If I remove the index access [0] on return Subject.fromJson(jsonDecode(response.body)[0]); I get Expected a value of type Map<String, dynamic> but got one of type List<dynamic>

Any recommendations or guide on how to go through this?

Thank you for your time

CodePudding user response：

You need to loop it

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

and change your api call to this

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

sorry for my english.

CodePudding user response：

Please try this one and return List from api method

List<dynamic>list=response.body as List<dynamic>;
  List<Subject>subjectList=[];
    
  list.forEach((element){
    subjectList.add(Subject.fromJson(element));
  });
  print(subjectList[0].name);