How to show HTTP response in alert window?

Question

Having trouble showing the JSON response using window.alert or alert in JavaScript. I'm not a native JS coder, I apologize for the noobness. Below are a few examples I've tried based on examples I found online.

My goal is to have the JSON response appear in an alert popup window.

# example 1
<script type="text/javascript">
var client = new HttpClient();
client.get('https://website.com/json/', function(response) {
    window.alert(response);
});
</script>

# example 2
$.get('https://website.com/json/', function(responseText) {
    alert(responseText);
});


# example 3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$.get('https://website.com/json/', function(responseText) {
    alert(responseText);
});
</script>

# example 4
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://website.com/json/", true);
xhr.send();

xhr.onreadystatechange = processRequest;

function processRequest(e) {

}

Solution 1

The first problem that I can see is that the url https://website.com/json does not have a correct response.

you can for example try these links: https://jsonplaceholder.typicode.com/posts/1 or https://ipinfo.io/json

I prove your example 4 and it work perfectly.

var xhr = new XMLHttpRequest();
xhr.open('GET', "https://jsonplaceholder.typicode.com/posts/1", true);
xhr.send();

xhr.onreadystatechange = processRequest;

function processRequest(e) {
   var response=JSON.stringify(e);
   alert(response);
}

you can notice that I put the alert in the processRequest function and before display it. I used JSON.stringify to change the object e to a string. Let me knoe if that work for you.

Solution 2

When trying to display object in alert it will say [Object object]. Your response is a JSON. Stringify it, so that alert can display it.

$.get('https://website.com/json/', function(responseText) {
    alert(JSON.stringify(responseText));
});

Solution 3

I have created a sample code on jsfiddle for your scenario:

 $.ajax({
      url: "https://jsonplaceholder.typicode.com/posts/1/comments",
      type: "GET",
      dataType: "json",
      success: function(data){
        alert(JSON.stringify(data));
      } 
    });

https://jsfiddle.net/ashvinimaurya/kn3yv7Lh/7/

I'm making an ajax call and then alerting the response data after stringifying.

Comments

[Matthew Ciaramitaro]

Example two works for me using https://stackoverflow.com . Check the console for errors. It is possible you're getting a cross origin request error for requesting https from http or something

[Rory McCrossan]

Assuming the cross-domain calls you're making are to domains which include CORS headers in the response (which is a little unlikely) then what you have should work. To help debug this I would suggest first checking the console for errors after making any requests (pressing F12 in your browser should open the dev console). Also, use console.log() instead of alert(). Alerting debug information is a bad idea as it coerces all data types to a string, so what you see may not be what you actually have.