jQuery code for displaying server status from XML feed I am using the below jQuery and HTML to read in and use an XML server status feed for a server widget. This is the code:

XML Feed:

&lt;status&gt;
&lt;script id="tinyhippos-injected"/&gt;
&lt;serverinfo&gt;
&lt;hostname&gt;harvey&lt;/hostname&gt;
&lt;external&gt;
http://stats.pingdom.com/3tltrr03waho/1435422/history
&lt;/external&gt;
&lt;/serverinfo&gt;
&lt;host&gt;
&lt;status&gt;OK&lt;/status&gt;
&lt;/host&gt;
&lt;service&gt;
&lt;http&gt;OK&lt;/http&gt;
&lt;ftp&gt;OK&lt;/ftp&gt;
&lt;mysql&gt;OK&lt;/mysql&gt;
&lt;pop&gt;OK&lt;/pop&gt;
&lt;imap&gt;OK&lt;/imap&gt;
&lt;smtp&gt;OK&lt;/smtp&gt;
&lt;load&gt;OK&lt;/load&gt;
&lt;/service&gt;
&lt;/status&gt;


jQuery:

$(document).ready(function() {     
    $.ajax({          
        type:  'GET',
        url:   'https://status.clook.net/xml/status/harvey.xml',
        dataType: 'xml',              
        success: function(xml){
           var http = $(xml).find('http').text();
           var ftp = $(xml).find('ftp').text();
           var mysql = $(xml).find('mysql').text();
           var load = $(xml).find('load').text();

          if(http == 'OK') {
            $(".http img").attr("src","http://placehold.it/40/00cc33/ffffff");
          }
          else if(http == 'WARNING') {
            $(".http img").attr("src","http://placehold.it/40/ff6600/000000");
          }
          else if(http == 'CRITICAL') {
            $(".http img").attr("src","http://placehold.it/40/ff0000/000000");
          }

          if(ftp == 'OK') {
            $(".ftp img").attr("src","http://placehold.it/40/00cc33/ffffff");
          }
          else if(ftp == 'WARNING') {
            $(".ftp img").attr("src","http://placehold.it/40/ff6600/000000");
          }
          else if(ftp == 'CRITICAL') {
            $(".ftp img").attr("src","http://placehold.it/40/ff0000/000000");
          }

          if(mysql == 'OK') {
            $(".mysql img").attr("src","http://placehold.it/40/00cc33/ffffff");
          }
          else if(mysql == 'WARNING') {
            $(".mysql img").attr("src","http://placehold.it/40/ff6600/000000");
          }
          else if(mysql == 'CRITICAL') {
            $(".mysql img").attr("src","http://placehold.it/40/ff0000/000000");
          }

          if(load == 'OK') {
            $(".load img").attr("src","http://placehold.it/40/00cc33/ffffff");
          }
          else if(load == 'WARNING') {
            $(".load img").attr("src","http://placehold.it/40/ff6600/000000");
          }
          else if(load == 'CRITICAL') {
            $(".load img").attr("src","http://placehold.it/40/ff0000/000000");
          }

        }
    });
});


HTML:

&lt;div class="container"&gt;
&lt;h3&gt;Server Status Widget&lt;/h3&gt;
  &lt;h4&gt;Hosting Server&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;HTTP: &lt;/strong&gt;&lt;span class="http"&gt;&lt;img src="http://placehold.it/40" alt="" /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;FTP: &lt;/strong&gt;&lt;span class="ftp"&gt;&lt;img src="http://placehold.it/40" alt="" /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MySQL: &lt;/strong&gt;&lt;span class="mysql"&gt;&lt;img src="http://placehold.it/40" alt="" /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Load: &lt;/strong&gt;&lt;span class="load"&gt;&lt;img src="http://placehold.it/40" alt="" /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;/div&gt;


The statuses can be either OK, WARNING, CRITICAL or UNKNOWN. I was going to use the default src in the HTML as the UNKNOWN image.

I would appreciate any feedback on the jQuery - it is really wordy and I am sure can be improved. All works fine currently.
Here is a proposition.
The idea is to define an object that maps the property (http, ftp...) with related images url indexed by possible property values (OK, WARNING,...). 

With this approach :


get the img src for a service : object[service_name][service_status]
get the service status : $(xml).find(service_name).text()
get the img dom element $("." + service_name + " img")


Code :

    $(document).ready(function() {  
       var config = {
            "http":{
                "OK":"http://placehold.it/40/00cc33/ffffff",
                "WARNING":"http://placehold.it/40/ff6600/000000",
                "CRITICAL":"http://placehold.it/40/ff0000/000000",
                "UNKNOWN":"/path/to/unknow"
            },
            "ftp":{
                "OK":"http://placehold.it/40/00cc33/ffffff",
                "WARNING":"http://placehold.it/40/ff6600/000000",
                "CRITICAL":"http://placehold.it/40/ff0000/000000",
                "UNKNOWN":"/path/to/unknow"
            },
            "mysql":{
                "OK":"http://placehold.it/40/00cc33/ffffff",
                "WARNING":"http://placehold.it/40/ff6600/000000",
                "CRITICAL":"http://placehold.it/40/ff0000/000000",
                "UNKNOWN":"/path/to/unknow"
            },
            "load":{
                "OK":"http://placehold.it/40/00cc33/ffffff",
                "WARNING":"http://placehold.it/40/ff6600/000000",
                "CRITICAL":"http://placehold.it/40/ff0000/000000",
                "UNKNOWN":"/path/to/unknow"
            }
        };

       function refreshView (xml) {
            for (var name in config) {
                $("." + name +" img").attr("src",config[name][$(xml).find(name).text()] );
            }   
       }

        $.ajax({          
            type:  'GET',
            url:   'https://status.clook.net/xml/status/harvey.xml',
            dataType: 'xml',              
            success: refreshView
        });
    });


You can simplify if status images are the same for all services.

var img = {
  "OK":"http://placehold.it/40/00cc33/ffffff",
  "WARNING":"http://placehold.it/40/ff6600/000000",
  "CRITICAL":"http://placehold.it/40/ff0000/000000",
  "UNKNOWN":"/path/to/unknow"
}
var services = ['http','ftp','mysql']

function refreshView (xml) {
  for (var i=0; i&lt;services.length; i++) {
    $("." + services[i] +" img").attr("src",img[ $(xml).find(services[i]).text()] );
  }
}