来自谷歌电子表格的JSON数据

Question

我看了这个示例，其中有三个带有json数据的下拉菜单。我有一个示例谷歌电子表格在这里。现在是否可能将此电子表格数据呈现为给出的fiddle示例中的json格式？我知道我们可以将电子表格转换为json，如下：

 var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AozvCNI02VmpdDkwR3RETmczbTI4ZFJhTXJkZHlUbEE#gid=0');
 query.send(handleQueryResponse);
 }
 function handleQueryResponse(response) {
    data = response.getDataTable();
    }

但是使用这个下拉菜单不起作用。

- mpsbhat

Answer 1

我不确定你的做法是否正确，但可以用另一种方式实现。请参阅此处的代码，使用你提供的数据示例。

基本上，您可以通过以下HTML脚本标签调用电子表格中的JSON数据。

<script src="http://spreadsheets.google.com/feeds/list/0An1-zUNFyMVLdEFEdVV3N2h1SUJOdTdKQXBfbGpNTGc/1/public/values?alt=json-in-script&amp;callback=importGSS"></script>

请注意，我正在链接你的电子表格副本，因为它需要发布才能使用。

然后，您可以使用以下脚本处理数据。

function importGSS(json){
    for(var i = 0; i < json.feed.entry.length; i++){
        var entry = json.feed.entry[i];
        $('#departments').append('<option>' + entry.gsx$subdivision.$t + '</option>');
        $('#subject').append('<option>' + entry.gsx$section.$t + '</option>');
        $('#services').append('<option>' + entry.gsx$station.$t + '</option>');
    }
}

你可以根据自己的需要进行适当调整。

- dev

---

我需要类似的东西。但是我还想在下拉菜单中进行互联和唯一值。 - mpsbhat

很抱歉，如果没有更详细的描述，我无法理解你想要什么。我的代码很简单，希望它可以帮助你实现目标。 - dev

请查看此示例，在其中选择第一个下拉菜单中的IT时，它会在第二个下拉菜单中显示其子级。同样地，当选择会计时，它会显示其子级等等。但是在该示例中，数据是硬编码的JSON格式。那么，是否可能从Google电子表格数据创建相同类型的下拉菜单呢？ - mpsbhat

我明白你的意思，但我没有时间编写你需要的确切代码。为了得到你想要的结果，我会这样做：只有在第一个下拉选项不存在时才将其附加。然后，使用与第一个下拉框相关联的类别附加第二个下拉选项，以及使用与第二个下拉框选项相关联的类别附加第三个选项。然后将第二个和第三个下拉选项中的所有选项设置为隐藏。然后当选择一个选项时，那些具有该选项类别的选项将被设置为可见。希望能有所帮助。 - dev