Построение таблицы на основе API Connector

Следуя данной инструкции, вы построите в Editor таблицу на основе подключения API Connector.

В качестве источника данных будет использоваться статичный JSON-файл, расположенный по адресу: https://storage.yandexcloud.net/datalens-public-demo-assets/data/mtcars.json, однако в случае с полноценными API процесс будет аналогичен.

Перед началом работы

Чтобы начать работать с DataLens, воспользуйтесь инструкцией по развертыванию.

Создайте воркбук

  1. Перейдите на главную страницу DataLens.
  2. На панели слева выберите Коллекции и воркбуки.
  3. В правом верхнем углу нажмите Создать → Создать воркбук.
  4. Введите название воркбука — Практические руководства.
  5. Нажмите кнопку Создать.

Создайте подключение API Connector

  1. Перейдите в созданный на предыдущем шаге воркбук и нажмите Создать → Подключение.

  2. В разделе Файлы и сервисы выберите API Connector.

  3. Укажите параметры подключения:

    • Имя хоста — storage.yandexcloud.net;
    • Порт — 443;
    • URL путь — datalens-public-demo-assets/data/.

    Остальные параметры оставьте без изменений.

  4. Нажмите Создать подключение. Введите название подключения и нажмите Создать.

  5. Перейдите в воркбук Практические руководства и на вкладке Подключения найдите созданное подключение.

  6. Скопируйте идентификатор подключения: рядом с ним нажмите на → Копировать ID. Идентификатор будет скопирован в буфер обмена.

Создайте чарт в Editor

  1. В воркбуке в правом верхнем углу нажмите Создать → Чарт в Editor. На открывшейся странице выберите тип визуализации Таблица.

  2. Свяжите чарт с подключением: для этого перейдите на вкладку Meta и добавьте ID подключения в links:

    {
            "links": {
        	     "mtcars": "<id_подключения>"
            }
        }

    Где:

    • <id_подключения> — идентификатор подключения, скопированный на предыдущем шаге.
    • mtcars — произвольное имя-алиас, которое вы присваиваете подключению, с помощью которого запрашиваете данные для чарта из источника.

    Примечание

    Вкладка Meta нужна для описания служебной информации о списке связанных сущностей. Эта информация используется для определения, с какими подключениями и датасетами связан чарт, а также для диалога связанных объектов, при копировании воркбука и при публикации в Public.

  3. Получите данные из источника. Для этого перейдите на вкладку Source и укажите:

    module.exports = {
            mtcars: {
        
         	   // Указываем, в какое подключение ходим за данными
         	   // Используем тут имя, которое мы дали подключению на табе Meta
                apiConnectionId: Editor.getId("mtcars"),
        
         	   // Указываем путь до API-метода/страницы в источнике
                path: "/mtcars.json",
        
         	   // Метод запроса
                method: "GET",
            }
        };

  4. Очистите содержимое вкладки Config: она содержит шаблон, не относящийся к нашему примеру.

  5. На вкладке Prepare сформируйте таблицу:

    // Получаем скачанные данные
        const cars = Editor.getLoadedData().mtcars.data.body.cars;
        
        // Формируем заголовок таблицы и описываем типы колонок
        const head = [
           {
              id: 'title',
              name: 'Name',
              type: 'string',
           },
           {
           	id: 'mpg',
           	name: 'MPG',
           	type: 'number',
           }
        ];
        
        // Наполняем таблицу содержимым
        const rows = cars.map((car) => {
           return {
              cells: [
                 {value: car.model},
                 {value: car.mpg},
              ],
           };
        });
        
        module.exports = {head, rows};

  6. Вверху чарта нажмите Выполнить. В области предпросмотра отобразится простая таблица, которая выводит данные, получаемые из JSON API.

    image.png

  7. Чтобы сохранить чарт, в правом верхнем углу нажмите Сохранить и введите название чарта.

Предыдущая
Создание таблицы на основе SQL-запроса
Следующая
Вкладки