Simple method to define variable with parsed text from csv?

Question

I am attempting to use a switch statement in JavaScript to determine server status from an external serverlist.csv. If the csv reads "online", switch statement displays success.svg, if "offline", switch statement displays error.svg and so forth.

In the switch statement, I am attempting to define a variable with information extracted from an external csv report:

<p id="demo"></p>

<script>
function myFunction() {
    var online = "online"
    var offline = "offline"
    var waiting = "waiting"
      var x;
    var y;
    var d = /* outcome of this variable will be extracted from serverlist.csv, but manually enter value here for now */ online;

    switch (d) {
        case 'waiting':
            x = "Waiting...";
            y = 'waiting';
            break;
        case 'online':
            x = "Online!";
            y = 'success';
            break;
        case 'offline':
            x = "Offline!";
            y = 'error';
            break;
    }
    document.getElementById("demo").innerHTML = x;
    document.getElementById(y).style.display = 'block';
}

window.onload = myFunction;
</script>

<img src="https://image.flaticon.com/icons/svg/130/130879.svg" id="success" style="display:none; width: 100px; height: 100px;"/>
<img src="https://image.flaticon.com/icons/svg/130/130877.svg" id="error" style="display:none; width: 100px; height: 100px;"/>
<img src="https://image.flaticon.com/icons/svg/130/130920.svg" id="waiting" style="display:none; width: 100px; height: 100px;"/>

https://jsfiddle.net/6o5dLfne/4/

Here is the serverlist.csv

The goal is to build a web-based dashboard. One of the things that the dashboard monitors is server status and uptime. I have a visual built out via html/css, but all the visuals are static at the moment. I want to build the dashboard to show pertinent and accurate information so if the server is online, it will display an icon like a green check mark or if it's offline, it will display an x mark. — Lasagna Cat, Apr 17 '17 at 22:26
I see code that works, so unsure what the question is. Are you asking for a better way of writing this? Are you asking how to parse the file? What are you trying to accomplish? — Waxi, Apr 17 '17 at 22:40
It is better to use JSON, but if you have to use csv, than explode the response by new lines `\r\n`, than each line by comma. — skobaljic, Apr 17 '17 at 22:43
@Waxi The code works only with manual entering of the variables, I want the toggling between success and error pictures to be automated when and if the server goes online or offline. — Lasagna Cat, Apr 18 '17 at 04:06
So then your real question is "how to read a CSV file with JavaScript". Luckily for you this has been asked numerous times before and this is just one result I found while searching: http://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript — Waxi, Apr 18 '17 at 12:27

score 1 · Answer 1 · answered Apr 17 '17 at 23:09

I would just place the server statuses into an array, than it is easy to manipulate with it:

var response = 'Server,Status\n\
Server1,Online\n\
Server2,Offline\n\
';
var lines = response.split('\n');
var servers = [];
$.each(lines, function(l, line) {
 if( l && line ) {
     var status = line.split(',');
        servers.push({
         'name': status[0],
            'status': status[1]
        })
    };
});
var demo = $('#demo');
var demoHtml = '';
$.each(servers, function(s, server) {
 demoHtml += '<p class="server-status server-' + server.status + '">' + server.name + '</p>\n'
});
demo.html( demoHtml );

.server-status::after {
    content: '';
    display: inline-block;
    margin-left: 5px;
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: 20px auto;
}
.server-Online::after {
    background-image: url('https://image.flaticon.com/icons/svg/130/130879.svg');
}
.server-Offline::after {
    background-image: url('https://image.flaticon.com/icons/svg/130/130877.svg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This demo is attempting to test out the functionality of switching images depending on server status from an external .csv report that will be generated from a powershell script. The goal is to build a responsive webpage dashboard.</p>

<div id="demo"></div>

Please note, it is easier to control the layout with CSS, as done above. Also for this and similar apps, you can consider using frameworks as Knockout is, take a look how easy the implementation is here.

Example also on JSFiddle.

Thank you for this. I'll admit, after glancing at this answer, I'm completely lost. I'm trying to figure out where can I plug my servers. Here is an example of what I'm trying to accomplish http://status.leagueoflegends.com/#na notice when the servers are online, the website displays a green check mark, but when the servers are down the servers will display a red x mark. The process is entirely automated (at least presumably) — Lasagna Cat, Apr 18 '17 at 04:07
In your question you said that server statuses are in `an external csv report` and you can get it via AJAX as shown [here](http://stackoverflow.com/questions/11409920/loading-a-csv-file-using-jquery-get-returns-the-header-but-no-data#answer-11409957) in case you also output CORS headers (more [here](http://stackoverflow.com/questions/5750696/how-to-get-a-cross-origin-resource-sharing-cors-post-request-working). You can also get data using server-side (PHP) script and again serve it for ajax requests. — skobaljic, Apr 19 '17 at 17:36
In Javascript just set [time interval](http://stackoverflow.com/questions/4930439/call-jquery-ajax-request-each-x-minutes) and call for fresh data. — skobaljic, Apr 19 '17 at 17:36

Simple method to define variable with parsed text from csv?

1 Answers1