谷歌電子表格Json與貓頭鷹滑塊集成

我一直在尋找一種方法來使用谷歌表來驅動貓頭鷹滑塊，主要原因是我希望能夠動態更新數據饋送中的一堆滑塊。谷歌電子表格Json與貓頭鷹滑塊集成

我做的問題是，貓頭鷹滑塊將無法解釋谷歌表輸出的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第一解析谷歌表來創建子項，然後針對貓頭鷹轉盤div來有幻燈片已經在那裏爲它輪換，每次不過我不能讓它動起來只是坐在第一個項目上。

我試圖讓它進入codepen，但它不適合我。這裏是一個工作環節，在示例的固定，我沒有瞄準目標貓頭鷹的div只是一個我提出讓JSON正在

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

任何幫助或建議，將不勝感激。

來源

2016-11-27 mcktj

這不是一個答案，但它看起來像您的代碼使用舊的gdata API訪問表。查看[新的Sheets API]（https://developers.google.com/sheets/） - 示例和指南中提供了以JSON格式訪問數據的有用示例。 – Bardy

謝謝你 - 我會看一看，看看它是否散發出光芒:)代碼在其他情況下工作，這可能與我的腳本的執行順序有關，這會導致問題。 – mcktj

所以在玩了一段時間之後，我才得以運行，問題在於我用我的函數定位的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);

來源

2016-12-04 14:21:53 mcktj

谷歌電子表格Json與貓頭鷹滑塊集成

回答

相關問題