2017-06-30 10 views
1

私はmysqliteデータベースfile.Thisからの表示データは、私のコードであるとします表示JSON結果のSQLiteデータベースファイルから

<!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

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 => { 
 
\t html += '<th>' + d + '</th>' 
 
}); 
 

 
html += '<tr>'; 
 

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

 
document.body.innerHTML = html;

+0

私は「未定義のプロパティを読み取ることができません 『のforEach』」のようなエラーが発生しましたし、また私がするvarデシベル=新しいSQL.Database(データ)を使用しているこのコードを追加します。私のコードで。 – Amshu

+0

私は変数名としてデータを使用しました。 jsonDataに名前を変更することができます。上記のコードは、上記で指定したjsonフォーマットをhtmlテーブル構文に変換します。 – Gunner

+0

申し訳ありません。同じ変数名も使用しています。ievar data = JSON.stringify(res);そのエラーが発生しています。指定したとおりにjsonデータをハードコードすると、出力が得られます。代わりにJSON.stringify(res)を使用すると、エラーが発生する – Amshu