javascriptクラスのメンバ変数の挙動について

Question

前提・実現したいこと

商品の在庫状況を判定する機能をjavascriptで開発しております。
ajaxで在庫検索APIに接続し、取得した結果（JSON）をクラスで定義したメンバ変数（配列）に渡し、クラス内の別の関数で使用したいのですが、うまく動きません。
以下、事象の詳細です。

①クラス内でメンバ変数（配列）を定義
②ajaxでAPIに接続し在庫状況を検索する関数を使用し、在庫状況をメンバ変数に格納
③②の関数の内と外で配列の挙動が異なる　←　問題

上記の②の関数内ではJSONの連想配列として動いてくれるのですが、関数の外では配列にはなっている（chromeのコンソール上にはArrayと表示されている）ものの、要素を指定して値を参照することができない状態となってしまっています。

上記関数の外でも値を参照して抽出するためにはどのように修正すればよろしいでしょうか。
ご教授のほど、よろしくお願いいたします。

発生している問題・エラーメッセージ

chromeのコンソール上の表示内容です。（console.logで出力させたもの）

こっちがだめなやつ
[]
JSONの連想配列の要素たち
length: 37
__proto__: Array(0)

ほんとはこっちになってほしい
(37) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
JSONの連想配列の要素たち
length: 37
__proto__: Array(0)

該当のソースコード

this.Search_Product_API = function(param_nomal, product_type_str){
        // 親クラスのインスタンスを生成
        var oya_class = this;

        // APIで通常商品の在庫状況を検索しリストに格納
        return new Promise(function(resolve, reject){
            $.ajax({
                url: 'APIのURL',
                data: param_nomal,
                dataType: 'jsonp',
                success: function(data){
                    // 検索結果をリストに格納
                    for (var i = 0; i < data.length; i++) {
                        // 検索結果を変数に格納
                        var shohin_cd = data[i].shohin_cd;
                        var zaiko_kbn = data[i].zaiko_kbn;
    
                        // 検索結果をjsonに格納
                        var result_json = {
                            "shohin_cd": shohin_cd,
                            "zaiko_kbn": zaiko_kbn
                        }
                    
                        if(product_type_str == 'nomal'){
                            // 検索結果を格納したjsonをリストに追加
                            oya_class.nomal_zaiko_list.push(result_json);
                        }else if(product_type_str == 'campaign'){
                            // 検索結果を格納したjsonをリストに追加
                            oya_class.campaign_zaiko_list.push(result_json);
                        }
    
                    }
　　　　　　　　　　　console.log(oya_class.campaign_zaiko_list); ←　ここは問題ない
                }
            })
　　　　　　 console.log(oya_class.campaign_zaiko_list); ←　ここでリストが空
        })
    }

試したこと

配列をJSON文字列にパース→JSON型にパースを試しましたが、JSON文字列にパースからできない状態でした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[gentaro]

うまくいかないのはよくわかったけど、質問内容は何なんだろう。
原因が知りたいのか、意図している動作にするためにはどう修正するべきなのかを知りたいのか。
ここを読んでる人はエスパーじゃないので、あなたが述べないと意図が伝わりません。
ちゃんと質問形式にしましょう。

[TakeruYamamura]

申し訳ありません。
質問内容を修正させていただきました。

意図している動作にするための修正方法をお聞きしたかった次第です。

ご指摘ありがとうございました。

Answer 1

非同期で取得しようとしてるのに（ajax）、同期的に使用しようとしてるからです。
つまり、ajaxは基本非同期なので、
その次行以降の処理は先に走ってしまうので、変数の中身が入る前に使おうとしてしまっているので、空になるわけです。
取得内容が必要な処理は、
非同期処理が完了した後に、取得内容を使う処理をするようにしましょう。

Promiseや、fetchを上手く使うなどでやるといいかと。

Comments

[TakeruYamamura]

ご教授ありがとうございます。

ajaxでAPIへの接続を実現している関数（product_search_api）で、async:falseとしているのですが、これでは同期処理にはならないのでしょうか。。。？
.doneを使用していると勝手に非同期処理ということでしょうか。。。？

[TakeruYamamura]

async/awaitを使用することで問題解決いたしました。
ご教授くださりありがとうございました。

[miyabi_pudding]

ajax処理自体をasync: falseにするのはあまりよろしくありません。
（Chromeで警告が出ます）
また、doneの内側の処理で実行したものを同期的にしても、
jQueryのajax処理自体が、全体の処理を同期的にする仕様ではありません。
（同スコープ上の処理でしか同期的にならない。今回は内側に潜った先で同期的になっているが、外側スコープには関係ない→console.log時点ではdoneと同スコープのため、その非同期処理が優先になる）
なので、awaitをうまく使うで解決ですね。
よかったです。

[TakeruYamamura]

なるほどです。
今回の場合は、ajaxの処理自体は同期的になっているが、「product_search_api」は同期的になっていないので、APIへ接続し情報を取得する前に次の処理に進んでしまっていると理解しました。
ご丁寧にありがとうございました。
大変助かりました。

[miyabi_pudding]

そうです、その挙動になっていたで間違いないです。
解決とご理解いただけてよかったです。