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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3453閲覧

表table出力を期待通りに出力したい

wkbiz

総合スコア150

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/07/26 08:13

編集2018/07/27 06:30

よろしくお願いいたします。

ソース

<!-- json --> var data = {"release": [ { "col01": 100, "col02": 200, "col03": 300 }, { "col01": 120, "col02": 220, "col03": 320 } } <!-- js --> for(var index in data.release){ $('<tr>').appendTo('table.summary tbody'); $('<td>' + data.release[index].col01 + '</td>').appendTo('table.summary tbody'); $('<td>' + data.release[index].col02 + '</td>').appendTo('table.summary tbody'); $('<td>' + data.release[index].col03 + '</td>').appendTo('table.summary tbody'); } <!-- html --> <table class="summary"> <thead style="display: inline-block;"><tr><th></th></tr></thead> <tbody><tr><td></td></tr></tbody> </table>

現在の出力

<table> <tbody> <tr></tr> <td>100</td><td>200</td><td>300</td> <tr></tr> <td>120</td><td>220</td><td>320</td> </tbody> </table>

上記を
期待する出力 で出したいのです。

<table> <tbody> <tr> <td>100</td><td>200</td><td>300</td> </tr> <tr> <td>120</td><td>220</td><td>320</td> </tr> </tbody> </table>

tbody->tr->tdの順にしようとしても、いろいろ試したり調べたりしたのですが期待通りになりません。
根本的に記述方法が間違っているからだと思うのですが、御指南いただけないでしょうか。

よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

ダメなのはここですね。
td要素はtr要素の中に挿し込むものですよね、なんでtable.summary tbodyに挿し込んでるんですか?
とはいえ、最大3つになるtr要素をピンポイントで見つけて挿し込むのは至難の技ですね。

JavaScript

1for(var index in data.release){ 2 $('<tr>').appendTo('table.summary tbody'); 3 $('<td>' + data.release[index].col01 + '</td>').appendTo('table.summary tbody'); 4 $('<td>' + data.release[index].col02 + '</td>').appendTo('table.summary tbody'); 5 $('<td>' + data.release[index].col03 + '</td>').appendTo('table.summary tbody'); 6}

【追記部分】 もしこのまま進めていくとしたら…

今作った<td>'table.summary tbody'に挿し込んだらダメ、
ならば上記にある<tr>を挿し込まずに変数に保存しておいて、完成させてから行うという手法が考えられます。

JavaScript

1// こんな感じ? 2for(var index in data.release){ 3 var $tr = $('<tr>'); 4 $('<td>' + data.release[index].col01 + '</td>').appendTo($tr); 5 $('<td>' + data.release[index].col02 + '</td>').appendTo($tr); 6 $('<td>' + data.release[index].col03 + '</td>').appendTo($tr); 7 $tr.appendTo('table.summary tbody'); 8}

というわけで、もし私であれば別の方法を採用します。

例えばJavaScriptにはメソッドチェーンという手法を使って値を変換していく機能があります。
ドットで繋げつつmapjoinを使って豪華なHTMLを生成して一気に挿し込んでやれば楽に実現できます。

map等のメソッドはコールバック関数を毎回よこせと言ってくるので、
使い捨ての関数はアロー関数の書き方を覚えてさらっと書けるようにしておくと捗ります。

文字列を作る時はテンプレート文字列を利用すると便利です。
区切り文字はバックスラッシュ(日本語配列のキーボードの場合Shift+@)です。

JavaScript

1var data = {"release": [ 2 { "col01": 100, "col02": 200, "col03": 300 }, 3 { "col01": 120, "col02": 220, "col03": 320 } 4]}; 5var html = data 6 .release 7 .map(it => ['col01', 'col02', 'col03'] 8 .map(key => `<td>${it[key]}</td>`) 9 .join('') 10 ) 11 .map(it => `<tr>${it}</tr>`) 12 .join(''); 13console.log(html); // "<tr><td>100</td><td>200</td><td>300</td></tr><tr><td>120</td><td>220</td><td>320</td></tr>" 14$(html).appendTo('table.summary tbody');

すいません。ご回答頂いているところ恐縮ですが、

取込みJSONデータを指定(5レコードあれば3~5まで)して取り込むようなことはできるのでしょうか?

これは末尾3レコードのみ取得したいということでしょうか?
条件に適合するものを抽出する場合、filterメソッドが用意されています。

.filterメソッドのコールバック関数の第二引数には配列のindexが入ります。
配列の.lengthプロパティには5件ならば5という数字が入っているので比較すれば実現できそうです。

JavaScript

1var data = {"release": [ 2 { "col01": 100, "col02": 200, "col03": 300 }, 3 { "col01": 110, "col02": 210, "col03": 310 }, 4 { "col01": 120, "col02": 220, "col03": 320 }, 5 { "col01": 130, "col02": 230, "col03": 330 }, 6 { "col01": 140, "col02": 240, "col03": 340 } 7]}; 8var tmp = data 9 .release 10 .filter((_, i) => i >= data.release.length - 3) 11console.log(tmp); 12// [{...}, {...}, {...}] 13// 0: {col01: 120, col02: 220, col03: 320} 14// 1: {col01: 130, col02: 230, col03: 330} 15// 2: {col01: 140, col02: 240, col03: 340} 16 17// 3件より少なかったらどうなるの? 18var data2 = {"release": [ 19 { "col01": 100, "col02": 200, "col03": 300 }, 20 { "col01": 110, "col02": 210, "col03": 310 } 21]}; 22var tmp2 = data2 23 .release 24 .filter((_, i) => i >= data2.release.length - 3); 25console.log(tmp); 26// [{...}, {...}] 27// 0: {col01: 100, col02: 200, col03: 300} 28// 1: {col01: 110, col02: 210, col03: 310}

投稿2018/07/26 10:43

編集2018/07/27 08:21
miyabi-sun

総合スコア21158

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

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

wkbiz

2018/07/26 12:53

ご教授いただきありがとうございました。
wkbiz

2018/07/27 07:46

すいません。ご回答頂いているところ恐縮ですが、 取込みJSONデータを指定(5レコードあれば3~5まで)して取り込むようなことはできるのでしょうか? よろしくお願いいたします。
miyabi-sun

2018/07/27 08:06

回答に追記する形でレスしました。
wkbiz

2018/07/27 08:10 編集

お忙しいところ早速ご回答いただきありがとうございました。 評価の追加をさせていただきたいくらいです。
guest

0

ざっくりこんな感じ

javascript

1<script> 2$(function(){ 3 var data = { 4 "release": [ 5 { "col01": 100, "col02": 200, "col03": 300 }, 6 { "col01": 120, "col01": 220, "col03": 320 }, 7 ], 8 }; 9 data.release.forEach(function(x){ 10 $('<tr>').append( 11 ["col01","col02","col03"].map(function(y){ 12 return $('<td>').text(x[y]); 13 }) 14 ).appendTo('table.summary tbody'); 15 }); 16}); 17</script> 18<table class="summary"> 19<tbody> 20</tbody> 21</table> 22

data.releaseの2番めのデータが1番めと競合している(ともに"col01")のはわざとですか?

投稿2018/07/26 08:40

yambejp

総合スコア114572

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

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

wkbiz

2018/07/26 12:53

ご教授いただきありがとうございました。
wkbiz

2018/07/27 06:30

>data.releaseの2番めのデータが1番めと競合している 訂正しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問