Search code examples
arraysflutterlistviewdartmaplist

Parse data from a array inside array and create new list based on condition of map value in FLUTTER


[
    {
        "name": "School1",
        "image": "url1",
        "place": "place1",
        "class": [
            {
                "class": "first",
                "strength": "25",
                "students": [
                    {
                        "id": "student1",
                        "dob": "mdd:mm:yyyy",
                        "age": 6,
                        "fees": 0
                    },
                    {
                        "id": "student2",
                        "dob": "mdd:mm:yyyy",
                        "age": 6,
                        "fees": 1
                    }
                ]
            },
            {
                "class": "second",
                "strength": 30,
                "students": [
                    {
                        "id": "student1",
                        "dob": "mdd:mm:yyyy",
                        "age": 6,
                        "fees": 0
                    },
                    {
                        "id": "student2",
                        "dob": "mdd:mm:yyyy",
                        "age": 6,
                        "fees": 1
                    }
                ]
            }
        ]
    },
    {
        "name": "School2",
        "image": "url2",
        "place": "place2",
        "class": [
            {
                "class": "first",
                "strength": "25",
                "students": [
                    {
                        "id": "student1",
                        "dob": "mdd:mm:yyyy",
                        "age": 6,
                        "fees": 0
                    },
                    {
                        "id": "student2",
                        "dob": "mdd:mm:yyyy",
                        "age": 6,
                        "fees": 1
                    }
                ]
            },
            {
                "class": "second",
                "strength": 30,
                "students": [
                    {
                        "id": "student1",
                        "dob": "mdd:mm:yyyy",
                        "age": 6,
                        "fees": 0
                    },
                    {
                        "id": "student2",
                        "dob": "mdd:mm:yyyy",
                        "age": 6,
                        "fees": 1
                    }
                ]
            }
        ]
    }
]

Refer above Json data

How to create add data after satisfy specific conditions in FLUTTER/DART. Here I need some helps in single code file. Please help me.

  1. Save the entire data to a list.
  2. Show students by id with dob and age from specific school to a listview.
  3. On click on the student position, show the details like School name, class, strength of class, age, dob in another screen.
  4. Create another two listviews which showing student name with school name based on fees paid or unpaid conditions (fees paid=1, unpaid=0 in the data).

Solution

  • Your question needs an answer quite long...

    I'll try to give you a few hint. First of all, create the corresponding dart classes from your json data.

    I suggest you to give a look at : https://app.quicktype.io/ it is an "instantly parse json in any language", you can put your json code and parse into dart.

    Hereafter what I have generated from your json example:

       // To parse this JSON data, do
    //
    //     final school = schoolFromMap(jsonString);
    
    import 'dart:convert';
    
    List<School> schoolFromMap(String str) => List<School>.from(json.decode(str).map((x) => School.fromMap(x)));
    
    String schoolToMap(List<School> data) => json.encode(List<dynamic>.from(data.map((x) => x.toMap())));
    
    class School {
        School({
            this.name,
            this.image,
            this.place,
            this.schoolClass,
        });
    
        final String name;
        final String image;
        final String place;
        final List<Class> schoolClass;
    
        School copyWith({
            String name,
            String image,
            String place,
            List<Class> schoolClass,
        }) => 
            School(
                name: name ?? this.name,
                image: image ?? this.image,
                place: place ?? this.place,
                schoolClass: schoolClass ?? this.schoolClass,
            );
    
        factory School.fromMap(Map<String, dynamic> json) => School(
            name: json["name"] == null ? null : json["name"],
            image: json["image"] == null ? null : json["image"],
            place: json["place"] == null ? null : json["place"],
            schoolClass: json["class"] == null ? null : List<Class>.from(json["class"].map((x) => Class.fromMap(x))),
        );
    
        Map<String, dynamic> toMap() => {
            "name": name == null ? null : name,
            "image": image == null ? null : image,
            "place": place == null ? null : place,
            "class": schoolClass == null ? null : List<dynamic>.from(schoolClass.map((x) => x.toMap())),
        };
    }
    
    class Class {
        Class({
            this.classClass,
            this.strength,
            this.students,
        });
    
        final String classClass;
        final dynamic strength;
        final List<Student> students;
    
        Class copyWith({
            String classClass,
            dynamic strength,
            List<Student> students,
        }) => 
            Class(
                classClass: classClass ?? this.classClass,
                strength: strength ?? this.strength,
                students: students ?? this.students,
            );
    
        factory Class.fromMap(Map<String, dynamic> json) => Class(
            classClass: json["class"] == null ? null : json["class"],
            strength: json["strength"],
            students: json["students"] == null ? null : List<Student>.from(json["students"].map((x) => Student.fromMap(x))),
        );
    
        Map<String, dynamic> toMap() => {
            "class": classClass == null ? null : classClass,
            "strength": strength,
            "students": students == null ? null : List<dynamic>.from(students.map((x) => x.toMap())),
        };
    }
    
    class Student {
        Student({
            this.id,
            this.dob,
            this.age,
            this.fees,
        });
    
        final String id;
        final String dob;
        final int age;
        final int fees;
    
        Student copyWith({
            String id,
            String dob,
            int age,
            int fees,
        }) => 
            Student(
                id: id ?? this.id,
                dob: dob ?? this.dob,
                age: age ?? this.age,
                fees: fees ?? this.fees,
            );
    
        factory Student.fromMap(Map<String, dynamic> json) => Student(
            id: json["id"] == null ? null : json["id"],
            dob: json["dob"] == null ? null : json["dob"],
            age: json["age"] == null ? null : json["age"],
            fees: json["fees"] == null ? null : json["fees"],
        );
    
        Map<String, dynamic> toMap() => {
            "id": id == null ? null : id,
            "dob": dob == null ? null : dob,
            "age": age == null ? null : age,
            "fees": fees == null ? null : fees,
        };
    }
    

    Ok, now you have the model classes. This should answer to your point 1., you can save your Welcome List to a json and viceversa.

    For the point 2., you should use a ListView.build() , for example using a list of Students ( List items = .... ; ) :

      @override
      Widget build(BuildContext context) {
        assert(items != null);
        accounts.sort((a, b) => a.id.compareTo(b.id));
        return items.isNotEmpty
            ? ListView.builder(
                padding: const EdgeInsets.all(8),
                itemCount: items.length,
                itemBuilder: (context, counter) => Card(
        child: ListTile(
          onTap: () { // Open a new page/popup to display the student widget....
          },
          title: Text(item.id ?? ''),
          subtitle: Text(item.dob ?? ''),
        ),
              )
            : Container(
                child: Text('No items'),
              );
      }
    }
    

    This is your build method used to show a list of Cards, that show a simple title of your Students objects.

    Use the onTap() {...} method to show the Student detail.