Json在Dart中解析(颤振) [英] Json parsing in dart (flutter)

问题描述

我是Flutter的新手，对复杂的json解析了解不多.我已经查阅了几篇在线文章，但没有找到合适的解决方案.我的json如下

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"
                }
            ]
        }
    ]
}

任何帮助都会很棒.

推荐答案

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),
                      ],
                    ),
                  );
                },
              ),
            ),
    ));
  }
}

检查出您要解析的JSON，我已经为您提供了简单的逻辑，说明了您如何解析.

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,
    };
}

签出要解析的模型.并如上所述将您的json声明在文件中进行解析.

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

这是最终输出:

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

这篇关于Json在Dart中解析(颤振)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！