TypeError: Cannot read properties of undefined (reading 'dataResponse') at callback-CodePudding

I am trying to query an api according to the instructions you gave me, but I am getting this error:

(index):30 Uncaught TypeError: Cannot read properties of undefined (reading 'dataResponse') at callback ((index):30) at HTMLButtonElement.onclick ((index):23) callback @ (index):30 onclick @ (index):23

api instructions https://drive.google.com/file/d/1KHLduw46l1e3aIGCliTvn1gYuJhv8Npy/view?usp=sharing could you help me please

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- Bootstrap CSS -->

    <title>Duke Business School</title>
    <script
    data-user="user([email protected]) "
    data-password="(password 'sha256Hex')"
    data-button=false
    data-response=true
    data-amount="100.01"
    data-commerce="Affinitas"
    src="http://52.22.36.22:9020/js/transactions.js">
   </script> 
  </head>
  <body>

        <button onclick="callback();"> pagar</button>
      </div>
    </section>

   <script>
    function callback(data){
    alert("RESPUESTA OBTENIDA EN HTML");
    alert("Operación: "   data.dataResponse.description   " Autorización: "  
   data.dataResponse.authorization)
    }
   </script>
  </body>
</html>

CodePudding user response：

It looks like your error here is a simple user error, and has nothing to do with the API.

You're using the button onclick to call "callback()" without any passed parameters. This is the same as: "callback(undefined);"

I believe your logic is a little messy here. Your button should call the API, and the API should call the callback. Instead, you're calling the callback with the button, skipping the API altogether.

Typically, the error TypeError: Cannot read properties of undefined refers to trying to reference a property within a property within an object or object's property that doesn't exist.

The problem is, you're trying to read the property "description" of dataResponse, but dataResponse doesn't exist. But the compiler doesn't know what dataResponse is because the variable data doesn't exist.

data.dataResponse.description // <- Same as: Undefined.undefined.undefined

CodePudding user response：

Root cause is here onclick="callback();", you are not passing any data in callback and trying to access data in your function which is actually undefined.

I am not sure about this api but on your button click

you should redirecting user to the gateway page which will have both the scripts independent of your button

you should append the mentioned script in dom on button click and it will automatically take care of callback