Допустим, вы создаете приложение для авиакомпании, которое получает данные о пассажирах из API в формате JSON. У вас есть два варианта: 1) вручную извлекать значения с помощью выражений пути к JSON и использовать их напрямую или 2) извлекать и хранить значения в пользовательском типе данных, а затем использовать их.

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

Безопасность типов: Такие переменные, как состояние приложения или состояние страницы, имеют определенные типы, например целые числа или строки. После определения они могут хранить значения только того же типа. Например, переменная «возраст» типа integer не может хранить слова типа «двадцать шесть»; она принимает только значение 26.

Безопасность типов помогает предотвратить ошибки. Она подскажет вам, если вы пытаетесь сделать что-то бессмысленное, например, сложить число и слово. Подробнее о безопасности типов можно узнать здесь.

Преобразование одного объекта JSON в пользовательский тип данных

Рассмотрим, как можно преобразовать JSON-объект, имеющий следующий вид, в пользовательский тип данных «пассажир», а затем отобразить его значения в пользовательском интерфейсе.

{
«_id»: «6465fe85b149ab5cc6352c32»,
«name»: «Anupamaa»,
«trips»: 435,
}

Вот как это выглядит в готовом виде.

тп 1

Идея заключается в том, чтобы создать пользовательский тип данных, представляющий структуру JSON, а затем отобразить значения JSON в поле пользовательского типа данных с помощью действия Update App State. В дальнейшем можно получить доступ к данным из пользовательского типа данных для отображения значений.

Ниже приведены пошаговые инструкции:

  • Создайте пользовательский тип данных с именем ‘пассажир’.
тп 2
  • Создайте переменную состояния App или Page с типом данных ‘пассажир’.
тп 3
  • Выполните вызов API для получения информации о конкретном пассажире. Чтобы быстро опробовать этот способ, можно воспользоваться следующим API отсюда.
    https://api.instantwebtools.net/v1/passenger/6465fe85b149ab5cc6352c32
  • После успешного выполнения вызова API, т.е. в разделе TRUE, добавьте действие Update App State.
    1. Нажмите кнопку + Add Fields и выберите переменную состояния приложения, т.е. в данном случае ‘пассажир’.
    2. Выберите Update Type для Update Field(s) и нажмите Update [custom_data_type_name].
    3. Нажмите на + Add Fields и задайте значение поля из Set Variable > [API_action_output_variable_name].
    4. Установите для параметра Параметры ответа API значение JSON Body.
    5. Установите для параметра Available Options значение JSON Path.
    6. Для параметра JSON Path Name установите либо пользовательский JSON-путь, либо используйте уже созданный JSON-путь. Смотрите, как создать путь JSON.
    7. Нажмите кнопку Подтвердить.
    8. Аналогичным образом задайте значения других пользовательских полей.

Видео:https://www.loom.com/share/0302d78dae2f4b0488cd4582a97d1ea4?sid=c6c4b7b9-8b5c-4fba-bbb4-c868e022787c

  • Для отображения информации о пассажире:
    1. Выберите виджет Text, перейдите на панель свойств > Text > Set from Variable menu > App State > [app_state_variable_name] (содержит пользовательский тип данных).
    2. Установите значение Available Options в поле Data Structure Field. Это позволит выбрать поле из пользовательского типа данных.
    3. Теперь выберите поле, которое необходимо отобразить.
тп 4

Преобразование массива JSON в список пользовательского типа данных

Рассмотрим на примере, как можно извлечь следующий массив JSON в список пользовательского типа данных.

тп 5

Отображение списка пользовательских типов данных ‘авиакомпания’

тп 6

Для простоты расширим предыдущий пример и создадим еще один пользовательский тип данных с именем ‘airline’, представляющий собой массив JSON. Затем с помощью Custom Action преобразуем его в список пользовательского типа данных. В дальнейшем к списку можно будет обращаться для отображения значений в Listview.

Ниже приведены пошаговые инструкции:

    1. Создайте пользовательский тип данных с именами ‘пассажир’ и ‘авиакомпания’. Внутри ‘пассажир’ добавьте еще одно поле для захвата списка ‘авиакомпания’.
тп 7
  • Выполните шаги 2 и 3 из предыдущего примера.
  • После успешного завершения вызова API, т.е. в секции TRUE, добавьте пользовательское действие, которое преобразует массив JSON в список «авиакомпаний».
  • Выполните шаг № 4 из предыдущего примера, но убедитесь, что для поля авиакомпаний внутри типа данных ‘пассажир’ задано его значение из выходной переменной пользовательского действия (добавленного на предыдущем шаге).

Видео:https://www.loom.com/share/32dcb596e2b24ee4a8f42b9ef780975a?sid=36851973-6f88-457c-acef-572b605c32ad

  • Для отображения значений можно воспользоваться инструкцией, приведенной здесь.

Пример проекта

В этом проекте вы можете найти демонстрируемую страницу с именем ‘PassengerDetailsCustomDataType’.