javascript azure postman azure-logic-apps azure-cognitive-services

How to implement Postman tasks in a website

I created a text analytics with cognitive services from Azure. I created a logic app and it works fine with Postman. Now I want deploy it on a website that looks like that: I want to write anything in in the upper textarea. When I press Submit it should send the text to my logic app. The logic app should send back the analysis to the textarea below. I just don't know how to do that with JavaScript. The Logic App has a http trigger. In Postman I POST to a link that triggers the http trigger. In the head is KEY=Content-Type Value=application/json. In the body I send the raw JSON That looks like: { "text": "Hello, I'm fine!" } This should be get from the upper box. Then somehow I want to get the results in the textarea down below.

I tried this JavaScript but I have any experience so it didn't even send to my logic app:

var ServerURL = "https://prod-115.westeurope.logic.azure.com:443/workflows/0a862**************ced194a/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=R0_-cVHZRQNw**********0m-xl3e9YA";

async function myFunction()
{
    var data = '{"text": "'+document.getElementById("myTextarea").value +'"}';

    console.log(data)

    var jsonText = JSON.parse(data);

    console.log(jsonText);

  var xhr = new XMLHttpRequest();
  xhr.open("POST", ServerURL, true);

xhr.setRequestHeader("Content-Type", "application/json");

xhr.send(jsonText);  // fail is here so far
xhr.onreadystatechange = function() { // Call a function when the state changes.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {

        var json = JSON.parse(xhr.responseText);
        CreateTable(json);
    }
}

}
function CreateText(jsonData)
{
var textField = json;
textField = document.getElementById("textareabelow")

}

Solution

Try this :

    <html>
    <script>
    async function submit() {
    	
    	var ServerURL = "<your logic app url>";
    	var data = '{"text" : "'+ document.getElementById("myTextarea").value +'"}';
    
    	var xhr = new XMLHttpRequest();
    	xhr.open("POST", ServerURL, true);
    
    	xhr.setRequestHeader("Content-Type", "application/json");
    
    	xhr.onreadystatechange = function() { 
    		if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    			
              var textField = document.getElementById("test");
              textField.innerHTML = xhr.response
    		}
    	}
    xhr.send(data);
    }
    
    
    
    </script>
    <body>
    <input id="myTextarea" type="textarea"  />
    <input id="contact-submit" type="button"value="Submit" onclick="submit()" />
    
    <div id="test">
    
    </body>
    </html>

This is what my logic app will reply :

Result :

Hope it helps .