ダメなのはここですね。
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にはメソッドチェーンという手法を使って値を変換していく機能があります。
ドットで繋げつつmapやjoinを使って豪華な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 12:53
2018/07/27 07:46
2018/07/27 08:06
2018/07/27 08:10 編集