Курс Таблицы Google → Данные из Google Таблиц на вашем сайте

Нет времени? Сохрани в

Привет!

Для тех, кто пользуется Google Таблицами, есть хорошая новость — ниже описано решение, которое позволит импортировать данные из таблицы на ваш сайт.

Поехали.

1. Открываем Таблицу Google

Для примера, я возьму таблицу, в которую падают результаты из Google Формы.

2. Открываем меню Tools — Script Editor…

3. Добавляем скрипт

var ss = SpreadsheetApp.getActiveSpreadsheet(), // spreadsheet
      s = ss.getActiveSheet(); // sheet

function getData(){
  var result = [],
      range = 'A:E', // диапазон ячеек, который хотим выгружать
      values = s.getRange(range).getValues(),
      last_row = parseInt(s.getLastRow());
    
  for (var i = 1; i < last_row; i++) {
      result.push(values[i]);     
  }
  return result; 
}


function doGet() {
  var data = getData();
  if(!data) {
    data = '';
  }
  return ContentService.createTextOutput(
    JSON.stringify({'result': data})).setMimeType(ContentService.MimeType.JSON);
}

При необходимости переопределите переменную “range”.

Если вы захотите доработать скрипт, ссылки на документацию:

4. Публикация как Web Application

Открываем меню Publish — Deploy as web app…

Вводим название новой версии проекта (например 1).
Меняем значение для “Who has access to the app” на “Anyone, even anonymous
Нажимаем “Deploy”.

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

Далее вам будет показан попап с ссылкой на ваш web app:

Вам нужно скопировать эту ссылку.

Можете сразу открыть её в браузере. Приложение должно вернуть содержание выбранного диапазона таблицы в формате JSON:

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

Пример работы на фронтенде

Ссылка на marketello.ru/example/google-s.html
Для простоты восприятия скрипта, я не стал делать дополнительное оформление выводимой информации.

На странице используются:

JS

(function () {
   var app = "https://script.google.com/macros/s/AKfycbzngb-5a3tDdHJ445o5LxqeN63V_ihhF_Nxlkz3gxLyMeG3MA/exec",
      output = '',
      xhr = new XMLHttpRequest();
   xhr.open('GET', app);
   xhr.onreadystatechange = function() {
     if (xhr.readyState !== 4) return;

     if (xhr.status == 200) {
        try {
            var r = JSON.parse(xhr.responseText),
               result = r["result"];
            for (var i = 0; i < result.length; i++){
                  var obj = r["result"][i];
                  output += obj.join("<br/>") + "<br/><hr/>";
            }
        } catch(e) {}
     } 
     
   document.getElementById('info').innerHTML = output;

   }
   xhr.send()
})()

HTML

<div id="info"></div>

Успехов!

Источник: https://habr.com/company/englishdom/blog/343082/

Твои коллеги будут рады, поделись в

Автор урока

Дмитрий Комаровский
Дмитрий Комаровский

Руководитель отдела
интернет-маркетинга
в EnglishDom

Другие уроки курса "Таблицы Google"

  1. Как зафиксировать строки и колонки
  2. Как сделать ячейки: календарь, список, чекбокс
  3. Вставка текста без форматирования
  4. Условное форматирование ячеек и строк
  5. Объединение текста и значений ячеек
  6. Пример конструктора UTM-меток через Таблицы Google
  7. Именованные диапазоны
  8. Подгружаем информацию из другой таблицы Google
  9. Разбор примера. Чеклисты и эмоции в Таблицах Google
  10. Спарклайн (sparkline): строим график внутри ячейки
  11. Как вставить картинку в таблицу Google
  12. Как добавить ссылку в таблицах Google
  13. Выбираем и считаем уникальные значения
  14. Получаем максимальное и минимальное значения
  15. Функция IF (ЕСЛИ) в Таблицах Google
  16. Проверяем ячейку на несколько условий (несколько ЕСЛИ)
  17. Считаем количество/сумму ячеек по условию (COUNTIF, SUMIF)
  18. Как посмотреть все формулы таблицы Google
  19. Разделение данных ячейки по столбцам
  20. Объединение значений нескольких ячеек с разделителем
  21. Как выделить часть строки из ячейки
  22. Данные из Google Таблиц на вашем сайте
  23. Замена контента страницы в зависимости от utm-меток

Marketello читают маркетологи из крутых компаний