在 google table 单元格中呈现 JSON 值

Question

我有一个 google table 被填充但是一列需要使用行的 url 值从 API 获取实时数据。

使用这样的函数可以获得值：

$(function(){
    getPrice('www.example.com/specificJSON')
    function getPrice(url) {
        $.getJSON(url, function (data) {
            console.log(parseInt(data.value));
            return data.value
        })
    }
})

可是我怎样才能link这个到table呢？想象一下，每一行都有自己的 url，动态需要获取值并在 table 单元格中打印。有没有办法从 url 作为变量的单元格中调用我的函数？我可以将单元格中的任何内容打印为字符串。

假设字符串可能类似于：

'getPrice('www.example.com/specificJSON2')'

加载后会变成：

24

另一种方法是在 table 完成加载并开始替换单元格信息时循环浏览行，我猜？最好在这里做什么，记住它应该有点快。

理想情况下，我想做与从源 (<img src="www.thebestimage.com">) 获取图像相同的操作，然后是 jsonvalue。

编辑：与许多关于将 JSON 与表一起使用的帖子相反，我不是从 JSON 数据生成 table，而是需要在单个单元格中动态显示 jsondata。检索的信息已经在table中呈现。

Answer 1

我在单元格中使用以下 HTML 解决了这个问题：

'<span class="getValue" data-Id="24">Loading...</span>'

这可以作为字符串预先生成。

然后使用这个事件侦听器我可以加载数据：

google.visualization.events.addListener(table, 'ready', function(){
    $('.getValue').each(function(){
        var self = $(this)
        var id = this.getAttribute('data-Id')
        $.getJSON('www.getjsondatawithid/'+id, function (data) {
            try {
                self.text(data.text.first) //Select the JSON value.
            } catch(err) {
                self.text('Error') //Or set the text to error.
            }
        })
    })
})

这将替换每个单元格的跨度文本。请务必在 google table 绘图选项中启用 HTML：

table.draw(data, {showRowNumber: true, width: '100%', height: '100%', allowHtml: true});

在 google table 单元格中呈现 JSON 值

Rendering a JSON value in a google table cell

html

javascript

google-visualization

getjson