Как добавить Javascript, чтобы данные вашей таблицы Google могли зацикливаться на вашем веб-сайте

Оглавление:

Введение - Щелкните здесь, чтобы увидеть статью
Настройка бесплатного хостинга и домена - Нажмите здесь, чтобы увидеть статью
Установить бесплатную базу данных с помощью Google Таблиц - Нажмите здесь, чтобы увидеть статью
Свяжите базу данных Google Sheet с веб-сайтом - Нажмите здесь, чтобы увидеть статью
Добавить Javascript для получения данных из базы данных в цикле
Добавить функцию поиска на веб-сайт - Нажмите здесь, чтобы увидеть статью
Добавьте контактную форму, не зависящую от PHP - Нажмите здесь, чтобы увидеть статью

На прошлой неделе я рассказывал, как импортировать данные из Google Таблиц и интегрировать их на свой веб-сайт с помощью утилиты Javascript под названием Tabletop. На этой неделе я расскажу, как автоматически сгруппировать данные в цикле.

Например, допустим, у вас есть группа данных под названием киты. В этой группе вы перечисляете различные виды китов. Что-то вроде этого:

Киты
Горбатый
Нарвал
Белуга

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

Ниже приведены некоторые данные, которые я установил. Обратите внимание, что в первой строке у меня есть заголовок, дата, дата отображения, тело и img. На своем веб-сайте я хочу разместить заголовок, дату и информацию об изображении.

Так выглядит сайт. Имейте в виду, что я использовал некоторые свои знания в области веб-разработки, чтобы стилизовать внешний вид этих данных в несколько более наглядную сетку. При этом каждый столбец сетки отображает все данные из столбцов title, date, body и img на листе Google. Вы увидите только три изображения, потому что я указал только три в данных.

Это лишь элементарный пример того, что можно сделать; однако это представление о том, что возможно.

Давайте подробно рассмотрим, как написать код для генерации данных.

Важным аспектом, позволяющим заставить ваш веб-сайт генерировать различные данные из всех строк title, date и img, является цикл for. Это выглядит так:

for (var i = 0; i ‹array.length; i ++) {

массив [я]

}

Я не буду вдаваться в подробности о цикле for, так как в Интернете есть невероятное количество знаний о создании циклов for; однако я в основном устанавливаю переменную, для которой установлено значение 0, а затем устанавливаю значение переменной меньше, чем длина массива, который в данном случае является длиной каждого столбца данных. Затем блок информации будет увеличиваться до тех пор, пока длина массива не будет полной.

Вот как выглядит код:

HTML-код для справки

‹Div class =” post ”›

‹/Div›

Javascript

for (var i = 0; i ‹data.length; i ++) {

$ (‘. Post’). Append (

‘‹ Div class = »article» style = »background-image: url (‘ +

data [i] .img + ‘.jpg)» ›’ +

‘‹ Div class = ”text” ›’ +

‘‹H1›’ + data [i] .title + ‘‹/h1›’ +

data [i] .body +

‘‹/Div›‘ + ‘‹ div class = »meta-info» ›’ + ‘‹ img src = ”’ + data [i] .img + ‘.jpg” ›’ +

‘‹ Div class = ”date” ›’ + data [i] .date + ‘‹/div›’ +

‘‹/Div›’ +

‘‹/Div›’);

}

Разбивка Javascript:

Я настраиваю таргетинг на класс сообщений в своем HTML и добавляю информацию из электронной таблицы.

В основном я делаю две вещи.

У меня есть javascript, добавляющий div и называющий div, чтобы я мог стилизовать их с помощью css.
Получение заголовка, даты и данных img из таблицы Google.

Чтобы настроить таргетинг на заголовок, дату и данные img, вы следуете этому шаблону:

данные [i]. имя-заголовка-столбца

Таким образом, каждый столбец данных будет иметь фоновое изображение, которое является изображением, установленным из столбца img.

‘‹ Div class = »article» style = »background-image: url (‘ + data [i] .img + ‘.jpg)» ›’

Каждый заголовок будет помещен в тег h1 для стилизации, за которым следует тело. Оба они находятся в div, называемом text для стилизации.

'‹Div class =” text ”›' + '‹h1›' + data [i] .title + '‹/h1›' + data [i] .body + '‹/Div›'

Наконец, я создал div для отображения метаинформации, такой как дата и аватар.

'‹Div class =” meta-info ”›' + '‹img src =”' + data [i] .img + '.jpg ”›' + '‹div class =" date " ›'+ data [i] .date +' ‹/div› '+' ‹/div› '

Вот и все. Так выглядит окончательный код javascript.

function init () {

Tabletop.init ({key: ‘198HS_8FJbZhASXbJ7hfJV-iux563hd6gg7joNYJ6X9k’,

обратный вызов: showInfo,

simpleSheet: true})

}

function showInfo (data, tabletop) {

console.log (данные);