Question

我想使用此Google表格中的数据显示HTML酒店列表： 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>

我遗漏了胡子框架的初始化细节，但这是一般的想法。

如何使用JSON以HTML格式显示Google表格

2 个答案: