Парсинг JSON & XML Данных в Flutter

Парсинг JSON & XML Данных в Flutter

FlutterPulse

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Изучите один из наиболее важных навыков разработки на Flutter: парсинг JSON- и XML-данных в объекты Dart.

Почему стоит изучать?

Это часть основ разработки на Flutter, о которой вам стоит знать при работе с данными.

Если вы только начинаете свою карьеру на Flutter, изучение парсинга данных является обязательным для вас, будь то данные из удаленного API или другого источника данных.

Большую часть времени при разработке приложений на Flutter мы будем работать с данными, поэтому наличие этого навыка почти обязательно.

Основы сначала

И JSON, и XML являются способами передачи данных от одной машины к другой. Оба они очень легко понимаемы и являются открытыми форматами данных для хранения и обмена данными. Они легко понимаемы как для людей, так и для машин.

В современном мире JSON является наиболее часто используемым форматом данных для хранения и обмена данными между машинами.

JSON

  • означает JаваSкрипт Oбъект Nотация.
  • Как следует из названия, оно произошло от JavaScript.
  • Это независимый от языка формат.
  • Данные структурированы в виде вложенных структур.
  • Данные форматируются в простых структурах данных, таких как упорядоченные списки (массивы) или пары ключ-значение (объекты).

Синтаксис:

{
 "имя": "Алок",
 "фамилия": "Сингх",
 "электронная почта": "corporate.alok@gmail.com",
 "навыки": [
 "flutter",
 "dart",
 "git",
 "github",
 "postman"
 ]
}

XML

  • означает рXасширяемый Mаркер Lангуэдж.
  • использует пользовательские теги для структуризации данных в виде дерева.
  • аналогичен HTML.
  • сравнительно содержит больше servisного кода.
  • Это наиболее старый формат передачи и хранения данных среди двух.

Синтаксис:

<!-- XML-элемент Person, обозначающий отдельную сущность человека -->
<Person>
 <имя>Алок</имя>
 <фамилия>Сингх</фамилия>
 <электронная почта>corporate.alok@gmail.com</электронная почта>
 <навыки>
 <навык>flutter</навык>
 <навык>dart</навык>
 <навык>git</навык>
 <навык>github</навык>
 <навык>postman</навык>
 </навыки>
</Person>

Парсинг сырых данных в JSON и XML

Когда данные передаются между двумя машинами, они представляют собой просто текст или строку в UTF-8 формате. Нам нужен декодер/кодировщик, который сможет понять и преобразовать сырые данные в допустимый ответ, который можно использовать для дальнейшей обработки.

1. Парсинг сырых данных в JSON

В проекте у нас есть этот person.json актив, содержащий данные JSON.

Dart предоставляет ядро библиотеки с именем dart:convert для работы специально с JSON для сериализации/десериализации данных.

// импортируем библиотеку dart:convert для операций с JSON
import "dart:convert";

FutureBuilder(
  future: _xmlFuture,
  initialData: "...loading xml",
  builder: (context, data) {
    if (data.connectionState == ConnectionState.done) {
      final personString = data.data!;

      // преобразуем строку в объект JSON
      final personJson = jsonDecode(personString);
      return Center(
        child: Text("Person JSON: $personJson"),
      );
    }
    return SizedBox.shrink();
  },
),

2. Парсинг сырых данных в XML

В проекте у нас есть этот person.xml актив, содержащий данные XML.

В отличие от JSON, для сериализации/десериализации XML и связанных с этим операций нам нужно установить дополнительную библиотеку Dart с именемxml.

// импортируем пакет xml для операций с XML
import "package:xml/xml.dart";

FutureBuilder(
  future: _jsonFuture,
  initialData: "...loading xml",
  builder: (context, data) {
    if (data.connectionState == ConnectionState.done) {
      final personString = data.data!;

      // парсим строку в документ XML
      final personJson = XmlDocument.parse(personString);
      return Center(
        child: Text("Person JSON: $personJson"),
      );
    }
    return SizedBox.shrink();
  },
),

Создание модели/класса данных Dart

Чтобы использовать данные в приложении Flutter, первым требованием является структуризация их определенным образом. И для этого в Dart мы создаем классы-модели (часто называемые классами данных; они являются шаблоном или схемой данных в предопределенной структуре).

Класс-модель - это простой класс со свойствами и конструктором, который определяет структуру для объекта данных.

Согласно нашим требованиям, нам нужно распарсить информацию о человеке, имеющую firstName, lastName, email, и skills. Согласно формату данных, мы определим эти свойства с их соответствующим типом.

Кроме того, для создания объекта мы создадим конструктор, принимающий значения для всех полей.

class Person {
  final String firstName;
  final String lastName;
  final String email;
  final List<String> skills;

  Person({
    this.firstName,
    this.lastName,
    this.email,
    this.skills,
  });
}
Для небольших объектов или простых данных обычно ручная работа хороша и достаточна. Но для сложных данных это может стать утомительной задачей. И именно здесь на помощь приходят инструменты, такие как QuickType. Инструмент упрощает создание объекта Dart, предоставляя различные варианты конфигурации и генерируя код за несколько кликов.

Парсинг JSON и XML в объекты Dart

