Как отображать Google лист в формате HTML с помощью JSON

Question

Я хотел бы, чтобы отобразить список отелей в HTML, используя данные из этого листа Google: https://docs.google.com/spreadsheets/d/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/

Я использую JSON и JQuery, и хотел бы использовать JQuery перебирать все строки, отображая их в формате HTML.

До сих пор мне удалось отобразить некоторое содержимое с помощью JSON, но я не уверен, как поступить с отображением всех строк: Codepen: http://codepen.io/aljohnstone/pen/adobow

$.getJSON('http://cors.io/?u=https://spreadsheets.google.com/feeds/list/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/od6/public/values?alt=json',function(data){ 
//remove http:// for a text 
var url = data.feed.entry[0]['gsx$url']['$t']; 
var shortUrl = url.replace('http://', ''); 
//give id's google sheet values 
$('#bandb').text(data.feed.entry[0]['gsx$name']['$t']) 
$('#description').text(data.feed.entry[0]['gsx$description']['$t']) 
$('#image').attr("src", (data.feed.entry[0]['gsx$image']['$t'])); 
$('#link').text(shortUrl).attr("href", (data.feed.entry[0]['gsx$url']['$t'])); 
}); 

Answer 1

Использование JQuery foreach

$.getJSON('http://cors.io/?u=https://spreadsheets.google.com/feeds/list/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/od6/public/values?alt=json',function(data){ 
    $.each(data.feed.entry,function(i,v){ 

var url = v.gsx$url.$t; 
    var shortUrl = url.replace('http://', ''); 
    var data = $('<div class="listing">').append('<img src="'+v.gsx$image.$t+'" id="image"/><h4 id="bandb">'+v.gsx$name.$t+'</h4><p id="description">'+v.gsx$description.$t+'</p><a href="'+v.gsx$url.$t+'" id="link">'+shortUrl+'</a>'); 
     $('body').append(data); 
    }); 

}); 

http://codepen.io/anon/pen/mVbypE?editors=001

Answer 2

Я бы рекомендовал использовать фронтальную шаблонизацию рамки, такие как mustache.js. В этой области есть много вариантов. То, что вы обычно делаете в структуре шаблонов, - это шаблон HTML, который использует заполнители для ваших данных. Затем в вашем javascript вы передадите объект данных в шаблоны. Вот как это может выглядеть в усы:

Шаблон

<script id="listing-template" type="text/html"> 
    <div class="listing"> 
     <img class="image" src="{{gsx$image.$t}}"/> 
     <h4 class="bandb">{{gsx$name.$t}}</h4> 
     <a class="link" href="{{gsx$url.$t}}">{{gsx$url.$t}}</a> 
     <p class="description">{{gsx$description.$t}}</p> 
    </div> 
</script>  

JavaScript

<script> 

    $.getJSON('http://cors.io/?u=https://spreadsheets.google.com/feeds/list/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/od6/public/values?alt=json',function(data){ 
     // loop through the entry object and append new templated elements to body element 
     $("body").mustache("listing-template",data.feed.entry); 

    }); 

</script> 

я ушел из деталей инициализации для рамок усов, но это общая идея.