SQL.JSから返されたJSONデータからHTMLテーブルを作成するにはどうすればよいですか？

Question

Lovasoaが管理している素晴らしいオンラインsqlite viewerを電子で再作成しようとしています。返された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); 
}); 

私のテーブルはすべて壊れています。私がやろうとしていることを打ち破ろう。

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

このコード部分は、sql.jsのドキュメントのとおり正確に文字列を返します。ここにgithubのsql.js READMEの関連コードがあります。

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

私の問題は、その戻り値を素敵なhtmlテーブルに入れることです。私はオンラインslq.jsためにJavaScriptで見ることができますこれを行うには表示されたコードのセクションプログラム：

// 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; 
    } 
}(); 

をしかし、私はdb.exec関数によって返されたもので、これをアップリンクする方法を理解していませんドキュメントに記載されています。私は非常にjavascriptに新しいので、これはより多くの経験を持つ誰かに明らかな問題かもしれないと想像しています。 私はまた、Clericの例（https://stackoverflow.com/a/10301494）でコードを使用しようとしています。しかし、私の変更されたコードはすべてを1行に返し、データをすっきりした個々の行に入れません。

$(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); 
    }); 

（codewiseの例からフォーク）私のプロジェクトでリポジトリがhereを見つけることができます：ここに私の修正コードがあります。助けてくれてありがとう。

Answer 1

代わりに、すべてのこのマニュアルの仕事をして、あなたは、単にthisのような既存のjQueryのプラグインのいずれかを使用できます。

あなたは同様にあなたのAJAX呼び出し元に直接バインドすることができます。

ステップ1 - 含まjavascriptとcss：

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

ステップ2 - HTML：

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

ステップ3 - のjavascript：

$（ '＃デモテーブル '）。si mple_datagrid（）;

または：

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

そして：

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