一つのJavaScriptを使いまわして、複数のjsonファイルからデータを読み取り、HTMLの複数のidセレクタにテーブルを表示したい。

Question

実現したいこと

• 複数のjsonファイルから複数のテーブルを作成する

例えば、List1.jsonの内容を<div id="List1">に、List2.jsonの内容を<div id="List2">に、というようなことを実現したいです。
jsonファイルは今後も増える予定です。
その際ほぼ同じ内容のJavaScriptをたくさん増やしたくはないので、できれば1つのJavaScriptを使いまわしたいです。

質問

こちらのサイトを参考に一つのファイルから一つのテーブルを作成することはできましたが、どちらも数を増やすと失敗してしまいます。

現在、上記サイトにあるJavaScriptを参考にして作ったスクリプトを使っているのですが、このスクリプトで読み込んでいるjsonファイルと出力先のidセレクタを、どうにかして使いたいjsonファイルに合わせて変えられないかなと考えています。

実現したいことに書いた通り、ほぼ同じ内容のJavaScriptを何個も増やしたくないです。
それでもjsonとidだけ変更して、増やしたいテーブルの数だけJavaScriptを増やさなければならないでしょうか？
何か方法があれば教えていただきたいです。

該当のソースコード

<div class="flex_test-box">
  <div class="flex_test-item">
    <div>
      <!-- ここに表示したい -->
      <div id="List1"></div>
    </div>
  </div>
</div>
<div class="flex_test-box">
  <div class="flex_test-item">
    <div>
      <!-- ここに表示したい -->
      <div id="List2"></div>
    </div>
  </div>
</div>

$(function (){
  $.getJSON('List1.json', function(data)
    {
      var src = data.map(function(i)
      {
        return '<tr class="' + i.class + '">' +
        '<td>' + i.button + '</td>' +
        '<td>' + i.song + '</td>' +
        '</tr>';
      })
      .join('');

    src = '<table>' + src + '</table>';
    $( '#List1' ).append(src);
  });
});

試したこと

• HTMLにdataを書いてJavaScriptから取得して使う方法

<div data-id="table"
     data-file="List1.json"
     data-List="#List1">

として、JavaScriptからファイル名と出力するidセレクタを取得し、代入して使用しました。
一つの時はうまくいきましたが、数を増やすとdata-idが重複してしまうため失敗しました。

• 配列とfor文を使う方法

var List = [
  {
    FileName: 'List1.json',
    Space: '#List1'
  },
  {
    FileName: 'List2.json',
    Space: '#List2'
  }
];

$(function (){
  for(var i = 0; i < List.length; i++)
  {
    $.getJSON(List[i]['FileName'], function(data)
      {
        var src = data.map(function(i)
          {
            return '<tr class="' + i.class + '">' +
            '<td>' + i.button + '</td>' +
            '<td>' + i.song + '</td>' +
            '</tr>';
          })
        .join('');
        
        src = '<table>' + src + '</table>';
        $( '#List' + i ).append(src);
      });
  }
});

配列のi番目を使ってどうにかできないかと考えました。
この方法ではList1.jsonとList2.jsonの内容を全て#List1に表示してしまい失敗します。
その際、データの個数はあっているのですが、1つ目のファイルだけ全て正常に読み取れ、2つ目以降のファイルはデータが全てundefinedになっています。

$( '#List' + i ).append(src);

は本来

$( List[i]['Space'] ).append(src);

としていましたが、表示すらできなくなるので現在の形にしています。

Answer 1

HTMLにdataを書いてJavaScriptから取得して使う方法

については、コードが書いてないので、考えてませんが、

配列とfor文を使う方法

の

この方法ではList1.jsonとList2.jsonの内容を全て#List1に表示してしまい失敗します。

は、getJSONに引数で渡している「テーブルを作る無名関数」は、JSONファイルを取得した後で実行されるわけですが、その前に13行目からのforループは進んでしまい、「テーブルを作る無名関数」が実行される時点でiはすでに2になっています。