Преобразование данных из JSON или XML или других подобных форматов в объекты Dart предоставляет нам гибкость для работы с данными в Dart, с каждым из которых соответствует подход ООП языка программирования Dart.

Кроме того, в сообществе Flutter существует широко используемая конвенция использования фабричных конструкторов для парсинга данных из некоторого формата (в нашем случае, JSON и XML). Это выглядит примерно так: Person.fromJson, Person.fromXml.

Фабричные конструкторы Dart предоставляют нам больший контроль над созданием объектов. Кроме того, они помогают инкапсулировать логику парсинга.

Парсинг JSON в объект Dart

До сих пор мы уже преобразовали наши данные из строки в JSON; поэтому теперь нам нужно преобразовать его в объект Dart.

Здесь, для этой цели, мы создадим фабричный конструктор fromJson для парсинга JSON в объект Person.

Опять же, это может быть утомительной задачей, если ответ слишком сложный или большой, поэтому рассмотрите возможность использования QuickType.
class Person {
  //... существующий код (свойства, конструктор)

  /// для преобразования JSON в объект Dart
  factory Person.fromJson(Map<String, dynamic> json) => Person(
    firstName: json['firstName'],
    lastName: json['lastName'],
    email: json['email'],
    skills: List.castFrom(json['skills'])
  );

  /// для преобразования объекта Dart в JSON
  Map<String, dynamic> toJson() => {
    "firstName": firstName,
    "lastName": lastName,
    "email": email,
    "skills": skills.toString()
  }
}

Парсинг XML в объекты Dart

Парсинг XML требует одного дополнительного требования. Для парсинга XML в Dart нам нужен пакет Dart с именем xml, который можно установить, просто выполнив dart add xml или flutter pub add xml.

Эта библиотека предоставляет модель на основе DOM для доступа и манипулирования документами XML.

После установки пакета, импортируйте его в файл, где находится ваш объект Dart, поскольку нам теперь нужно разобрать и сопоставить каждый элемент с объектом Dart.

Как и парсинг JSON, мы собираемся создать фабричный конструктор fromXML для парсинга XML в объект Dart.
import 'package:xml/xml';

class Person {
  //... существующий код (свойства, конструктор)
  factory Person.fromXML(XmlDocument xml) {
    final person = xml.getElement('Person');
    return Person(
      firstName: person!.getElement('FirstName')!.innerText,
      lastName: person.getElement('LastName')?.innerText,
      email: person.getElement("Email")!.innerText,
      skills: person
             .getElement('Skills')
             ?.findAllElements("Skill")
             .map((skill) => skill.innerText)
             .toList()??
          [],
     );
  }
}

Давайте быстро поймем использование XML для наших нужд.

  • getElement : находит первый дочерний элемент с заданным именем.
  • findElements : лениво находит прямые дочерние элементы с заданным именем.
  • findAllElements : лениво находит вложенные дочерние элементы с заданным именем.
  • innerText : возвращает текст внутри элемента XML

и это практически все, что нам понадобится для наших требований.

для дополнительной информации посетите документацию пакета xml dart.

Преобразование объектов Dart обратно в JSON и XML

Преобразование данных JSON и XML в объекты Dart - это одна часть процесса. Это достаточно для парсинга входящих данных. Но что, если нам нужно отправить информацию об этом объекте Dart где-то еще в формате JSON или XML? Вот когда на сцену выходят знаменитые toJson и toXml методы класса данных.

Вы вряд ли будете использовать это, но вы должны быть осведомлены об этом тоже, если знаете fromJson (который преобразует JSON в объект Dart), поскольку иногда нам нужно преобразовать данные в обратном порядке тоже.

toJson и toXml - это просто противоположность fromJson и fromXml.

Разбор объекта Dart в JSON

toJson метод вернет строку JSON, для которой в Dart мы используем Map<String, dynamic>, размещая существующие значения объекта в строке JSON.

Map<String, dynamic> toJson() => {
  "firstName": $firstName,
  "lastName": $lastName,
  "email": $email,
  "skills": $skills.join(", "),
}

Разбор объекта Dart в XML

toXml метод вернет XmlDocument, создавая необходимые элементы и вкладывая их определенным образом.

Для этой цели библиотека xml предоставляет нам XmlBuilder, который поможет нам создать документ XML.

XmlDocument toXml(){
  // получить экземпляр XmlBuilder для начала построения документа XML
  final builder = XmlBuilder();

  // создать элемент XML Person
  builder.element("Person", nest: (){
    builder.xml("<FirstName>$firstName</FirstName>");
    builder.xml("<LastName>$lastName</LastName>");
    builder.xml("<Email>$email</Email>");
    // элемент XML Skills с несколькими элементами Skill
    builder.element("Skills", nest: (){
      skills.map((skill){
        builder.xml("<Skill>$skill</Skill>");
      });
    });
  });

  // построить документ XML с текущими данными XML
  return builder.buildDocument();
}

Для получения дополнительной информации о пакете xml и связанных с ним операциях вы можете обратиться к https://pub.dev/packages/xml.

Вывод

XML

JSON

Если вы прочитали эту статью до конца и она каким-то образом показалась вам полезной, то обязательно аплодируйте за нее. Таким образом, вы мотивируете меня продолжать писать такие статьи.

Дополнительное чтение

Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org