70770


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

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

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

[code]

       function sample() {
         var jsonInfo = loadJson();
       }
    
       function info(obj) {
         var id = obj.sample1.value.id.value;
         var user = obj.sample1.value.user.value;
         return {
           "id": id,
           "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;
       }
    
[/code]


CC BY-SA 4.0
2020-09-27T19:09:48.700
70765
2020-09-28T18:47:36.897
2020-09-28T18:47:36.897
question
javascript
非同期処理について


`$.getJSON`はPromiseを返しますので、`async/await`を使って下記のような変更はいかがでしょうか。

### 修正したスクリプト:

[code]

    // これを実行
    async function sample() {
      var jsonInfo = await loadJson();
      console.log(jsonInfo)
    }
    
    function info(obj) {
      var id = obj.sample1.value.id.value;
      var user = obj.sample1.value.user.value;
      return {
        "id": id,
        "user": user
      }
    }
    
    async function loadJson() {
      var data = await $.getJSON("data.json");
      var obj = data[0];
      json = info(obj);
      return json;
    }
    
[/code]

  * 上記のスクリプトで`sample()`を実行すると、`console.log(jsonInfo)`で取得した値がコンソールに表示されると思われます。

### 参考:

  * [jQuery.getJSON()](https://api.jquery.com/jQuery.getJSON/)
  * [async function](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)


CC BY-SA 4.0
2020-09-28T01:26:18.897
70770
2020-09-28T01:26:18.897
19460
70765
answer