以下のコードは、forループで要素を取り出して、そのURLをAPIへ送信してJSONを受け取り、パースして出力する、というものです。
なのですが、まず、discountRateに値が定義される前にJavaScriptの処理だけ進んでしまい、console.log(discountRate)しても出力されない、という事態になりました。
この事態は、promiseを使うことで対処できたのですが、やはり何か変で、
出力されるdiscountRateの値が全て同じなのです。
おそらく、最後に定義されたdiscountRateが定義された状態で最初の出力を迎えたということなのだと思いますが。
forループのなかの getJSON().then(function(change){ console.log(discountRate); })
が終わるまで次のループをさせないようにしたいのですが、どうしたらよいでしょうか。
参考にしたページ:
JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる - Qiita
JavaScript ES6 promise for loop - Stack Overflow
var i ; var apiUrl ; var url ; var discountRate ; function getJSON(){ return new Promise(function(resolve, reject){ // Load the script and get JSON var script = document.createElement("SCRIPT"); script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'; script.type = 'text/javascript'; script.onload = function() { var $ = window.jQuery; $.getJSON(apiUrl, function(data) { discountRate = data.discountRate resolve(discountRate); }); }; document.getElementsByTagName("head")[0].appendChild(script); }); } for (let i = 1, p = Promise.resolve(); i < getElementsByXPath('//*[@id="widgetContent"]')[1].querySelectorAll('#dealImage').length ; i++){ p = p.then(_ => new Promise(resolve => discountRate )); url = getElementsByXPath('//*[@id="widgetContent"]')[1].querySelectorAll('#dealImage')[i].href ; apiUrl = "http://localhost:3000/amazon/show.json?url=" + url ; console.log(apiUrl) ; getJSON().then(function(change){ console.log(discountRate); }) }
回答2件
あなたの回答
tips
プレビュー