Handling nested JSON in Flutter

Question

I have an API that returns lectures and quizzes as a JSON array I managed to view and handle the lectures, but the quizzes enter an infinite loop and I can't find the problem. Any help on how to view it? The JSON response looks like this

{
    "quizzes": [
        {
            "quiz": {
                "quizName": "ch3-",
                "quizDate": "2019-12-06T01:23:35.748Z",
                "quizNo": 5,
                "chName": "ch3-",
            },
            "mark": 9
        },
        {
            "quiz": {             
                "quizName": "ch5-",
                "quizDate": "2020-01-07T11:57:15.862Z",
                "quizNo": 5,
                "chName": "ch5-",
            },
            "mark": 13.5
        },
    ],
}

Here is my code (I made a Quiz class and called it in the Quizes class) ...

{class Quizes {
   Quiz quiz;
  final int mark;

  Quizes({this.quiz,this.mark});

  factory Quizes.fromJson(Map<String, dynamic> parsedJson) {
    return Quizes(
      quiz: parsedJson['quiz'] as Quiz ,
      mark:  parsedJson['mark'] as int ,
    );}
      @override
String toString(){
  return '{ ${this.quiz},${this.mark} }';
}
    }

class Quiz {
  final int quizNo;
  final String quizName;
  final String quizDate;
  Quiz({this.quizNo,this.quizName,this.quizDate });

  factory Quiz.fromJson(Map<String, dynamic> parsedJson) {
    print(Quiz);
    return Quiz(
      quizNo:  parsedJson['quizNo'] as int ,
      quizName: parsedJson['quizName'] as String,
      quizDate: parsedJson['quizDate'] as String,
    );}

//   @override
// String toString(){
//   return '{ ${this.quizNo},${this.quizName},${this.quizDate} }';
// }

And here is the main class for the API response

import 'package:flutter/foundation.dart';
import 'package:flutter_http/quiz_model.dart';

class Post {
  final List<Quizes> quizzes;
Post({
    this.quizzes,

  });

  factory Post.fromJson(Map<String, dynamic> parsedJson) {


  var qlist = parsedJson['quizzes'] as List;
  print(qlist.runtimeType);
  List<Quizes> qdataList = qlist.map((i) => Quizes.fromJson(i)).toList();

    return Post(

      quizzes:qdataList,

    );
  }
}

I am viewing it in a ListTile like this

   ListTile(
            title: Text("Quizzes"),
            subtitle: Text("${posts.quizzes}"),
           ),

Answer 1

Map jsonData = {
    "quizzes": [
        {
            "quiz": {
                "quizName": "ch3-",
                "quizDate": "2019-12-06T01:23:35.748Z",
                "quizNo": 5,
                "chName": "ch3-",
            },
            "mark": 9
        },
        {
            "quiz": {             
                "quizName": "ch5-",
                "quizDate": "2020-01-07T11:57:15.862Z",
                "quizNo": 5,
                "chName": "ch5-",
            },
            "mark": 13.5
        },
    ],
};

  @override
  Widget build(BuildContext context) {
    return Container(
    alignment:Alignment.center,
    child:ListView.builder(
    itemCount:jsonData['quizzes'].length,
    shrinkWrap:true,
     itemBuilder:(con,ind){
       return ListTile(
       title:Text(jsonData['quizzes'][ind]['quiz']['quizName']),
         subtitle:Text(jsonData['quizzes'][ind]['quiz']['quizDate'])
       );
     }
    )
    );
  }

Answer 2

Try changing your model to this

// To parse this JSON data, do
//
//     final quizzes = quizzesFromJson(jsonString);

import 'dart:convert';

Quizzes quizzesFromJson(String str) => Quizzes.fromJson(json.decode(str));

String quizzesToJson(Quizzes data) => json.encode(data.toJson());

class Quizzes {
    final List<QuizElement> quizzes;

    Quizzes({
        this.quizzes,
    });

    factory Quizzes.fromJson(Map<String, dynamic> json) => Quizzes(
        quizzes: json["quizzes"] == null ? null : List<QuizElement>.from(json["quizzes"].map((x) => QuizElement.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "quizzes": quizzes == null ? null : List<dynamic>.from(quizzes.map((x) => x.toJson())),
    };
}

class QuizElement {
    final QuizQuiz quiz;
    final double mark;

    QuizElement({
        this.quiz,
        this.mark,
    });

    factory QuizElement.fromJson(Map<String, dynamic> json) => QuizElement(
        quiz: json["quiz"] == null ? null : QuizQuiz.fromJson(json["quiz"]),
        mark: json["mark"] == null ? null : json["mark"].toDouble(),
    );

    Map<String, dynamic> toJson() => {
        "quiz": quiz == null ? null : quiz.toJson(),
        "mark": mark == null ? null : mark,
    };
}

class QuizQuiz {
    final String quizName;
    final DateTime quizDate;
    final int quizNo;
    final String chName;

    QuizQuiz({
        this.quizName,
        this.quizDate,
        this.quizNo,
        this.chName,
    });

    factory QuizQuiz.fromJson(Map<String, dynamic> json) => QuizQuiz(
        quizName: json["quizName"] == null ? null : json["quizName"],
        quizDate: json["quizDate"] == null ? null : DateTime.parse(json["quizDate"]),
        quizNo: json["quizNo"] == null ? null : json["quizNo"],
        chName: json["chName"] == null ? null : json["chName"],
    );

    Map<String, dynamic> toJson() => {
        "quizName": quizName == null ? null : quizName,
        "quizDate": quizDate == null ? null : quizDate.toIso8601String(),
        "quizNo": quizNo == null ? null : quizNo,
        "chName": chName == null ? null : chName,
    };
}