javascript 非同期処理について

Question

sample()のjsoninfoにデータを入れたいのですが、loadJson()の箇所でjsonに値が入る前にreturnされてしまうので、jsonInfoに値が入っていない状況です。

処理が終わってからreturnされるのが理想なんですが、どう記述すればいいか教えて頂きたいです。

非同期処理についてasync/awaitの使い方が分かっておらず、、、

    function info(obj){
      var location = obj.sample1.value.id;
      var user = obj.sample1.value.user;
      return {
        "location": location,
        "user" : user
      }
    }

    function loadJson() {
      var json;
      $.getJSON("data.json", function(data) {
        var obj = data[0];
        json = info(obj);
        console.log(json); //値が入っている、2番目に表示される
      });
      console.log(json);   //undefined、1番目に表示される
      return json;
    }
    
    function sample(){
      var jsonInfo = loadJson();
    }

[
    {
        "id": "1232",
        "template": {
            "value": "タイトル"
        },
        "sample1": {
            "value": {
                "user": {
                    "value": 50
                },
                "id": {
                    "value": 1231
                }
            }
        }
    }
]

async/awaitを使ったもの

    async function loadJson() {
      var json;
      $.getJSON("data.json", function(data) {
        var obj = data[0];
        json = await info(obj);
        console.log(json); //値が入っている
      });
      console.log(json);   //undefined
      return json;
    }

Comments

[yambejp]

実際のjsonデータはありませんか？

[退会済みユーザー]

すいません、編集しました。

[Zuishin]

ここでの問題点は、$_.getJSON が非同期処理をしているため、それが終わる前に console.log(json) が呼ばれていて、json にはまだデータが入っていないということです。getJSON が終わるまで待機しなければいけません。

https://stackoverflow.com/questions/42675535/how-to-make-the-getjson-wait-before-running-the-rest-of-the-code

このベストアンサーの二番目のコードのように getJSON を呼び出す処理を関数に独立させ、Promise を返し、それを await すると良いでしょう。

ただし await するためには呼び出し側も非同期関数である必要があります。

async function sample(){
var jsonInfo = await loadJson();
}

Answer 1

非同期処理についてasync/awaitの使い方が分かっておらず、、、

async/await を知るには、次の順で理解できているかを再確認してみてください

1. コールバック ... MDN コールバック関数
2. Promise ... MDN Promiseを使う
3. async/await ... Promise の糖衣構文(シンタックスシュガー)

JavaScript の情報伝搬の基本は、関数の返り値をそのまま使う以外に、コールバック関数が頻繁に利用されます。
コールバック関数はネストが深くなるとコードが読みづらくなるので、フロー制御の手法として Promise が実装されています。

Answer 2

具体的なデータが無いのでなんとも言えませんが、こんな感じですかね

const info=(obj)=>{
  const location = obj.sample1.value.id;
  const user = obj.sample1.value.user;
  return { location,user};
}

const loadJson=async()=>{
  const data=await fetch("x.json").then(res=>res.json());
  return info(data[0]);
}

const sample=async()=>{
  var jsonInfo = await loadJson();
  console.log(jsonInfo);
}
sample();