複数のjsonファイルからjsonpで中身を読みだし、対応するhtml側のDOMに表示するjsをjQueryの.ajaxを使って書いています。
下記の様なコードで実行した場合、それぞれのDOMに想定していないjsonの中身が表示されてしまいます。
※.AAAにBBB.jsonの中身、.bbbにccc.jsonの中身等、ランダムに変わります。
// 呼び出すjson AAA.json BBB.json CCC.json
// js function jsonSet(itemName) { $.ajax({ type: 'get', url: itemName + '.json', dataType: 'jsonp' }) .done(function(responseData){ /*jsonの内容を同じclassを付与しているHTMLのDOMに追加する*/ $('.' + itemName).prepend(responseData); } } var arr = ['AAA','BBB','CCC'] arr.forEach (function(e, i){ jsonSet(e); });
ajaxの非同期通信が原因かと思い調べた結果、下記の様にループをforで廻して添字を渡す書き方も試したのですが、同様の結果となりました。
// js 関数呼び出し部分のみ var arr = ['AAA','BBB','CCC'] for(var i = 0, len = arr.length; i < len; i++){ var count = i; (function(i){ jsonSet(arr[i]) })(count); }
原因が分かりましたら教えて頂ければと思います。
宜しくお願いいたします。
回答2件
あなたの回答
tips
プレビュー