使用 Google 张作为图像轮播的 JSON 提要

Question

我正在尝试构建一个使用 Google sheet 作为信息源的图像轮播。如果我对 JSON 进行硬编码，我可以让轮播工作，但是我在让 Google Sheet JSON 工作时遇到问题。

我已经打开了我正在处理的所有内容以供查看：
Google Sheet（创建 JSON 输出的脚本可以通过 Tools/Script 编辑器访问）
Google Sheet JSON Output
Google Apps Script Project

这是 Content Service Web App（从 Google Sheet 生成 JSON）：

// The name of the spreadsheet from the browser location bar.
// Copy after 'key=' until before the next URL parameter beginning w/&
var SPREADSHEET_ID = '1qolqEsn-hxkRwGfyY1O5ttWB9KzqB7MpgNNF6t3mfvk';
var source = SpreadsheetApp.openById(SPREADSHEET_ID);//Defines the source spreadsheet, in this example, the source is the current spreadsheet.
var source_sheet = source.getSheetByName("Sheet1");//Enter the name between the quotes of the sheet within the specified source spreadsheet that holds the data you want to transfer  
var lastRow = source_sheet.getLastRow();//For checking last row with data in cell and formatting range
var lastColumn = source_sheet.getLastColumn();//For checking last row with data in cell and formatting range
var source_range = source_sheet.getRange(1,1,lastRow,lastColumn);//(StartRow,StartColumn,NumberofRowstoGet,NumberofColumnstoGet)  
// The name of the sheet, displayed in a tab at the bottom of the spreadsheet.
// Default is 'Sheet1' if it's the first sheet.
var SHEET_NAME = 'Sheet1';

function doGet(request) {
//  var callback = request.parameters.jsonp;
  var callback = request.parameters.callback;
  var json = callback + '(' + Utilities.jsonStringify(source_range.getValues()) + ')';

  return ContentService.createTextOutput(json).setMimeType(ContentService.MimeType.JAVASCRIPT);
}

// Testing to see if the jsonp parameter is being used properly.
function testDoGet() {
  var request = {parameters: {jsonp: 'callback'}};
  var results = doGet(request);
  Logger.log(results.getContent());
}

下面是一个有效的代码片段，硬编码 JSON 被注释掉了 ，使用来自 spreadsheet 的提要。同样，该脚本使用硬编码 JSON 时功能齐全，但当我尝试使用提要 URL.

时不起作用

        $(function(){
            $.getJSON('https://script.google.com/macros/s/AKfycbzpOcYAX9CrBxGKyQ18Nupe9EzGU-Byl7_A-fY-TSd1zbcvAw/exec?callback=?', 
            function(json) {
//                console.log(json);                                               //Testing
//                console.log(json[0][0]);                                         //Testing
                var mhtml = '<ul>';
            
                for (var i = 1; i < json.length; i++){                             //For each item in the json array 
//                    console.log('image: ' + json[i][0]);                         //Log the array field
//                    console.log('title: ' + json[i][1]);                         //Log the array field
//                    console.log('desc: ' + json[i][2]);                          //Log the array field
                    mhtml += '<li><div class="img-responsive"><img src="https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?url='+json[i][0]+'&container=focus&resize_w=665" /></div>';
                    mhtml += '<div class="desc"><h1 class="title">'+json[i][1]+'</h1>';
                    mhtml += '<p class="expert">'+json[i][2]+'</p></div>';
                    mhtml += '</li>';
                };
                mhtml += '</ul>';
                $('.slider').append($(mhtml));
                slideshow();
            });


            function slideshow() {
//                console.log('running slideshow');                                //Testing
//                console.log('slider length: ' + $(".slider ul> li").length);     //Testing
                $(".slider ul> li:gt(0)").css("opacity" , "0");
                var j = 0;
                var delay = 3000; //millisecond delay between cycles
          
                function cycleThru(){
                    var jmax = $(".slider ul> li").length -1;
                    $(".slider ul> li:eq(" + j + ")")
                        .animate({"opacity" : "1.0"} ,400)
                        .animate({"opacity" : "1"}, delay)
                        .animate({"opacity" : "0"}, 400, 
                        function(){
                            (j == jmax) ? j=0 : j++;
                            cycleThru();
                        });
                };

                cycleThru();
  
            }
        });

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);

*{
    margin: 0;
    padding: 0;
    font-family: 'Yanone Kaffeesatz';
}

h1 {
    font-size: 3em;
    font-family: arial;
}

p {
    font-size: 1em;
    font-family: arial;
}

ul li {  margin: 0;
    padding: 0;list-style:none}

.slider {
    display: block;
    min-height: 345px;
    max-width: 665px;
    margin: auto;
    border: 12px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    margin-top: 20px;
    position: relative;
}

.slider ul{  
    display: block;
    height: auto;
    max-width: 640px;
    overflow:hidden}

.slider>ul>li {
    height: 320px;
    float: left;
    position: absolute;
}

.slider >ul>li>img {
    margin: auto;
    height: 100%;
    min-height: 345px;
    max-width: 665px;
}

.desc {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 260px;
    z-index: 1000;
    background-color: rgba(255,255,240,0.5);
   
    display: inline-block;
    text-align: center;
    padding-top: 7px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
    <?!= include('css'); ?>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  </head>
  <body>
    <div class="slider"></div>
  </body>
</html>

Answer 1

您需要将回调参数添加到您的URL。

 $.getJSON('https://script.google.com/macros/s/AKfycbzpOcYAX9CrBxGKyQ18Nupe9EzGU-Byl7_A-fY-TSd1zbcvAw/exec?callback=?', ...

在您的内容服务应用中：

function doGet(request) {
  var callback = request.parameters.callback;
  var json = callback + '(' + Utilities.jsonStringify(source_range.getValues()) + ')';
  return ContentService.createTextOutput(json).setMimeType(ContentService.MimeType.JAVASCRIPT);
}

Answer 2

我现在可以正常工作并更新了上面的代码。感谢@spencer-easton 帮助 JSON。一旦我让提要开始工作，我就必须做出改变才能让它工作。要突出显示的原始代码的重大更改是：

添加了一个 for 循环以遍历 JSON:

产生的数组

for (var i = 1; i < json.length; i++){                             //For each item in the json array 
    mhtml += '<li><div class="img-responsive"><img src="https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?url='+json[i][0]+'&container=focus&resize_w=665" /></div>';
    mhtml += '<div class="desc"><h1 class="title">'+json[i][1]+'</h1>';
    mhtml += '<p class="expert">'+json[i][2]+'</p></div>';
    mhtml += '</li>';
};

从循环轮播的函数中删除了 $(document).ready，而是在 json 响应函数的末尾调用它：

    $('.slider').append($(mhtml));
    slideshow();
});


function slideshow() {
    $(".slider ul> li:gt(0)").css("opacity" , "0");
    var j = 0;
    var delay = 3000; //millisecond delay between cycles

    function cycleThru(){
       var jmax = $(".slider ul> li").length -1

使用 Google 张作为图像轮播的 JSON 提要

Use Google Sheets as JSON feed for image carousel

json

getjson

google-sheets

carousel

google-apps-script