質問: 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`をループで回し、``を`table`末尾に追加してその行に`$().append`して`key[className]`を書く処理をしています。 しかし意図したようにはならず、一番最後の``の行にすべての`key[className]`が書き込まれてしまっています。 以下のような感じです。 | 列1 | 列2 | 列3 | | --- | --- | --- | | | | | | :-- | :--: | --: | | | | | | :-- | :--: | --: | | 3/4 3/4 3/4 | 服 靴 帽子 | 300円 500円 1000円 | `$(document).ready`が非同期で実行されるから?と思い調べましたが、よくわかりません。 試しにconsole.logしてみたら`12123`となったので非同期で実行されてることが問題だと思いました。for inは実行順序を保証しないという記述もあったので確証がもてません。。。 Promiseについて調べましたが、`promise.then().then().then();`と書く方法だと処理が独立してないといけないので`data`の個数に応じてやりたい上の処理の場合には適用できないと思います。 この場合どうすれば実行順序を正しくすることができるでしょうか?的はずれなことを言ってるかもしれませんがよろしくお願いします。
回答: > > `$(document).ready`が非同期で実行されるから?と思い調べましたが、よくわかりません。 > > > 着眼点は合っています. ノード追加と抽出のタイミングのずれが問題の原因です. * 表に行を挿入する の処理が3回行われてから, 3つの`$(document).ready`が走り, * 最終行にクラス・テキストを挿入 しているので表の最終行に3つのデータが集中しています. この問題を解決するには"非同期を同期的にする"のではなく, **単一の非同期処理に全てを押し込む**(単一の関数内の処理は同期的に行われることが保証されている)ようにします. つまり * 表に行を挿入する * 最終行にクラス・テキストを挿入 全体を3回繰り返す処理を`$(document).ready`を使って非同期に行えばよいのです. ``` $(document).ready(function(){ for(let key of data){ $('.recieve').append(''); $('.payout').append(''); 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]); } } }); ```