2

I'm new to Flutter and doesn't know much about complex json parsing. I've consulted few online articles but didn't find any suitable solution. My json is as follows

{
    "EmployeeName":"EmployeeName",
    "Incidents" : [
        {
            "Id":"1",
            "Text":"Text",
            "Photos":[
                {
                    "PhotoUrl" : "http://myphoto.com"
                },
                {
                    "PhotoUrl" : "http://myphoto.com"
                }
            ],
            "Notes" : [
                {
                    "Note":"Note"
                },
                {
                    "Note":"Note"
                }
            ]
        }
    ]
}

Any help would be great.

4
  • Does this answer your question? Parsing Json in flutter Commented Jan 14, 2020 at 15:00
  • I've seen that example but in my case, I have arrays within array. I'm facing difficulty in parsing object. Commented Jan 14, 2020 at 15:11
  • @KirillMatrosov, thank you for your comment. I think it will work. Let me implement :) Commented Jan 14, 2020 at 15:16
  • You can use online parser... javiercbk.github.io/json_to_dart Commented Jul 7, 2023 at 10:56

4 Answers 4

3

here is a Code example for your json:

employee

class Employee{

String employeeName;
List<Incident> incidents;

Employee({this.employeeName, this.incidents});

Employee.fromJson(Map<String, dynamic> json) {
    employeeName = json['employeeName'];
    if (json['incidents'] != null) {
        incidents = new List<Incident>();
        json['incidents'].forEach((v) {
            incidents.add(new Incident.fromJson(v));
        });
    }
}

Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.employeeName != null) data['employeeName'] = this.employeeName;
    if (this.incidents != null) {
        data['incidents'] = this.incidents.map((v) => v.toJson()).toList();
    }
    return data;
}
}

incident

class Incident{

String id;
String text;
List<Photo> photos;
List<Note> notes;

Incident({this.id, this.text, this.photos, this.notes});

Incident.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    text = json['text'];
    if (json['photos'] != null) {
        photos = new List<Photo>();
        json['photos'].forEach((v) {
            photos.add(new Photo.fromJson(v));
        });
    }
    if (json['notes'] != null) {
        notes = new List<Note>();
        json['notes'].forEach((v) {
            notes.add(new Note.fromJson(v));
        });
    }
}

Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.id != null) data['id'] = this.id;
    if (this.text != null) data['text'] = this.text;
    if (this.photos != null) {
        data['photos'] = this.photos.map((v) => v.toJson()).toList();
    }
    if (this.notes != null) {
        data['notes'] = this.notes.map((v) => v.toJson()).toList();
    }
    return data;
}
}

note

class Note{

String note;

Note({this.note});

Note.fromJson(Map<String, dynamic> json) {
    note = json['note'];
}

Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.note != null) data['note'] = this.note;
    return data;
}
}

photo

class Photo{

String photoUrl;

Photo({this.photoUrl});

Photo.fromJson(Map<String, dynamic> json) {
    photoUrl = json['photoUrl'];
}

Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.photoUrl != null) data['photoUrl'] = this.photoUrl;
    return data;
}
}
Sign up to request clarification or add additional context in comments.

Comments

2
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sample_project_for_api/Employee.dart';

main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isLoading = false;

  List<Employee> emp = new List();
  @override
  void initState() {
    super.initState();
    getEmployeeDetails();
  }

  Future<String> loadPersonFromAssets() async {
    return await rootBundle.loadString('json/parse.json');
  }

  getEmployeeDetails() async {
    setState(() {
      _isLoading = true;
    });

    String jsonString = await loadPersonFromAssets();
    final employee = employeeFromJson(jsonString);
    emp.add(employee);
    print('This is the employee name : ${employee.employeeName}');
    for (int i = 0; i < employee.incidents.length; i++) {
      print('This is the employee id ${employee.incidents[i].id}');
      print('This is the employee text ${employee.incidents[i].text}');
    }
    for (int i = 0; i < employee.incidents.length; i++) {
      for (int j = 0; j < employee.incidents[i].notes.length; j++) {
        print('This are the notes : ${employee.incidents[i].notes[j].note}');
      }
    }
    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: _isLoading == true
          ? CircularProgressIndicator()
          : Container(
              child: ListView.builder(
                itemCount: emp.length,
                itemBuilder: (context, i) {

                  return Card(
                    child: Column(
                      children: <Widget>[
                        Text(emp[i].employeeName),
                        Text(emp[i].incidents[0].id),
                        Text(emp[i].incidents[0].notes[0].note),
                      ],
                    ),
                  );
                },
              ),
            ),
    ));
  }
}


check out the JSON that you want to parse, I have given you simple logic, its on you how you parse.



import 'dart:convert';

Employee employeeFromJson(String str) => Employee.fromJson(json.decode(str));

String employeeToJson(Employee data) => json.encode(data.toJson());

class Employee {
    String employeeName;
    List<Incident> incidents;

    Employee({
        this.employeeName,
        this.incidents,
    });