解決方法はいろいろありますが、「テーブルを作る処理」がループの中に埋め込まれていて見にくいこともあり、それを関数として独立させるのが簡単でしょう。

var List = [
  {
    FileName: 'List1.json',
    Space: '#List1'
  },
  {
    FileName: 'List2.json',
    Space: '#List2'
  }
];
function make_table(url,id){
    $.getJSON(url, function(data){
        var src = data.map(function(i){
            return '<tr class="' + i.class + '">' +
            '<td>' + i.button + '</td>' +
            '<td>' + i.song + '</td>' +
            '</tr>';
          })
        .join('');

        src = '<table>' + src + '</table>';
        $( id ).append(src);
      });
}

$(function (){
  for(var i = 0; i < List.length; i++)
  {
    make_table(List[i].FileName, List[i].Space);
  }
});

これだと27行目のiの値がどうなっていようが、関数の実行に関係ないので、大丈夫です。

他にも「クロージャー」を使う方法などが考えられます。

Comments

[CTRL-S]

jQuery的に処理するなら
$.each(List, function(index, obj) {
//obj.FileName と obj.Space を使って処理
});
とするのがいいと思います。

[otn]

「質問文のコードはさておき、どのように書くのが良いか」でなく「質問のコードのどこに問題点があり、どう直せば良いか」という回答なので、問題点以外はできるだけそのままで。
どちらも大事だと思うので、今回、両方の観点の回答が付いたので、良かったと思います。
私も「質問文のコードをどう直せば良いか」という回答だけが付いているときに「質問文のコードはさておき、どのように書くのが良いか」という回答を追加することもあります。

[CTRL-S]

確かに、質問のコードの何が原因なのか省略しがちです・・・
それを理解しないと、また繰り返しちゃいますね。
今回のケースは非同期処理にありがちなミスなんですが、説明すると長くなっちゃうからついつい省略してしまいます。

[urk_mofmof]

お二人ともありがとうございます！
無事動かすことができました。
まだまだ勉強途中のため、両方の観点から回答を頂けてとても勉強になりました！
CTRL-Sさんのコードだと今後楽になるので今はそちらを使わせて頂いてますが、この質問でのコードの改善点＋コメント欄により良い書き方の考え方が付いたこちらの回答を今回はベストアンサーにさせていただきます

Answer 2

JavaScriptにファイル名とかを記述すると追加した時にJavaScriptの変更が必要になるのでHTMLにデータ属性として指定する方がいいと思います。

<div class="flex_test-box">
  <div class="flex_test-item">
    <div>
      <!-- ここに表示したい -->
      <div data-file="List1.json"></div>
    </div>
  </div>
</div>
<div class="flex_test-box">
  <div class="flex_test-item">
    <div>
      <!-- ここに表示したい -->
      <div data-file="List2.json"></div>
    </div>
  </div>
</div>

$(function (){
	$('[data-file]').each(function(index, target) {
		$.getJSON(target.dataset.file, function(data)
		{
			var src = data.map(function(i)
			{
				return '<tr class="' + i.class + '">' +
				'<td>' + i.button + '</td>' +
				'<td>' + i.song + '</td>' +
				'</tr>';
			})
			.join('');

			src = '<table>' + src + '</table>';
			$(target).append(src);
		});
	});
});

jQueryは久しぶりで未検証ですが、これで動くと思います。

Comments

[urk_mofmof]

追加した際に変更しなくてはならないファイルを極力減らしたいと考えていたので、こちらの回答とてもありがたいです。
JavaScriptで複数のYouTubeを埋め込む処理も別の箇所でしていて、そちらも質問で書いたものと同じようにして動画のidと出力するidセレクタを配列に格納してfor文でなんとかする方法を使っていました。
こちらの回答でいただいた内容を応用してこちらも改善できそうだなと思ったので本当に助かりました！
ありがとうございました。