JSONデータでtableを作成して追加していきたい

Question

JSONデータを取得してvar htmlにJSONデータをtableにして入れているのですが、後からvar htmlに <td>サンプル</td> を追加したかった場合ってできますか？

例えば if(count == 2) だったら、今のテーブルを大きくして追加していきたいのです。
分かる方、教えて頂きたいです。

$.getJSON("data.json", function(data) {
  for (var i in data[0]) {
    if (/sample/.test(i)) {
      var html = '<table><tr><td>' + "title" +
        '</td><td>' + "title" +
        '</td></tr><tr><td class="design">' + "title" +
        '<br>' + data[0][i].value.src.info +
        '<br>' + data[0][i].value.src.info +
        '</td><td>' + data[0][i].value.src.info +
        '<br>' + data[0][i].value.src.info +
        '</td></tr><tr><td class="design">' + "title" +
        '<br>' + data[0][i].value.src.info +
        '<br>' + data[0][i].value.src.info +
        '</td><td>' + data[0][i].value.src.info +
        '<br>' + data[0][i].value.src.info +
        '</td></tr></table>';
    }
  }
  document.write(html);
});

 [
  {
    "name": "ama",
    "user": {
      "file": "local"
    },
    "milk": {
      "number": "13101"
    },
    "sample01": {
      "value": {
        "src": {
          "info": 120
        },
        "leaf": {
          "line": 300
        },
        "id": {
          "use": 1234
        }
      }
    },
    "sample05": {
      "value": {
        "src": {
          "info": 1222
        },
        "leaf": {
          "line": 120
        },
        "id": {
          "use": 12343
        }
      }
    },
    "sample12": {
      "value": {
        "src": {
          "info": 1222
        },
        "leaf": {
          "line": 120
        },
        "id": {
          "use": 1234
        }
      }
    },
    "sample23": {
      "value": {
        "src": {
          "info": 1222
        },
        "leaf": {
          "line": 120
        },
        "id": {
          "use": 1343
        }
      }
    }
  }
]

「例えば if(count == 2) だったら」の count は何ですか？　質問に書かれているプログラムにも、JSONデータにも、countという項目が無いのですが。 — Fumu 7, 9月16日 23:21
条件は何でもいいんですが、条件をクリアしたら、<td>サンプル</td>を追加していく感じでtableも大きくしたいのですが、、、、 — SA__091, 9月17日 0:50
「<td>サンプル</td>を追加していく」だけでは、どこに入るのかが判らないですよね。JSONデータを修正してテーブルの項目を追加し、それからHTMLの文字列（質問のコードで変数 html に入れられているようなもの）を生成するのが素直なように思います。 — Fumu 7, 9月17日 4:33

kako-jun · Accepted Answer · 2020-09-17 02:15:00Z

このように、「JSONを元にHTMLを生成して表示する」という要件の場合、
1度表示したHTMLを更新したい時に、「その表示済みのHTMLを元にして、さらに加工する」
というアプローチはあまり選ばれません。

data.jsonを取得した直後は、JavaScriptのオブジェクト型になっています。
しかし、サンプルコードでは、そのせっかくのオブジェクト型を変数に保存せず、
HTMLに加工した後の文字列だけを変数に保存しています。

そのため、後からレコードを追加したい時に、
「HTML文字列に差分の文字列を追加する」というアプローチしか選べなくなり、
問題が複雑になっています。

簡単に実現するならば、

for (var i in data[0]) {
    if (/sample/.test(i)) {

をくぐり抜けたものだけを、いったん配列変数に保存することです。
そして、「配列変数を引数に与えると、それを元にHTMLを生成して返す」というメソッドを作ります。

そのような設計にすれば、今回したいことも
「配列変数に要素を追加して、HTMLに変換するメソッドを再び呼び、画面に反映する」
というシンプルな実装になります。

もし、いまの設計のまま実現することが必須ならば、
jQueryをお使いのようなので、

var elem = $($.parseHTML(html));

のようにすれば、elem に <td> を追加することは容易です。

ただし、現在は html がローカル変数になっており、スコープを出ると消えてしまうので
これもできないでしょう。

html をもっと浅い階層で宣言しておくか
jQueryでその都度、セレクタで <table> 取得するか

どちかをすれば可能です。

jQueryを使っていますが、参考サイトを元にしたもので、そもそもjavascript自体分かっていないです。。。leafletでポップアップとして表示したかったため、変数にHTMLを入れるというものを自分で書いただけなので設計を変えたくないというわけではないです。やり方がいまいち掴めてなくて、もう少し考えた方が良さそうですね。ご丁寧にありがとうございます。 — SA__091, 9月17日 7:13
解決済みなのでしたら、チェックをお願いします。 — kako-jun, 15時間前

JSONデータでtableを作成して追加していきたい

1 件の回答 1

回答

求めていた回答ではありませんか？ javascript jquery json のタグが付いた他の質問を参照するか、自分で質問をする。

JSONデータでtableを作成して追加していきたい

1 件の回答 1

回答

登録またはログイン

ゲストとして投稿

求めていた回答ではありませんか？ javascript jquery json のタグが付いた他の質問を参照するか、自分で質問をする。

関連する質問