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

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

ただいまの
回答率

90.33%

  • JavaScript

    17608questions

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

  • jQuery

    7128questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 371

kpluplus

score 49

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

ソース

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

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

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');
}

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

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

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

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

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

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

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

var data = {"release": [
  { "col01": 100, "col02": 200, "col03": 300 },
  { "col01": 120, "col02": 220, "col03": 320 }
]};
var html = data
  .release
  .map(it => ['col01', 'col02', 'col03']
    .map(key => `<td>${it[key]}</td>`)
    .join('')
  )
  .map(it => `<tr>${it}</tr>`)
  .join('');
console.log(html); // "<tr><td>100</td><td>200</td><td>300</td></tr><tr><td>120</td><td>220</td><td>320</td></tr>"
$(html).appendTo('table.summary tbody');

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

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

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

var data = {"release": [
  { "col01": 100, "col02": 200, "col03": 300 },
  { "col01": 110, "col02": 210, "col03": 310 },
  { "col01": 120, "col02": 220, "col03": 320 },
  { "col01": 130, "col02": 230, "col03": 330 },
  { "col01": 140, "col02": 240, "col03": 340 }
]};
var tmp = data
  .release
  .filter((_, i) => i >= data.release.length - 3)
console.log(tmp);
// [{...}, {...}, {...}]
//   0: {col01: 120, col02: 220, col03: 320}
//   1: {col01: 130, col02: 230, col03: 330}
//   2: {col01: 140, col02: 240, col03: 340}

// 3件より少なかったらどうなるの?
var data2 = {"release": [
  { "col01": 100, "col02": 200, "col03": 300 },
  { "col01": 110, "col02": 210, "col03": 310 }
]};
var tmp2 = data2
  .release
  .filter((_, i) => i >= data2.release.length - 3);
console.log(tmp);
// [{...}, {...}]
//   0: {col01: 100, col02: 200, col03: 300}
//   1: {col01: 110, col02: 210, col03: 310}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/26 21:53

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

    キャンセル

  • 2018/07/27 16:46

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

    キャンセル

  • 2018/07/27 17:06

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

    キャンセル

  • 2018/07/27 17:08 編集

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

    キャンセル

+2

ざっくりこんな感じ

<script>
$(function(){
  var data = {
    "release": [
      { "col01": 100, "col02": 200, "col03": 300 },
      { "col01": 120, "col01": 220, "col03": 320 },
      ],
  };
  data.release.forEach(function(x){
    $('<tr>').append(
      ["col01","col02","col03"].map(function(y){
        return $('<td>').text(x[y]);
      })
      ).appendTo('table.summary tbody');
  });
});
</script>
<table class="summary">
<tbody>
</tbody>
</table>


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/26 21:53

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

    キャンセル

  • 2018/07/27 15:30

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17608questions

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

  • jQuery

    7128questions

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