javascript初心者です。(初めて3日目) promiseの結果を変数に格納したいのですが、昨日からずっと調べているのですが、やり方がわかりません。
【やりたいこと】
フォルダに保存したプロジェクトのファイル一覧(配列)を、ブラウザ上に並べて表示させる。
【困っていること】
async functionで取得した値(プロジェクト一覧の配列)に変数に格納したいが、出来ませんでした。
console.logすると、array(2)と表示されて中身が見えるのですが、実際に中身を取り出そうとすると(例えばgli[0])
undefindと表示されます。lengthを調べても0と出ています。
中身が見えるのに取り出せないのは、不思議でした。global変数に格納しても同じ結果となりました。
【試したこと・調べたこと】
・async functionを変数に格納するのではなく、asyncの内部で処理をしたほうが良いとのことだったので、
処理をすべて内部に移動させたところ、処理はされたのですが、画像が表示されませんでした。→失敗
(overlayなどとの相性でしょうか??)
promiseの概念についての理解がまだ出来ていないのですが、.thenで処理結果へのアクセスは出来るにも関わらず、
いろいろ調べても、その結果を格納できない理由が、理解できませんでした。。。
promiseの結果を変数に格納して、functionの外側から使用したいというのは、やはり使い方を間違っているのでしょうか。
また正しい使い方をする場合、そのように書けばよいのでしょうか。
申し訳ないのですが、わかる方は教えてくだされば幸いです。
【コード】
<script>
async function get_list(){
let li=await eel.projectlist()();//list型のobjectが返ってくる。(liに格納される)
var txt =""
for (let i = 0; i < li.length; i++){
gli.push(li[i])
}
return li
}
window.onload = function() {
gli=[];
get_list().then(value => console.log(value));
console.log(gli)
for (let i = 0; i < gli.length; i++) {
console.log(gli[i])
var txt = txt+`<div class="col-lg-3 col-md-6 col-sm-6 work"> <a href="images/work-8.jpg" class="work-box"> <img src="images/work-8.jpg">
<div class="overlay">
<div class="overlay-caption">
<h5>Project Name</h5>
<p>${gli[i]}</p>
</div>
</div>
<!-- overlay -->
</a> </div>`;}
document.getElementById("message").innerHTML =txt;
}
</script>