【Javascript･jQuery】外部サイトからテキストファイルの読み出し

Question

###前提・実現したいこと

Javascriptにて外部サイトから連続した画像とテキストファイルを順次読み込み、
表示させるプログラムを作成中です。画像(変数total)の出力はされるのですが、
テキストファイル内(変数name)の表示がされません。
jQueryで読み込みは正常ですが、出力する際に変数を引き継いでいないようです。

当方、まだ初心者の為、上記の方法がいまいち不明です。

###該当のソースコード

for (i=1 ; i<=10 ; i++){
     
    var total = parseInt(i) ;
           
    $.get("http://example.com/item/" + total + ".txt", function(data){
   	 name = data;
         console.log(name);
    });
                                                  
   document.write('<li><div id="' + i + '" align="center"><a href=#' + ' title="' + name + 
		  '" onclick="return users(this)"><img src="http://hexample.com/item/' + total + 
                  '.jpg"></br></a><font size="1">' + name + '</font></div>');
                  
}

###試したこと

document.writeの位置をfunction(data)内に移したところ、変数nameの表示は正常にできたものの、
最後の画像が10回出力された上、ページレイアウトが崩れてしまいました。

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、質問フォームのタイトル横にある初心者マークを押すことで「初心者である」ということはわかりますので、本文に「初心者」と書かなくても大丈夫です。あと、例示用ドメインはご自身で所有されていない限りexample.comを利用してください。

[yk32]

ご指摘ありがとうございます。
修正致しました。
対応に時間がかかり申し訳ございませんでした。
何卒宜しくお願い致します。

Answer 1

質問のコードブロックは kei344 さんの指摘に従って直してください。

問題点は

• $.getは非同期で通信されるので、その結果を待たずにdocument.writeされてしまう。
• $.getのコールバック関数に持って行った場合、変数i,total状態はその結果を待たずにループによって変わるので、最初のdocument.writeで使うときに iやtotalはおもった値にならない。

2番目はスコープとかjavascriptのクロージャ(今回はちょっと違うかな)などでよく話題になる話ですが、
解決策としては、通信部分を別の関数にして変数のスコープをきっちり分けるという方法があります。

function getUserImages(i){
  var total = parseInt(i);
  $.get("http://example.com/item/" + total + ".txt", function(data){
    var name = data;
    document.write('<li><div id="' + total + '" align="center"><a href=#' + ' title="' + name +  
                 '" onclick="return users(this)"><img src="http://example.com/item/' + total +  
                 '.jpg"></br></a><font size="1">' + name + '</font></div>');
    
  });
}
  
for (i=1 ; i<=10 ; i++){
  getUserImages(i);
}

関数のなかでtotalをしっかり覚えてくれる(varがついていることが重要)、且つ1度の呼び出しの中でその値は変わらないので、$.getが終わった後もその値で処理できるという感じです。

他の解決策としては、$.getではなく、$.ajaxを使って同期処理オプションを有効にするという手もあります。

  for (i=1 ; i<=10 ; i++){

    var total = parseInt(i) ;

    $.ajax({
      url : "http://example.com/item/" + total + ".txt",
      type : "get",
      async: false,    
      success : function(data){ 
        var name = data; 
        console.log(name); 
        document.write('<li><div id="' + i + '" align="center"><a href=#' + ' title="' + name +  
        '" onclick="return users(this)"><img src="http://hoge.hoge/item/' + total +  
        '.jpg"></br></a><font size="1">' + name + '</font></div>');
    });
  }

いずれも欠点があり、前者はサーバーの状況によっては順番が変わる可能性があり、後者は非同期の時より待たされてる感じがでるかもしれない事です。

後者はどうにもならないですが、前者に関してはdocument.writeを使っているのが問題の一端があるので、jQueryを使うなら、document.writeではなく、jQueryの機能であらかじめHTMLで用意しておいたli (idかclassでどのliか指定して）の中身を書き換える方法に改善するといいでしょう。

Comments

[yk32]

flied_onion様

ご回答ありがとうございます。

事象の要因がわかりやすい解説を頂きまして、わかりました。

１つめの方法をとってみたところ、私の環境では順番が入れ替わる症状は何十回と実行してみてもおきませんでしたので、表示部分をjQueryの要素書き換えに変更し、
実装することが出来ました。

大変勉強になりました。
ありがとうございました。