CODEWITHSUNDEEP
javascripthtmlrestapifrontend
Idan E
Idan E

Reputation: 1319

JavaScript - How to create reusable function for REST API requests?

I'm trying to create some UI dashboard for the web services status in my work, but I have no idea how to reuse my code for I could reuse my requests for couple of hosts and to split the response for to get the relevant "led icon".

The rational is to click on some HTML button and send a couple of REST API request in one shot. Over the response I had an IF statement to pick the relevant LED icon and present it beside the service name inside HTML dashboard.

enter image description here

My code works fine but IDK how to make it reusable.

var xhttp = new XMLHttpRequest();

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

function kongChecking() {
    //Kong - APIs services
    xhttp.open("GET", "http://blablabla.com:1111/bla1", false);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.send();
    var response = JSON.parse(xhttp.responseText);
    console.log(xhttp.status);
}


function ledResponseK() {
    if (xhttp.status === 200 || 204) {
        document.write(ledTypes.green);
    }
    else if (xhttp.status === 500 || 404) {
        document.write(ledTypes.red);
    }
    else if (xhttp.status === 300 || 301 || 302) {
        document.write(ledTypes.yellow);
    }
};

The HTML element that send all the REST API requests in one shot - 

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

The rendered response icon beside the relevant web service - 

<script>ledResponse()</script><p align="center">Kong API's</p>

Upvotes: 0

Views: 1169

Answers (1)

Ziv Weissman
Ziv Weissman

Reputation: 4536

The basic reuse of this function, only for this specific need can be done like this -

Calling a common function, with array of hosts, and dealing with each response with the same function:

var hosts = ['https://www.url1.com', 'https://www.url2.com', 'https://www.url3.com']; //Added

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

function kongChecking() {

  var xhttp = new XMLHttpRequest();
  //Kong - APIs services
  for (var hostIndx = 0; hostIndx < hosts.length; hostIndx++) {
    try {
      xhttp.open("GET", hosts[hostIndx], false);
      xhttp.setRequestHeader("Content-type", "application/json");
      xhttp.send();
      var response = JSON.parse(xhttp.responseText);
      console.log(xhttp.status);
      //Handle response: (passing the current host first child - span element
      handleLedResponse(xhttp.status, hostIndx);
    } catch (err) {
      handleLedResponse(500, hostIndx);
    }
  }
}


function handleLedResponse(response, hostIndx) {
  var curSpan = document.getElementById('host_' + hostIndx);
  //Better switch this ugly nested if's to SWITCH / CASE
  if (response === 200 || 204) {
    curSpan.innerHTML = ledTypes.green;
  } else if (response === 500 || 404) {
    curSpan.innerHTML = ledTypes.red;
  } else if (response === 300 || 301 || 302) {
    curSpan.innerHTML = ledTypes.yellow;
  }
};
div {
  width: 150px;
  display: inline-block;
}
<a href="#tabs-1" onclick="kongChecking()">Check all status</a>
<br/>
<div>Host 1 Status <span id='host_0'></span></div>
<div>Host 2 Status <span id='host_1'></span></div>
<div>Host 3 Status <span id='host_2'></span></div>

Upvotes: 1

Related Questions