Отказ от ответственности: Это предназначено только для образовательных целей, чтобы показать, какие удобные фронтенд-трюки могут помочь кому-то решить несколько проблем, и это только временное решение для получения данных из Airtable в формате JSON.

Предварительные требования: Некоторое знание VanillaJS и DOM API будет полезно, но в основном вы сможете сделать это работающим и без этого.

Цель

Цель состоит в том, чтобы попытаться распарсить данные всей таблицы из airtable с помощью небольшого фронтенд-трюка. Это действительно не масштабируемое решение, но может помочь с некоторыми статическими данными и также преобразовать их в читаемый формат JSON.

Давайте возьмем следующую таблицу в качестве примера: https://airtable.com/shrpj2r4Kjc4YoMu4/tbl8m95GiuWehnIiT

Мы хотим преобразовать данные из этой таблицы в JSON, наподобие этого:

[
 {
  "name": "1Password",
  "status": [
   "Заморозка найма"
  ],
  "city": "Торонто",
  "url": "[https://1password.com/jobs](https://1password.com/jobs)"
 },
 {
  "name": "1stdibs",
  "status": [
   "Заморозка найма",
   "Сокращения"
  ],
  "city": "Нью-Йорк"
 },
 {
  "name": "1T9 tech pvt ltd",
  "status": [
   "Заморозка найма"
  ]
 }
]

Решение

4. Нажмите на запрос в боковой панели слева > Предварительный просмотр > Разверните объект (только верхний уровень) > Щелкните правой кнопкой мыши по data и выберите "Сохранить как глобальную переменную" (Это временно сохраняет его в качестве переменной temp1).

5. Перейдите в "Консоль", так как наша работа практически завершена, вы увидите переменную с именем temp1, которая будет иметь тип объекта, и свойство в нем с именем table, которое в основном содержит все данные, которые нам нужны.

6. Я понял, что Airtable использует Lodash (просто напишите _.VERSION в консоли), и он доступен в глобальной области видимости, поэтому мы воспользуемся этим. (Просто шаг мыслей, вам не нужно ничего делать).

7. Изучите данные запроса, определите, как columnIds сопоставляются с данными, которые присутствуют во всем JSON-ответе. (скрипт ниже, скорее всего, сработает, но я просто хотел поделиться этим пониманием - вам, скорее всего, не потребуется ничего делать здесь).

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

Вы можете выбрать что-то вроде: Название компании, Статус, Куда подать заявку

8. Как только вы выбрали нужные столбцы, обновите identifiers вместе с значением, которое вы хотите, чтобы ваш JSON содержал пару ключ-значение.

Например:

Название компании - name

Куда подать заявку - url

Так что я сделаю identifiers следующим образом:

identifiers = {
  'Название компании': 'name',
  'Город': 'city',
  'Куда подать заявку': 'url',
  'Статус': 'status'
};

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

9. После того, как вы обновили identifiers, просто нажмите Enter, и он скопирует весь JSON-ответ в буфер обмена.

10. Откройте среду разработки, такую как VSCode, и нажмите вставить!

Вы увидите JSON примерно такого вида:

[{
  "name": "1Password",
  "status": [
   "Заморозка найма"
  ],
  "city": "Торонто",
  "url": "[https://1password.com/jobs](https://1password.com/jobs)"
 },
 {
  "name": "1stdibs",
  "status": [
   "Заморозка найма",
   "Увольнения"
  ],
  "city": "Нью-Йорк"
 },
 {
  "name": "1T9 tech pvt ltd",
  "status": [
   "Заморозка найма"
  ]
 }
]

11. Все готово, печенье! 🍪