前提・実現したいこと
JavaScriptにてJSONのデータを受取ってテーブルを生成したいと考えております。
テーブルの形式としては少しイレギュラーで、見出しを1行目に置くのではなく1列目に
見出し項目を置きたいと考えております。
形式としては以下の通りとなります。(いわゆる比較表みたいな感じです。)
1個目 | 2個目 | 3個目 | |
---|---|---|---|
見出1 | 値1-1 | 値2-1 | 値3-1 |
見出2 | 値1-2 | 値2-2 | 値3-2 |
見出3 | 値1-3 | 値2-3 | 値3-3 |
見出4 | 値1-4 | 値2-4 | 値3-4 |
HTMLのソースとしては以下の様なものを吐き出せないかと考えております。
HTML
1<table border="1"> 2 <tr> 3 <th></th><th>1個目</th><th>2個目</th><th>3個目</th> 4 </tr> 5 <tr> 6 <td>見出1</td><td>値1-1</td><td>値2-1</td><td>値3-1</td> 7 </tr> 8 <tr> 9 <td>見出2</td><td>値2-1</td><td>値2-2</td><td>値3-2</td> 10 </tr> 11 <tr> 12 <td>見出3</td><td>値1-3</td><td>値2-3</td><td>値3-3</td> 13 </tr> 14 <tr> 15 <td>見出4</td><td>値1-4</td><td>値2-4</td><td>値3-4</td> 16 </tr> 17</table>
JSONを取ってくるところは何とかなりそうなのですが、1行目の出力以降をどう処理すればいいか分かりません。
JQueryとか使う方法もあるとは思うのですが、ライブラリの依存などを避けたいのでなるべくピュアJavaScriptで実現できればと考えております。
すいませんが、解決方法をご教示いただけますでしょうか。
該当のソースコード
JavaScript
1function sample(){ 2 var json =[ 3 {"midashi1":"val11","midashi2":"val12","midashi3":"val13","midashi4":"val14"}, 4 {"midashi1":"val21","midashi2":"val32","midashi3":"val23","midashi4":"val24"}, 5 {"midashi1":"val31","midashi2":"val32","midashi3":"val33","midashi4":"val24"} 6 ]; 7 8 var msg = JSON.stringify(json); 9 var t = JSON.parse(msg); 10 var keys = Object.keys(t); 11 var rs = '<table border="1">' 12 for(var i=0, l=keys.length; i<l; i++){ 13 //ここをどう記述すればいいかわからない 14 console.log(t[keys[i]].midashi1); 15 console.log(t[keys[i]].midashi2); 16 console.log(t[keys[i]].midashi3); 17 console.log(t[keys[i]].midashi4); 18 } 19 rs +='</table>'; 20 document.getElementById('darea').innerHTML = rs; 21}
回答3件
あなたの回答
tips
プレビュー