Google 电子表格 Json 和 Owl 滑块集成答案

【问题标题】：Google Spreadsheet Json & Owl Slider IntegrationGoogle 电子表格 Json 和 Owl 滑块集成
【发布时间】：2016-11-27 16:30:43
【问题描述】：

我一直在寻找一种使用 google sheet 为 owl 滑块提供动力的方法，主要原因是我希望能够从数据馈送中动态更新一堆滑块。

我遇到的问题是 Owl Slider 将无法解释 google sheet 输出的 JSon。根据他们的示例here 和下面的代码格式。

{
  "items" : [
    {
      "img": "assets/owl1.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl2.jpg",
      "alt" : "Owl Image 2"
    },
    {
      "img": "assets/owl3.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl4.jpg",
      "alt" : "Owl Image 2"
    },
    {
      "img": "assets/owl5.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl6.jpg",
      "alt" : "Owl Image 2"
    }
  ]
}

所以我的方法是先使用 jquery 解析 google 工作表以创建子项目，然后将 owl carousel div 定位为已经存在幻灯片以供其旋转，但每次我无法得到它动画它只是位于第一个项目上。

我试图将它放入 codepen，但它不适合我。这是一个工作链接，在附加的示例中，我的目标不是针对 owl div，只是我为使 JSon 工作而制作的一个 div

http://www.tmkcreative.com/test-slider/index.html

任何帮助或建议将不胜感激。

【问题讨论】：

这不是答案，但看起来您的代码正在使用旧的 gdata API 来访问表格。看看new Sheets API - 在示例和指南中有一些有用的示例可以访问 JSON 格式的数据。
谢谢你 - 我会看看它是否有任何启示:) 代码在其他情况下确实有效，这可能与我的脚本的执行顺序有关，这可能会导致问题.

标签： javascript jquery json google-sheets-api

【解决方案1】：

所以在玩了一些之后，我能够让它工作，问题是我的函数所针对的 DOM 元素。我现在唯一的问题是我需要用我想从 JSON 文件中提取的幻灯片数量填充目标 div，这不是主要问题，因为我可能会显示一个固定数量，但如果这是动态完成的，那就太棒了。

// ID of the Google Spreadsheet
var spreadsheetID = "SPREADSHEET-KEY";

// Make sure it is public or set to Anyone with link can view 
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";

// make JSON call to Google Data API
$.getJSON(url, function(data) {

// set global html variable
var html3 = '';

// loop to build html output for each row
var entry = data.feed.entry;
/**
** Change to descending order
** for (var i = entry.length - 1; i >= 0; i -= 1) {
 */
for (var i = 0; i < entry.length; i++) {
 html3 += '<div class="owl-item"><div class="item"><a href="' + entry[i]['gsx$img']['$t'] + '"><img class="lazyOwl" src="' + entry[i]['gsx$img']['$t'] + '" alt=" '+ entry[i]['gsx$alt']['$t'] + '"></a></div></div>';  

}
 // output html
   $('#owl-demo2 > div.owl-wrapper-outer > div ').html(html3);

【讨论】：