- PVSM.RU - https://www.pvsm.ru -

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

Данные из Google Таблиц на вашем сайте - 1

Привет!

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

Поехали.

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

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

Данные из Google Таблиц на вашем сайте - 2

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

Данные из Google Таблиц на вашем сайте - 3

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”.

Данные из Google Таблиц на вашем сайте - 4

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

Скриншоты

Данные из Google Таблиц на вашем сайте - 5

Данные из Google Таблиц на вашем сайте - 6

Данные из Google Таблиц на вашем сайте - 7

Данные из Google Таблиц на вашем сайте - 8

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

Данные из Google Таблиц на вашем сайте - 9

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

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

Данные из Google Таблиц на вашем сайте - 10

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

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

Ссылка на l.englishdom.com/google-s.html [4]
Для простоты восприятия скрипта, я не стал делать дополнительное оформление выводимой информации.

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

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>

Успехов!

Бонусы для читателей

Данные из Google Таблиц на вашем сайте - 11 [5]

Мы дарим бесплатный доступ на три месяца изучения английского с помощью наших онлайн-курсов. Для этого просто перейдите по ссылке [5] до 31 декабря 2017 года.

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

Источник [6]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/internet-marketing/269045

Ссылки в тексте:

[1] Spreadsheet Service: https://developers.google.com/apps-script/reference/spreadsheet

[2] Class Sheet: https://developers.google.com/apps-script/reference/spreadsheet/sheet

[3] Class Range: https://developers.google.com/apps-script/reference/spreadsheet/range

[4] l.englishdom.com/google-s.html: https://l.englishdom.com/google-s.html

[5] Image: https://www.englishdom.com/myprofile/purchases/xabra3/?utm_medium=pr&utm_source=habra&utm_campaign=google_data_show2421117

[6] Источник: https://habrahabr.ru/post/343082/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best