質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Q&A

解決済

1回答

1626閲覧

[ javascript ] for でループ完了後に処理を実行したい

progblog

総合スコア22

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

0グッド

1クリップ

投稿2021/08/05 02:47

##やりたいこと

取得した10個のデータを配列に格納後に処理を行いたい。

やっている(と思う処理)

  1. APIを叩き10件のデータを取得
  2. 取得したのuid を使用し、ユーザーネームを取得
  3. 10件全てのユーザーネームを取得後、それぞれのデータを変数に格納する
  4. 格納したデータを連想配列に格納していく
  5. 10件全て格納後、その個数を取得する

やっている(と思う処理)のソース

<script> // 日付をフォーマットする関数 const DateFormat = (get_date) => { const date = new Date(get_date), year = date.getFullYear(), month = date.getMonth() + 1, day = ("0" + date.getDate()).slice(-2), hour = ("0" + date.getHours()).slice(-2), minute = ("0" + date.getMinutes()).slice(-2), PostDate = `${year}年${month}月${day}日 ${hour}時${minute}分`; return PostDate } // ユーザー名を取得する関数 const GetUserName = (get_user_name) => { // PROMISE を返す return new Promise(function (resolve, reject) { const url = `https://versatileapi.herokuapp.com/api/user/${get_user_name}` fetch(url) .then(function (data) { return (data || "null").json(); }).then(function (user) { UserName = user.name; }).catch(function (e) { UserName = '名前が設定されていません'; }).then(function () { resolve(UserName); }); }); } // HTMLに描画するデータを取得する関数 let init_data = []; const GetBaseData = () => { // PROMISE を返す return new Promise(function (resolve, reject) { fetch('https://versatileapi.herokuapp.com/api/text/all') .then(function (data) { return data.json(); }).then(function (tweet) { // 最近の10件を取得する for (let i = tweet.length - 1; i >= tweet.length - 10; --i) { GetUserName(tweet[i]._user_id).then(function (UserName) { let tweet_data = { user_name: UserName, post_date: DateFormat(tweet[i]._created_at), reply_text: tweet[i].in_reply_to_text_id, post_text: tweet[i].text, like_amount: '', } init_data.push(tweet_data) }) } }); resolve(init_data); }); } // HTMLのデータ10個が全て格納さ入れたら実行 Promise.all([GetBaseData(init_data)]) .finally(() => { console.log(init_data.length); }); </script>

起こっている事象

「個数を取得する」処理で0が取得される

考えたこと

forで回しているので、1個値が入った瞬間に完了されたと判断される?
→ そうであれば個数は1になるはずなので、違う。

そもそもpromiseがうまく処理できていない。
consoleを見ているとどうやらこれっぽい。
ページ表示と同時にinit_data.lengthconsoleに表示され、そこに徐々にデータが格納されている気がする。

試したこと

resolve(init_data);をfor の中に入れてみた結果的に1が返ってきたので、「考えたこと」の1つ目は正しい?
つまり、promiseは動いている?


色々、考えてみましたが、promise の処理が間違ってるのだと思います。
どこでつまずいているか教えていただけますでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

GetBaseDataは、fetchと無関係にresolveを実行しているため、fetchの実行を待たない関数となってしまっています。

return fetch().then().then()のように、fetchが生成するPromiseを返すようにしましょう(自力でnew Promiseする必要はありません)。

投稿2021/08/05 02:56

maisumakun

総合スコア146018

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

progblog

2021/08/05 06:03

ありがとうございます! なるほど、そのために0が出るんですね。 fetch が理解しきれていない結果だと思いますので、調べてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問