如何从SQL.JS返回的JSON数据创建HTML表？

I am trying to recreate the awesome online sqlite viewer, maintained by Lovasoa, in electron and am having trouble displaying the returned JSON data as an HTML table. The section of code I am working on looks like this:

我试图在电子中重新创建由Lovasoa维护的令人敬畏的在线sqlite查看器，并且无法将返回的JSON数据显示为HTML表格。我正在处理的代码部分如下所示：

    $(document).ready(function(){
    //displays object as string                  
    var res = db.exec("SELECT * FROM lorem"); 
    document.getElementById('dbrows').innerHTML = JSON.stringify(res);

        //convert to table
        var tbl_body = "";
        var odd_even = false;
        $.each(res, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
        tbl_row += "<td>"+v+"</td>";
     })
     tbl_body += "<tr class=\""+( odd_even ? "odd" :  "even")+"\">"+tbl_row+"</tr>";
    odd_even = !odd_even;               
  })
$("#table").html(tbl_body);
 });

My table is coming out all screwed up. Let me break down what I am trying to do.

我的桌子全都搞砸了。让我打破我想要做的事情。

    var res = db.exec("SELECT * FROM lorem"); 
    document.getElementById('dbrows').innerHTML = JSON.stringify(res);

This part of the code returns a string exactly as one would expect from the sql.js documentation. Here is the relevant code from the sql.js README on github.

这部分代码返回一个完全符合sql.js文档的字符串。这是github上sql.js README的相关代码。

    var res = db.exec("SELECT * FROM hello");
/*
[
    {columns:['a','b'], values:[[0,'hello'],[1,'world']]}
]
*/

My problem is trying to get that returned value into a nice html table. I can see in the javascript for the online slq.js program the section of code that appears to do this:

我的问题是试图将返回的值转换为一个漂亮的html表。我可以在javascript中看到在线slq.js程序看起来这样做的代码部分：

// Create an HTML table
var tableCreate = function () {
  function valconcat(vals, tagName) {
    if (vals.length === 0) return '';
    var open = '<'+tagName+'>', close='</'+tagName+'>';
    return open + vals.join(close + open) + close;
  }
  return function (columns, values){
    var tbl  = document.createElement('table');
    var html = '<thead>' + valconcat(columns, 'th') + '</thead>';
    var rows = values.map(function(v){ return valconcat(v, 'td'); });
    html += '<tbody>' + valconcat(rows, 'tr') + '</tbody>';
      tbl.innerHTML = html;
    return tbl;
  }
}();

But I don’t understand how to link this up with anything returned by the db.exec function in the documentation. I am very new to javascript so I imagine this might be an obvious problem to someone with more experience. I have also been attempting to use the code in Cleric’s example (https://*.com/a/10301494). However, my modified code returns everything on one line and does not put the data in neat individual rows. Here is my modified code:

但我不明白如何将其与文档中db.exec函数返回的任何内容相关联。我对javascript很新，所以我想这对于有更多经验的人来说可能是一个明显的问题。我也一直试图在Cleric的例子中使用该代码（https://*.com/a/10301494）。但是，我修改后的代码会在一行中返回所有内容，而不会将数据放在整齐的单独行中。这是我修改过的代码：

  $(document).ready(function(){
        //displays object as string                  
        var res = db.exec("SELECT * FROM lorem"); 
        document.getElementById('dbrows').innerHTML = JSON.stringify(res);  //just to prove the db.exec works. 

       //convert to table
        var tbl_body = "";
        var odd_even = false;
        $.each(res, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
        tbl_row += "<td>"+v+"</td>";
    })
    tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
    odd_even = !odd_even;               
})
$("#table").html(tbl_body);
   });

The repository with my project (forked from codewise's example) can be found here. Thanks for the help.

可以在此处找到包含我的项目的存储库（从codewise的示例中分叉）。谢谢您的帮助。

1 个解决方案

#1

Instead of doing all this manual work, you can simply use one of the existing jQuery plugins like this:

您可以简单地使用现有的jQuery插件之一，而不是完成所有这些手动工作：

You can bind it directly to your ajax call source as well.

您也可以将它直接绑定到您的ajax调用源。

Step 1 - include javascript and css:

第1步 - 包括javascript和css：

<script src="jquery.min.js"></script>
<script src="simple.datagrid.js"></script>
<link rel="stylesheet" href="simple.datagrid.css">

Step 2 - html:

第2步 - HTML：

<table id="demo-table" data-url="/fruit_data/">
  <thead>
    <tr>
      <th>Name</th>
      <th>Latin name</th>
    </tr>
  </thead>
</table>

Step 3 - javascript:

第3步 - javascript：

$('#demo-table').simple_datagrid();

$（ '＃演示表'）simple_datagrid（）。

Or:

要么：

var res = db.exec("SELECT * FROM hello");
var data = JSON.stringify(res);

And then:

接着：

$('#demo-table').simple_datagrid(
{
   data: data
});

#1