Question

如何将json数据转换为页面中的html表元素？

我的数据每次来自此网址，我无法在页面或脚本中定义静态json数据！

我希望在页面加载时从页面中创建简单的表格并从URL中读取数据...

Answer 1

这是一个满足您需求的简单解决方案

var $tbody = $('#table').find('tbody');
var $thead = $('#table').find('thead');

$thead.append($('<tr />').append($('<th />').text('id')).append($('<th />').text('Name')).append($('<th />').text('Rate')).append($('<th />').text('Date')).append($('<th />').text('Time')))

$.each(data.query.results.rate, function (i, el) {
    $tbody.append($('<tr />').append($('<td />').text(el.id)).append($('<td />').text(el.Name)).append($('<td />').text(el.Rate)).append($('<td />').text(el.Date)).append($('<td />').text(el.Time)))
})

数据是您的JSON

https://jsfiddle.net/6rcmw7cm/2/

Answer 2

尝试这种Ajax方法：

var url="https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDEUR%22%2C%20%22USDJPY%22%2C%20%22USDBGN%22%2C%20%22USDCZK%22%2C%20%22USDDKK%22%2C%20%22USDGBP%22%2C%20%22USDHUF%22%2C%20%22USDLTL%22%2C%20%22USDLVL%22%2C%20%22USDPLN%22%2C%20%22USDRON%22%2C%20%22USDSEK%22%2C%20%22USDCHF%22%2C%20%22USDNOK%22%2C%20%22USDHRK%22%2C%20%22USDRUB%22%2C%20%22USDTRY%22%2C%20%22USDAUD%22%2C%20%22USDBRL%22%2C%20%22USDCAD%22%2C%20%22USDCNY%22%2C%20%22USDHKD%22%2C%20%22USDIDR%22%2C%20%22USDILS%22%2C%20%22USDINR%22%2C%20%22USDKRW%22%2C%20%22USDMXN%22%2C%20%22USDMYR%22%2C%20%22USDNZD%22%2C%20%22USDPHP%22%2C%20%22USDSGD%22%2C%20%22USDTHB%22%2C%20%22USDZAR%22%2C%20%22USDISK%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=";


var $tbody = $('#table').find('tbody');
var $thead = $('#table').find('thead');
$.ajax({
url: url,
}).done(function(data) {
    var ObjectKeys=Object.keys(data.query.results.rate[0]);
    var row="<tr>";
    $.each(ObjectKeys, function (i, key) {
        row+="<th>"+key+"</th>";
    });
    row+="</tr>";
 $thead.append(row);

$.each(data.query.results.rate, function (i, el) {
    $tbody.append($('<tr />').append($('<td />').text(el.id)).append($('<td />').text(el.Name)).append($('<td />').text(el.Rate)).append($('<td />').text(el.Date)).append($('<td />').text(el.Time)).append($('<td />').text(el.Ask)).append($('<td />').text(el.Bid)));
});

})

Working Fiddle Here

Answer 3

如果您不想使用外部JS库，那么您可以简单地遍历数组并构建表格。
以下是根据您的需求构建表格的示例。

首先，您需要创建一个表DOM元素：

var table = $("<table/>"); // create a table HTML DOM element

让我们开始用标题填充表格：

var headerTr = $("<tr/>"); // let's create a header row

// header is build on keys of response objects. you can use your own
for (var headerKey in obj.query.results.rate[0])
{
    $("<td/>").text(headerKey).appendTo(headerTr); // append a cell to the header row
}

table.append(headerTr); // apppend the header row to a table

现在，是时候填写数据行了：

for (var i = 0; i < obj.query.results.rate.length; i++) // iterate through items
{
    var item = obj.query.results.rate[i];

    var tr = $("<tr/>"); // create a row
    for (var key in item)
    {
        $("<td/>").text(item[key]).appendTo(tr); // append cells to a row
    }

    table.append(tr); // append row to a table
}

我们已经完成了桌子！现在，我们只需要将它附加到我们的文档正文中：

$("body").append(table);

这是working JSFiddle demo。

我希望使用jQuery对你来说没问题。如果不是，那么您可以轻松将此代码转换为vanilla JS。

我如何将json字符串转换为html表？

3 个答案: