JavaScript 配列の扱いがわからない

Question

前提・実現したいこと

JavaScriptの学習していて解決できない事があるので、質問失礼します。。

現在、「」htmlx scheduler」 というライブラリーを使用して学習しています。
そのライブラリーの中の、「serverList」という関数から返される値が、以下の様な形式でコンソールに出力されます。

[]
0: {key: 1,label: "label #1"}__proto__: 
1: {key: 2,label: "label #2"}__proto__: 
2: {key: 3,label: "label #3"}__proto__: 
3: {key: 4, label: "label #4"}
length: 4__proto__: Array(0)

これを、次の様な形に変換したいのですが、何から手をつけて良いのかわからずに詰まっています。

(4) [{…}, {…}, {…}, {…}]
0: {key: 1, label: "label #1"}
1: {key: 2, label: "label #2"}
2: {key: 3, label: "label #3"}
3: {key: 3, label: "label #4"}
__proto__: Array(0)

以上、よろしくお願いします。

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

Chromeのコンソール画面の表示

[]
0: {key: 1,label: "label #1"}__proto__: 
1: {key: 2,label: "label #2"}__proto__: 
2: {key: 3,label: "label #3"}__proto__: 
3: {key: 4, label: "label #4"}
length: 4__proto__: Array(0)

Arry.lengthを使用してループを行おうとすると、サイズが０でループに入らない。

該当のソースコード

const optionArray = scheduler.serverList("testOptions");
console.log(optionArray);　// 上記の結果が返ります。

試したこと

調べているのですが、欲しい情報が見つかりません。
解決の糸口が見えない状況です

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

以下のライブラリーを使用しています。
dhtmlx scheduler [serverList]
https://docs.dhtmlx.com/scheduler/api__scheduler_serverlist.html

Comments

[miyabi_pudding]

前者と後者で、表示の仕方は違えど、全く同じ状態だと思うのですが、何が違うのでしょうか・・・？

[miyabi_pudding]

その変数が、非同期取得のために、即時では中身がなく、
非同期が終わったのを確認してからじゃないといけない、とかありませんか？
（console.logは処理遅めなので、たまにこういうことはあります。）

[yuu_t]

前者は、Array.lengthが、０になり処理できません。
後者は、Array.lengthが４になり、ループ処理が可能になっています。

ライブラリー側の関数内で、非同期処理が行われているかも知れません。

Answer 1

miyabi_takatsuk様

その変数が、非同期取得のために、即時では中身がなく、
非同期が終わったのを確認してからじゃないといけない、とかありませんか？

おっしゃる通り、非同期で取得されていました。
「async await」で処理を囲ってやる事で、思い通りの形で取得できました。
ありがとうございました。

Comments

[miyabi_pudding]

解決してよかったです。

[yuu_t]

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