    factory Employee.fromJson(Map<String, dynamic> json) => Employee(
        employeeName: json["EmployeeName"],
        incidents: List<Incident>.from(json["Incidents"].map((x) => Incident.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "EmployeeName": employeeName,
        "Incidents": List<dynamic>.from(incidents.map((x) => x.toJson())),
    };
}

class Incident {
    String id;
    String text;
    List<Photo> photos;
    List<Note> notes;

    Incident({
        this.id,
        this.text,
        this.photos,
        this.notes,
    });

    factory Incident.fromJson(Map<String, dynamic> json) => Incident(
        id: json["Id"],
        text: json["Text"],
        photos: List<Photo>.from(json["Photos"].map((x) => Photo.fromJson(x))),
        notes: List<Note>.from(json["Notes"].map((x) => Note.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "Id": id,
        "Text": text,
        "Photos": List<dynamic>.from(photos.map((x) => x.toJson())),
        "Notes": List<dynamic>.from(notes.map((x) => x.toJson())),
    };
}

class Note {
    String note;

    Note({
        this.note,
    });

    factory Note.fromJson(Map<String, dynamic> json) => Note(
        note: json["Note"],
    );

    Map<String, dynamic> toJson() => {
        "Note": note,
    };
}

class Photo {
    String photoUrl;

    Photo({
        this.photoUrl,
    });

    factory Photo.fromJson(Map<String, dynamic> json) => Photo(
        photoUrl: json["PhotoUrl"],
    );

    Map<String, dynamic> toJson() => {
        "PhotoUrl": photoUrl,
    };
}


check out the model for parsing. And declared your json in a file for parsing as you described above.

this is the Final output :

I/flutter (23844): This is the employee name : EmployeeName
I/flutter (23844): This is the employee id 1
I/flutter (23844): This is the employee text Text
I/flutter (23844): This are the notes : Note
I/flutter (23844): This are the notes : Note

Now its on you how you use it in your view

1 Comment

check out the edit in which I have shown data using the ui, you can edit it in you way
1

You can use https://app.quicktype.io/ to create your classes easily. JSON to Dart > Just paste your JSON into and enjoy!

Comments

0

main.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/CategoryListModel.dart';
import 'package:flutter_demo/GetCategoryListParser.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<CategoryListModel> categoryList = <CategoryListModel>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter JSON"),
      ),
      body: FutureBuilder(
        future: getCategoryList(),
        builder: (context, snapshot) {
          return categories(categoryList);
        },
      ),
    );
  }

  Widget categories(List<CategoryListModel> list) {
    if (list != null && list.length > 0) {
      return GridView.count(
        crossAxisCount: 3,
        children: List.generate(list.length, (index) {
          return Container(
            child: Column(
              children: [
                Container(
                  child: ClipRRect(
                    child: CachedNetworkImage(
                      fit: BoxFit.fill,
                      imageUrl: list[index].categoryImage,
                    ),
                  ),
                ),
                Text(
                  list[index].categoryName,
                )
              ],
            ),
          );
        }),
      );
    } else {
      return Container();
    }
  }

  Future getCategoryList() async {
    Map result = await GetCategoryListParser.callApi(url);
    if (result["errorCode"] == 0) {
      categoryList = result["value"];
    } else {
      Fluttertoast.showToast(msg: result["value"]);
    }
  }
}

GetParser.dart

import 'dart:async';
import 'dart:convert';

import 'package:flutter_demo/CategoryListModel.dart';
import 'package:http/http.dart' as http;

class GetCategoryListParser {
  static Future callApi(String url) async {
    final response = await http.get(Uri.parse(url)/*, headers: Config.httpGetHeader*/);
    final statusCode = response.statusCode;
    try {
      if (statusCode == 200) {
        Map body = json.decode(response.body);
        List categories = body["Categories"];
        List mainCategories = [];
        for (int i = 0; i < categories.length; i++) {
          Map<String, dynamic> map = categories[i];
          if (map['parent_category_id'] == 0) {
            mainCategories.add(map);
          }
        }
        categories.clear();
        categories.addAll(mainCategories);
        List<CategoryListModel> categoryModelList =
        categories.map((c) => new CategoryListModel.parseForCategories(c)).toList();
        return {
          'errorCode': 0,
          'value': categoryModelList,
        };
      } else {
        return {'errorCode': "-1", 'msg': "Status Code Error"};
      }
    } catch (e) {
      print(e);
      return {'errorCode': "-1", 'msg': "$e"};
    }
  }
}

Model.dart

class CategoryListModel {
  var categoryId, categoryName, categoryImage;

  CategoryListModel.parseForCategories(Map<String, dynamic> map) {
    if (map["id"] != null) {
      categoryId =map["id"];
    }
    if (map["name"] != null) {
      categoryName =map["name"];
    }
    if (map["image"] != null) {
      Map images =map["image"];
      if (images["src"] != null) {
        categoryImage = images["src"];
      }
    }
  }
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.