javascript 非同期を同期的にしたい やり直し

Question

間違えて投稿してしまったのでやり直します。

初心者で恐縮ですがよろしくお願いします。

for(let key of data){
　　　　　　　　console.log('1');　　
				$('.recieve').append('<tr><td class="date"></td></tr>');
				$('.payout').append('<tr><th class="date_pay"></th></tr>');
				key = JSON.parse(key);

				for(let className in key){
					$(document).ready(function(){
						$('.recieve tr:last-child' + ' .' + className).append(key[className]);
						$('.payout tr:last-child' + ' .' + className).append(key[className]);
						console.log('3');
					});
                                        console.log('2');
				}
			}

-dataをループで回し、<tr><td></td></tr>をtable末尾に追加してその行に$().appendしてkey[className]を書く処理をしています。

しかし意図したようにはならず、一番最後の<tr><td></td></tr>の行にすべてのkey[className]が書き込まれてしまっています。

以下のような感じです。

列1	列2	列3
		列1
:--	:--:	--:
		列1
:--	:--:	--:
3/4 3/4 3/4	服 靴 帽子	300円　500円　1000円

$(document).readyが非同期で実行されるから？と思い調べましたが、よくわかりません。

試しにconsole.logしてみたら12123となったので非同期で実行されてることが問題だと思いました。for inは実行順序を保証しないという記述もあったので確証がもてません。。。

Promiseについて調べましたが、promise.then().then().then();と書く方法だと処理が独立してないといけないのでdataの個数に応じてやりたい上の処理の場合には適用できないと思います。

この場合どうすれば実行順序を正しくすることができるでしょうか？的はずれなことを言ってるかもしれませんがよろしくお願いします。

Comments

[kei344]

https://teratail.com/questions/122163 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、どちらかを削除されるよう運営に連絡されることをお勧めします。https://teratail.com/contact/input

[navca]

ありがとうございます。編集機能があるのを忘れてました。削除してもらいます。

[m.ts10806]

あ、なるほど。そういうことですね。私が前の質問に書いたコメントは忘れてください。（いずれにしてもテーブル部分おかしいような気がしますが）

Answer 1

$(document).readyが非同期で実行されるから？と思い調べましたが、よくわかりません。

着眼点は合っています. ノード追加と抽出のタイミングのずれが問題の原因です.

• 表に行を挿入する

の処理が3回行われてから, 3つの$(document).readyが走り,

• 最終行にクラス・テキストを挿入

しているので表の最終行に3つのデータが集中しています.

---

この問題を解決するには"非同期を同期的にする"のではなく, 単一の非同期処理に全てを押し込む(単一の関数内の処理は同期的に行われることが保証されている)ようにします. つまり

• 表に行を挿入する
• 最終行にクラス・テキストを挿入

全体を3回繰り返す処理を$(document).readyを使って非同期に行えばよいのです.

$(document).ready(function(){
	for(let key of data){
		$('.recieve').append('<tr><td class="date"></td></tr>');
		$('.payout').append('<tr><th class="date_pay"></th></tr>');
		key = JSON.parse(key);
		for(let className in key){
			$('.recieve tr:last-child' + ' .' + className).append(key[className]);
			$('.payout tr:last-child' + ' .' + className).append(key[className]);
		}
	}
});

Comments

[think49]

> for(let className in key){
key は JSON.parse() の返り値なので、実質的には問題ありませんが、prortotypeを辿る必要はないので (Object.keys or Object.entries) + for-of がより好ましい気がします。

> $('.recieve tr:last-child' + ' .' + className).append(key[className]);
このtr要素は3行目の
$('.recieve').append('<tr><td class="date"></td></tr>');
なので、append前にHTMLタグを生成すれぼ最適化できそうです。

質問文の「以下のような感じです」では明らかに3列なのに、3,4行目のコードでは1列しか挿入してない、ところが気になりますが…。

[defghi1977]

今回の回答ではループと非同期の絡み合いをどう捌けばよいかに主眼を置いているので, あくまで質問者のコードを尊重しています. 従って, 最適なループ手段などについては今回は敢えて目を瞑っています.

[think49]

なるほど、失礼しました。

[navca]

ご回答頂きありがとうございました。お礼が遅れ申し訳ありません。
＞単一の関数内の処理は同期的に行われることが保証されている。
そうだったんですか・・・　for in直後に$(function(){とすることは逆に邪魔な処理を書いていたんですね。

think49さんもありがとうございました。
＞なので、append前にHTMLタグを生成すれぼ最適化できそうで
この部分がわからなかったので、よろしければもう一つヒントをいただければ幸いです。

[think49]

To: navca さん
1. tr要素を生成し、documentへ挿入(append)
2. 1. で挿入したtr要素を再び、documentから検索し、対象のtr要素配下にtd要素を挿入(append)
3. 2. を繰り返す

挿入済のtr要素を再び、探すのは無駄なので、完全なtr要素を生成してからtbody要素へappendすれば良いです。
更にいうなら、tr要素を複数回appendするのも無駄なので、完全な複数のtr要素を生成してから、一度だけtbodyへappendすれば完璧です。

[navca]

お忙しい所ありがとうございます。
わかりました。どうもありがとうございました。

[defghi1977]

で, 本当であればthink49さんのおっしゃっている通り, より良いループでの書き直しも試みたのですが, いかんせんソースとなる変数dataの構造がいまいち不明であったため, 誤った記述による混乱を避けるために敢えて回答を最小限に留めました.
次回の質問からは出力だけでなく入力についての情報も書き加えていただくと, より適切な回答が得られる用になると思います.

[navca]

わかりました。ありがとうございました。