質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

3857閲覧

JSONで取得した値を比較表形式で出力したい。

Otazoman

総合スコア44

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/01/22 06:02

前提・実現したいこと

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/22 06:10 編集

そもそもですが、jQuery自体が+ブラウザ依存+を解消するために作られたライブラリなのでそのあたりは間違えないよう…
miyabi-sun

2019/01/22 06:36

ライブラリ依存とブラウザ依存は視点が違うので混同してるわけではなさそうですね。 ただまぁIE11対応しているべきサイトでIE11で動かないとかになるとまずいので、 どちらを重視するべきなのかはケースバイケースで、一般的にはブラウザ依存を懸念してjQueryを使うサービスが多いと思います。
miyabi-sun

2019/01/22 06:52 編集

あと、超些細なツッコミですが、JSONというのは「パースしたらJavaScriptの値として解釈可能な文字列」を指すので、 ガチ配列データになってしまっているこれは普通の値で、 JSON.stringifyをかけたmsgになっている方が正当なJSONですね。
Otazoman

2019/01/22 09:32

色々とご指摘ありがとうございます。勉強になります。 mts10806様 JQueryの件、理解不足ですいませんでした。バージョンが色々とあると読込が必要なのでてっきり依存するものかと思っていました。 miyabi-sun様 型に関しての理解が弱くてすいません。JavaScriptのオブジェクトと配列の区別も今一つ綺麗にできていないです。全部、ひとまず配列的なものというような乱暴な理解なので、きちんとそれぞれに区別がある点をもっとしっかり勉強しないといけないですね。[];で囲ってあるのは配列、{}はJavaScrptのオブジェクトという理解です。まだまだ精進せねばです。
miyabi-sun

2019/01/22 09:42

あー、そういう感じのものじゃないです。 例えばCSV(カンマ セパレート バリュー)ってありますよね、カンマ区切りの二次元データ形式です。 こいつはファイルから読み出した時は単なる文字列でしかありません。 「改行文字やカンマという特殊文字でこの単なる文字列を切り離した上で二次元配列に加工してロードする手順」をパースと呼びますが、 このパースという一手間を加えて初めて二次元配列として扱えるデータになります。 なのでCSVファイル自体は単なる文字列、専用のルールに沿って書かれているだけのね。 JSONもCSVファイルと同じく単なる文字列です。 文字列にしなきゃ保存出来ないしネットワーク通信で送受信出来ませんからね。 これをJavaScriptで扱えるデータ形式と同じ書き方なんだという思想で解析して、 読み取って初めてJavaScript世界で使える値に変身するのです。
Otazoman

2019/01/22 09:52

おおっ、そうだったんですね。ありがとうございます。
guest

回答3

0

for文のネストで二重ループを作れば解決出来るでしょう。
適宜<tr>で挟まなければならないので、もう少し複雑になりますが、この方向で考えてください。

JavaScript

1// Object.keys(t)にすると、[0, 1, 2]という誰得配列になるので、0番目の要素をサンプルとしてキー情報を抜き出す 2var keys = Object.keys(t[0]); 3for (var i = 0; i < keys.length; i++) { 4 var key = keys[i]; 5 for (var j = 0; j < t.length; j++) { 6 var value = t[j][key]; 7 rs += '<td>' + value + '</td>'; 8 } 9}

ただまぁ、下記のような機能を覚えればスマートに書けるので余裕が出てきたら
配列を操作するメソッドの扱いも勉強してみてください。

ES2015という新しいバージョンの書き方はIE11には非対応ですので、
もし気になるようならBabelのような新しいバージョンのコードをES5相当の書き方にコンパイルするツールや、そこの部分だけES5相当の書き方で代用することを検討してみてください。
下記のコードは可読性重視でフル活用しています。

JavaScript

1var t = [ 2 {"midashi1":"val11","midashi2":"val12","midashi3":"val13","midashi4":"val14"}, 3 {"midashi1":"val21","midashi2":"val32","midashi3":"val23","midashi4":"val24"}, 4 {"midashi1":"val31","midashi2":"val32","midashi3":"val33","midashi4":"val24"} 5]; 6var keys = Object.keys(t[0]); 7 8var rs = `<table> 9 <thead> 10 <tr> 11 <th></th> 12 ${t.map((_, i) => `<th>${i + 1}個目</th>`).join('\n')} 13 </tr> 14 </thead> 15 <tbody> 16 ${keys.map(key => `<tr><td>${key}</td>${ 17 t.map(it => `<td>${it[key]}</td>`).join('') 18 }</tr>`).join('\n')} 19 </tbody> 20</table>`; 21 22console.log(rs); 23// "<table> 24// <thead> 25// <tr> 26// <th></th> 27// <th>1個目</th> 28// <th>2個目</th> 29// <th>3個目</th> 30// </tr> 31// </thead> 32// <tbody> 33// <tr><td>midashi1</td><td>val11</td><td>val21</td><td>val31</td></tr> 34// <tr><td>midashi2</td><td>val12</td><td>val32</td><td>val32</td></tr> 35// <tr><td>midashi3</td><td>val13</td><td>val23</td><td>val33</td></tr> 36// <tr><td>midashi4</td><td>val14</td><td>val24</td><td>val24</td></tr> 37// </tbody> 38// </table>"

