用csv解析文本定義變量的簡單方法？

Question

我正在嘗試在JavaScript中使用switch語句來從外部serverlist.csv中確定服務器狀態。如果csv讀取「online」，switch語句將顯示success.svg，如果「offline」，則switch語句顯示error.svg等等。

在switch語句中，我試圖定義與從外部CSV報告中提取信息的變量：

<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

Answer 1

我只想把服務器狀態成一個數組，比它容易操作：

var response = 'Server,Status\n\ 
 
Server1,Online\n\ 
 
Server2,Offline\n\ 
 
'; 
 
var lines = response.split('\n'); 
 
var servers = []; 
 
$.each(lines, function(l, line) { 
 
\t if(l && line) { 
 
    \t var status = line.split(','); 
 
     servers.push({ 
 
     \t 'name': status[0], 
 
      'status': status[1] 
 
     }) 
 
    }; 
 
}); 
 
var demo = $('#demo'); 
 
var demoHtml = ''; 
 
$.each(servers, function(s, server) { 
 
\t 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>

請注意，更容易控制與CSS佈局，如上面完成。也爲這個和類似的應用程序，你可以考慮使用框架Knockout是，看看here實現是多麼容易。

還在JSFiddle上的示例。