Using js to call rest API and execute a post

Question

I created 3 files (html, js and php) to call a restAPI from the js. But it is not working and I found zero clue on the web. It just does not work

Step 1 - HTML - for now, I use it to call the js script at the click on the button in this first moment I just try to call the js with the rest calling.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>
      Web 2 Case - Abertura de Chamados
    </title>
  </head>  

  <body style="text-align:center;" id="body">
     
    <!-- Button to send data -->
    <button onclick="sendJSON()">Send JSON</button>

  <!-- For printing result from server -->
  <p class="result" style="color:green">

2 - Then I have index.js

function sendJSON(){
           
        let result = document.querySelector('.result');
           
        // Creating a XHR object
        let xhr = new XMLHttpRequest();
        let url = "**The endpoint url**";
    
        // open a connection
        xhr.open("POST", url, true);

        // Set the request header i.e. which type of content you are sending
        xhr.setRequestHeader("Content-Type", "application/json");
        xht.setRequestHeader("Authorization","00Df0000003dGUH!AQUAQLpQJlcqfKpqZUW9KZjwubQi4YcV7IrfZrw_Y53X_adKMCBHVXzblySCHtYfwO5YLh1EBcUTrX7qxp9EkSjhKvBfzl4M");

        // Create a state change callback
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {

                // Print received data from server
                result.innerHTML = this.responseText;

            }
        };

        // Converting JSON data to string
        var data = JSON.stringify({"Fields":["requestDefinitionId": "a3Hf0000000lTNaEAM", "client": "0053j00000A7rWLAAZ"],["Answers":{"a3Df0000000qI63EAE":[ "Reclamação" ],"a3Df0000000qHvsEAE":[ "Solicitação de Serviço aberta por qualquer integração web","a3Df0000000qHwREAU":["Web"] ]}]});

        // Sending data with the request
        xhr.send(data);
    }

I believe that my var data is not good. When I call the endpoint from postman, I wrote the body

{
  "Fields": [
    {
      "Name": "requestDefinitionId",
      "Value": "a3Hf0000000lTNaEAM"
    },
    {
      "Name": "client",
      "Value": "0053j00000A7rWLAAZ"
    }
  ],
  "Answers": [
    {
      "QuestionId": "a3Df0000000qI63EAE",
      "Values": [ "Reclamação" ]
    },
    {
      "QuestionId": "a3Df0000000qHvsEAE",
      "Values": [ "Solicitação de Serviço aberta por qualquer integração web" ]
    },
    {
      "QuestionId": "a3Df0000000qHwREAU",
      "Values": ["Web"]
    }
   ]
   }

illustrating the body I paste above

To debug AJAX requests open devtools in your browser and navigate to the 'network' tab. Then make the request and check its response text and status code. — Rory McCrossan
– Rory McCrossan, Commented Apr 16, 2021 at 14:45

Ezward · Accepted Answer · 2021-04-16 20:21:53Z

1

If you copy the contents of the JSON.stringify() argument into this validator, https://jsonformatter.curiousconcept.com/#, you will see that the "Fields" array is not formatted correctly; I think you want it's contents to be an object within curly brackets. So that would be why index.js does not work correctly.

answered Apr 16, 2021 at 20:21

Ezward

17.8k6 gold badges27 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using js to call rest API and execute a post

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related