投稿2019/01/22 06:28

編集2019/01/22 06:50
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Otazoman

2019/01/22 09:40

ご回答ありがとうございます。今回はmatherさんの方法がシンプルだったのでそちらを採用させていただきました。コードがすごく読みやすくて、ぜひ使いたいと思うのですが、まだまだ理解が追い付いていないので精進しないといけないと感じています。 リンク先の内容もしっかり理解できるように頑張りたいと考えております。 色々とありがとうございました。
guest

0

ベストアンサー

行と列を取り替える方法もあります。

js

1var result = {}; 2json.forEach(x => 3 Object.keys(x).forEach( k => { 4 if(k in result) { 5 result[k].push(x[k]); 6 } else { 7 result[k] = [x[k]]; 8 } 9 }) 10);

これを実行すると次のような値になります。

json

1{ 2 "midashi1": [ 3 "val11", 4 "val21", 5 "val31" 6 ], 7 "midashi2": [ 8 "val12", 9 "val32", 10 "val32" 11 ], 12 "midashi3": [ 13 "val13", 14 "val23", 15 "val33" 16 ], 17 "midashi4": [ 18 "val14", 19 "val24", 20 "val24" 21 ] 22}

HTMLの表現にする箇所はご自身で考えてください。

投稿2019/01/22 07:26

編集2019/01/22 07:28
mather

総合スコア6753

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2019/01/22 07:35

あー、先に値を整形して、後はfor文で回すだけにするってのも上等手段ですよね。 今回のケースは初期のデータが形式が悪いので、 無理に二重ループでこねくり回すよりこっちの方が良さそうですね。
Otazoman

2019/01/22 09:38 編集

ありがとうございます。アドバイスの方法でうまく動きました。(IE11では構文エラーで動かないので、こちらの対策はまた調べます。) HTMLの書き出しに関してはぶさいくな書き方ですが、以下の様にしのぎました。 var rs = '<table id="petinsuranceResult" border="1">'; +'<tr>' +'<th></th><th>1個目</th><th>2個目</th><th>3個目</th><th>4個目</th>' +'</tr>'; +'<tr>' +'<td>項目名</td>' for(var i=0;i<recCount;i++){ rs +='<td>' + result.midashi[i] +'</td>' } rs +='</tr>' rs +='</table>' document.getElementById('darea').innerHTML = rs;
miyabi-sun

2019/01/22 09:45

構文エラーはES2015という新しいJavaScreiptの仕様で追加されたアロー関数ですね。 少々長くなりますが普通の無名関数定義でいけるので、 アロー関数に関して調査しながら無名関数へ書き換えてみてください。
guest

0

javascript

1<!DOCTYPE html> 2<title></title> 3<meta charset="utf-8"> 4 5<style> 6table tr:first-of-type { 7 background: rgba(255,255,0,.5); 8} 9table tr td:first-of-type { 10 background: rgba(0,255,255,.4); 11 12} 13</style> 14 15<body> 16 17<script> 18let json = [ 19 {"midashi1":"val11","midashi2":"val12","midashi3":"val13","midashi4":"val14"}, 20 {"midashi1":"val21","midashi2":"val32","midashi3":"val23","midashi4":"val24"}, 21 {"midashi1":"val31","midashi2":"val32","midashi3":"val33","midashi4":"val24"} 22]; 23 24 25let 26 a = Object.keys (json[0]), 27 b = [['', ...json.map ((_, a) => 1 + a + '個目')], ...a.map (a => [a, ...json.map (b => b[a])])], 28 table = document.body.appendChild (document.createElement ('table')), tr; 29 table.setAttribute ('border', 1); 30 31 b.forEach ( 32 a => (tr = table.insertRow (-1), a).forEach ( 33 a => tr.insertCell (-1).textContent = a)); 34</script> 35 36

投稿2019/01/22 10:09

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問