从sqlite数据库文件中以表格格式显示json结果

时间:2017-06-30 10:47:12

标签: javascript json html5 sqlite

我想从mysqlite数据库文件中显示数据。这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script src="sql.js"></script>

</head>
<body>
<h1>My App</h1>
<div id="res" style="width: 100%">
</div>
<script>
    function loadBinaryFile(path,success) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", path, true); 
        xhr.responseType = "arraybuffer";
        xhr.onload = function() {
            var data = new Uint8Array(xhr.response);
            var arr = new Array();
            for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
            success(arr.join(""));
        };
        xhr.send();
    };


    loadBinaryFile('MyData.db', function(data){
        var db = new SQL.Database(data);

        var res = db.exec("SELECT * FROM MyRecord");
      // document.getElementById("demo").textContent = JSON.stringify(res);
        var data=JSON.stringify(res);
      document.getElementById("res").textContent=data;


});

</script>
</body>
</html>

我以这种格式获得输出:

[{"columns":["id","name","gender","fname"],"values":[[1,"divya","female","rao"],[3,"nithin","male","kumar"]]}]

现在,我如何以表格格式显示这个json数据。任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

var data = [{"columns":["id","name","gender","fname"],"values":[[1,"divya","female","rao"],[3,"nithin","male","kumar"]]}];

data = data[0];


var html = '<table><tr>';

data.columns.forEach(d => {
	html += '<th>' + d + '</th>'
});

html += '<tr>';

data.values.forEach( row => {
	html += '<tr>';
	row.forEach( item => {
  	html += '<td>'+ item +'</td>'
  });
  html += '</tr>';
});

document.body.innerHTML = html;