本記事は不要となりましたので記事を削除します。

Question

削除

本記事は不要となりましたので記事を削除します。

Comments

[yambejp]

JSONに行という考え方はないと思いますが？
具体的なJSONデータと、どう見せたいが手書きでいいので
画層などで表示してもらうと回答しやすいと思います

[退会済みユーザー]

コメントありがとうございます。JSONデータを読込み前の初期表示と、読込み後のイメージを手書きで追加しました。また、JSONデータも追加しました。

[yambejp]

やりたいことはテーブルの行削除・追加ですか？
JSONがどう絡んでいるのかわからないし、前回も書いたとおり
具体的なJSONがないので回答しようがありません

[退会済みユーザー]

コメントありがとうございます。現状について追記しました。

[yambejp]

テーブルは最初からあるのですか？リスト選択がAでリスト名a
これに２つのデータを持つJSONを組み込む？
CとDを追加してAは削除するのですか？

最大限想像して回答しておきました
おそらく違うと思うので、どこがどう違うか指摘下さい

[退会済みユーザー]

コメントありがとうございます。下記回答させて頂きます。
テーブルは存在します。
もし、JSONを読み込まない場合、リスト選択A、リスト名aを表示します。
もし、JSONを読み込んだ場合、下記表示を期待しています。
リスト選択　リスト名
C c
D d

ご回答ありがとうございます。試してみます。

[yambejp]

JSONを読み込む/読みないはどういう切り分けなのでしょう？
読み込みに失敗したらという意味ですか？

[退会済みユーザー]

コメントありがとうございます。
本番環境はバックエンドとフロントエンドで通信しますが、
フロント側の開発時はローカル環境のため、JSONデータを読込んで実装しています。
JSONを読み込むということは、フロント側はバック側からデータ取得が完了した状態と考えています。
※JSONを読み込まないとは、読込み失敗ではございません。

[K_3578]

回答の付いている質問の内容を削除するのは禁止されています。元の状態に戻してください。

[Lhankor_Mhy]

退会済みユーザーのIDは、 sun_link さん。
備忘として。

Answer 1

対応する必要性が無くなりました。

Answer 2

//sample.json

[
{"classNum":"C","className":"c"},
{"classNum":"D","className":"d"}
]

//sample.htm

<script>
window.addEventListener('DOMContentLoaded', async()=>{
  let data=[]; 
  data=await fetch("sample.json").then(res=>res.json()); //JSONを呼ばないときはこの行をコメントアウト
  if(data){
  const t=document.querySelector('#t1 tbody');
  const tr0=t.querySelector('tr');
  tr0.remove();
  data.forEach(x=>{
    const tr1=tr0.cloneNode(true);
    t.appendChild(tr1);
    tr1.querySelector('td').textContent=x.classNum;
    tr1.querySelector('td:nth-child(2)').textContent=x.className;
  });
  }
});
</script>
<table id="t1" border>
<thead>
<tr><th>リスト選択</th><th>リスト名</th><th>追加/削除</th></tr>
</thead>
<tbody>
<tr><td>A</td><td>a</td><td>+ -</td></tr>
</tbody>
</table>

Comments

[退会済みユーザー]

ご回答ありがとうございました。申し訳ございません。ご教示頂いた情報を元に色々と試しましたが期待する動作を実現できませんでした。問題の切り分けとしてJSON読込みと、画面表示のどちらが悪いのか知りたいです。【javascript】JQUERYテーブルの初期表示で2行を表示する(JSのローカル変数で画面表示)で依頼させて頂きましたので、お手すきの際にご確認頂けると幸いです。よろしくお願い致します。