Привязка данных запроса к компонентам

При создании приложений в Apeekflow вы можете использовать JavaScript (JS) для доступа к объектам и преобразования данных из них, включая компоненты, запросы и глобальные параметры. При написании JavaScript внутри редактора SQL, поля ввода свойств компонента, настроек столбцов таблицы и т.д. Всегда помните о необходимости заключать весь ваш JS-код в двойные фигурные скобки, например {{'hello, ' + currentUser.name}}.

Доступ к данным

Объекты имеют глобально уникальные имена, такие как input1, query1 и table1. Вы можете ссылаться на свойства объектов в вашем приложении с помощью JS-кода.

Доступ к данным в объекте

Apeekflow поддерживает доступ к данным в объекте с использованием точечной нотации (objectName.keyName). Для примера,{{userInfo.selectedRow.userName}} получает доступ к значению имени пользователя в текущей выбранной строке Таблицы userInfo.

При написании JS в{{ }} чтобы получить доступ к значениям в объекте, добавьте . после имени объекта, чтобы вызвать меню автозапуска в случае, если вы не уверены во встроенных свойствах или методах объектов.

Пример

Этот GIF-файл показывает, как точечная запись запускает меню автозагрузки и отображает свойстваtable1.

Доступ к данным в массиве

Вы можете получить доступ к значениям в массиве по индексу. Индекс всегда начинается с 0, поэтому вы можете использоватьarray[0], чтобы получить доступ к первому элементу массива.

Пример

Свойство Данные компонента Таблица представляет собой массив объектов. В этом GIF-файле показано, как получить доступ к значению first_name в первом элементе массива данных в table1.

Преобразование данных

Вы можете использовать встроенные функции JS и сторонние библиотеки в {{ }} для преобразования данных, таких как filter(), map() и reduce() операции.

Пример

Строка в нижнем регистре.

{{input1.value.toLowerCase()}}

Измените формат даты.

{{moment(table1.selectedRow.date_column).format('YYYY-MM-DD')}}

Возвращает имя из результатов запроса.

{{query1.data.map(i => i.name)}}. 

Ограничения

JS-код в {{ }} должен быть однострочный код, например .map() or .reduce() в сочетании с функцией стрелки или троичным оператором.

Примеры

{{query1.data.id.length}} // ✅ to reference a value
{{query1.data.map(row => row.id)}} // ✅ .map() + arrow function
{{ num1 > num2 ? num1 : num2 }} // ✅ ternary

Следующие примеры кода на JS недопустимы в {{ }}.

{{ 
    // ❌ вы не можете написать подобный код в {{ }}
    const array = query1.data;
    const filterArray = array.filter(it => it.value > 10);
    return filterArray; 
}}

Если вы хотите организовать несколько строк JavaScript, Apeekflow поддерживает написание такого кода в transformers.

// коды внутри трансформатора
if (select.value === "1") {  
    return "Option 1";
}
if (select.value === "2") {
    return "Option 2";
}
return "Option 3"; 

Просмотр данных

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

Просмотр результата запроса

После запуска запроса в редакторе запросов с помощью кнопки Выполнить**.** Результат запроса отображается в формате, показанном ниже.

Просмотр данных в браузере данных

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

Просмотр в режиме реального времени

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