How to render JSONP GET response to HTML

Question

I've tried to send GET request to a multiple hosts and to render the response status in separated foe each host. The code below it works fine for xhttp request but in case of jsonp data type (to avoid of Access-Control-Allow-Headers errors) I need to use another json type to send the request and can't use the regular function. In the code below it using ajax request and I didn't manage to use the responseHandler function to render the response status. Please your help how to correct this code.

var hosts = ['http://www.bla.com:8082/bla','http://www.bla2.com:8082/bla','http://www.bla3.com:8082/bla', 'http://www.bla4.com:8082/bla']; //Added


var ledTypes = {
    green: "<img id='logo' src='green.png' height='30' width='30'>",
    red: "<img id='logo' src='red.png' height='30' width='30'>",
    yellow: "<img id='logo' src='yellow.png' height='30' width='30'>"
};

var hostIndx = 0;

function collectionChecking() {

    for  (hostIndx < hosts.length; hostIndx++;) {
           $.ajax({
                url: hosts[hostIndx],
                dataType: "jsonp",
                jsonpCallback: "_stdout",
                cache: false,
                crossDomain: true,
                timeout: 10000,
               success: handleLedResponse(data, textStatus, jqXHR, hostIndx) { alert(data); },
               error: handleLedResponse(jqXHR, textStatus, errorThrown, hostIndx) { alert(errorThrown); }
            })
    }
}

function handleLedResponse(textStatus, hostIndx) {
    var curSpan = document.getElementById('col_host_' + hostIndx);
    if (textStatus === 200 || textStatus === 204) {
        curSpan.innerHTML = ledTypes.green;
    } else if (textStatus === 500 || textStatus === 404) {
        curSpan.innerHTML = ledTypes.red;
    } else if (textStatus === 300 || textStatus === 301 || textStatus === 302) {
        curSpan.innerHTML = ledTypes.yellow;
    }

The trigger to run this script:

 <li><a href="#tabs-2" onclick="collectionChecking()">Services status</a></li>

The response are rendered to the index.html as well

Are you trying to collect data from ``Web sockets (ws) Server`` using ajax? — Jithin Lukose, Jul 01 '17 at 14:36

score 0 · Answer 1 · answered Jul 01 '17 at 15:21

Try this code.

for(; hostIndx < hosts.length; hostIndx++) { First issue was in for loop syntax. Your loop didn't work. try console.log(hostIndx) in your loop.

   function collectionChecking() {

    for(; hostIndx < hosts.length; hostIndx++) {

           $.ajax({
                url: hosts[hostIndx],
                dataType: "jsonp",
                jsonpCallback: "_stdout",
                cache: false,
                crossDomain: true,
                timeout: 10000,
                success: function(data, textStatus, jqXHR) { handleLedResponse(textStatus, hostIndx) },
                  error: function(data, textStatus, jqXHR) { handleLedResponse(textStatus, hostIndx); }
            })
    }
}

Probably it will work, but It receives a parser errors so maybe that is the reason the status does't render.. Do you have any idea to solve this? — Idan E, Jul 01 '17 at 17:35
Check this answer https://stackoverflow.com/a/5359239/1640577. This is your issue. right ? — Jithin Lukose, Jul 02 '17 at 06:57

How to render JSONP GET response to HTML

1 Answers1