JavaScriptの非同期処理で躓いています

前提・実現したいこと

JavaScriptの非同期処理で躓いています。
データベースから（dynamoDB）取得したデータをブラウザ上に表示したいです。

しかし下記のようなエラーが返され、表示することができていません。
DBへの接続、操作ができることは確認済みです。
煩雑なコードで申し訳ありませんが、コメントいただけたら幸いです。
よろしくお願いします。

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

TypeError: undefined is not an object (evaluating 'apigClient.dynamodbctrlPost')

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>API test</title>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- API用SDK -->
  <script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
  <script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
  <script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
  <script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
  <script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
  <script type="text/javascript" src="lib/url-template/url-template.js"></script>
  <script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
  <script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
  <script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
  <script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
  <script type="text/javascript" src="apigClient.js"></script>
</head>
<body>
<!-- HTML  -->
<div>問題</div>
<div id="output"></div>
<!-- Other Script -->
<script type="text/javascript">
var apigClient;
$(function(){
//API Clientを初期化
  apigClient = apigClientFactory.newClient();
});

var params = {};
var body = {
  "OperationType":"QUERY",
  "Keys": {
    "questionID": "q002",
    "sortID": "s002",
    "unit": "hello",
    "value": 100
  }
}
var additionalParams = {};

apigClient.dynamodbctrlPost(params, body, additionalParams)
      .then(function(result){
        var questionText = result.data.Items[0].unit

        onLoad();

          function onLoad() {
            target = document.getElementById("output");
            target.innerHTML = questionText;
          };

        // Add success callback code here.
      }).catch( function(result){
        // Add error callback code here.
      });

</script>
</body>
</html>

試したこと

htmlにボタンを配置し、ボタン押下→DBのデータを表示するということはできましたが、上記コードのようにページを開いた段階で表示するということができていません。

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

AWSでAPI gateway, AWS Lambda, DynamoDBを使用し、javascript用のSDKをダウンロードし使用しています。

Zuishin

2020/09/11 05:32

result result.data result.data.Items[0] このうちのどれかが undefined だと思うので、console.log(result); console.log(result.data); console.log(result.data.Items[0]); のようにどれが undefined になっているか確かめてみてはどうでしょうか。もしかしたら Items ではなく item だった、などのようなことがあるかもしれません。

行動規範の内容に同意します

回答2件

ベストアンサー

$(function(){～})の中のコードが実行されるのはDOMロードが終了した時です。
そのためapigClient.dynamodbctrlPost(～ が実行される時点では、まだapigClientの初期化が実行されておらず変数apigClientの内容がundefinedなのではないでしょうか？

apigClient.dynamodbctrlPost(～をapigClient = apigClientFactory.newClient();のすぐ下に書くように変更してはどうでしょうか。

投稿2020/09/11 05:34

ku__ra__ge

総合スコア4524

tacos_salad

2020/09/11 05:54

具体的な回答をいただきありがとうございました！そのようにコードを変更し、うまく動作することを確認することができました。

行動規範の内容に同意します

apigClientFactory.newClient()が非同期のため、
ルートでの即時実行が、apigClientにデータが入る前に、先に実行されてしまっているのが原因と思われます。
promiseなどを使用し、
apigClientにデータが入ったタイミングで、下方の処理を実行する必要があるものと思われます。

投稿2020/09/11 05:26