将 Table 列与 JSON 对象进行比较并更新 HTML 中的另一列答案

【问题标题】：Compare Table column with JSON object and update another column in HTML将 Table 列与 JSON 对象进行比较并更新 HTML 中的另一列
【发布时间】：2018-07-22 18:19:54
【问题描述】：

这是我第一次使用 HTML 和 Javascript 创建仪表板。此仪表板包含一个 HTML 表，其中包含服务器名称、服务器描述和时间 UP，警告关键列。

从 Nagios JSON 查询生成器，我将生成一个返回 JSON 值的可用性报告 URL。现在我需要比较表列中的服务描述，并通过从 JSON 输出中获取值来更新其余列。如何实现。

HTML：

<table id="service_table">
                    <thead>
                        <tr>
                            <th>Service Name</th>
                            <th>Service Desc</th>
                            <th>Time OK %</th>
                            <th>Time Warning %</th>
                            <th>Time Critical %</th>
                        </tr
                    </thead>
                     <tbody>
          <tr>
                    <td>jenkinsserver</td>
                    <td>Jenkins PROD GUI</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    </tr>
                    <tr>
                    <td>nexusserver</td>
                    <td>nexus GUI</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    </tr>
                    <tr>
                    <td>sonarserver</td>
                    <td>sonrqube GUI</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    </tr>
                    <tr>
                    <td colspan="5" class="bold" style="text-align:center">CLEARCASE</td>
                    </tr>
          <tr>
                    <td>clearcasewebserver</td>
                    <td>clearcase web</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    </tr>
                    <tr>
                    <td>clearcase server</td>
                    <td>check clearcase status</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    </tr>
                    </tbody>
                    </table>

Javascript：

function make_base_auth(user, password) {
            var tok = user + ':' + password;
            var hash = btoa(tok);
            return 'Basic ' + hash;
} 
$(document).ready(function(){

var end1 =  Math.floor((new Date).getTime()/1000);
var start1 = Math.floor(time.setDate(time.getDate() - 1)/1000);
console.log(end1);
console.log(start1);

servicereport = " http://xx.xx.xx/nagios/cgi-bin/archivejson.cgi?query=availability&availabilityobjecttype=servicegroups&hostgroup=ALM&servicegroup=ALM+Tools&assumedinitialhoststate=up&assumedinitialservicestate=ok&starttime=" + start1 + "&endtime=" + end1;
$.support.cors = true;

 $.ajax({
 type: "GET",
 url: servicereport,
 crossDomain: true,
 async: false,
 beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization',
                        make_base_auth("nagiosadmin", "nagiosadmin"));
                },

 dataType: 'json',     //data format
 success: servicedisplay
 });
function servicedisplay(series) {
  // 1. remove all existing rows

    $('#service_table tbody').empty();

    var lent = series.data.servicegroup.services;
    var aa = lent.length;
    var sm = 0;
    var avg = 0;
    for (var i=0; i<aa; i++) {
        var dataO=series.data.servicegroup.services[i].time_ok;
        var dataW=series.data.servicegroup.services[i].time_warning;
        var dataC=series.data.servicegroup.services[i].time_critical;
        var dataA=(dataO/(dataO + dataW + dataC))*100;
        sm +=dataA;
        }
        avg = sm/aa;
        if ( avg < 100 ) {
        $('#almserv').css('background-color','red');
    } else {
        $('#almserv').css('background-color','green');
        }
    $('#servnum').text(parseFloat(avg).toFixed(2));

    $.each(series.data.servicegroup.services, function (index, serv) {

  $('<tr>').append(
            $('<td>').text(parseFloat((serv.time_ok/(serv.time_ok + serv.time_warning + serv.time_critical)*100)).toFixed(2)),
            $('<td>').text(parseFloat((serv.time_warning/(serv.time_ok + serv.time_warning + serv.time_critical)*100)).toFixed(2)),
            $('<td>').text(parseFloat((serv.time_critical/(serv.time_ok + serv.time_warning + serv.time_critical)*100)).toFixed(2)),
        ).appendTo('#service_table');           
    });

【问题讨论】：

表格似乎是静态的，只是更新了警报，所以在表格的警报字段中添加一个可以从 ajax 调用中使用的 id，这样每次获取 ajax 时, 你直接更新表格的内容而不经过它。
HTML 表格的前 2 列是静态的。我需要将第二列中的值与 JSON 输出进行比较，并更新 HTML 中的第 3,4 和 5 列
这就是我的意思，添加一个像 col3+"2ndColValuel", col4+"2ndColValuel", col5+"2ndColValuel" 这样的 id，所以当你收到 ajax 结果时，你只需要得到你要去的字段比较并将其用作 col3+"ajaxField"、col4+"ajaxField"、col5+"ajaxField" 等“key”，避免比较部分并使其在时间上更有效。
知道了。能否请您分享一个代码sn-p，这对我有帮助。

标签： javascript jquery html json html-table

【解决方案1】：

我的想法可能是这样的：

<table id="service_table">
                <thead>
                    <tr>
                        <th>Service Name</th>
                        <th>Service Desc</th>
                        <th>Time OK %</th>
                        <th>Time Warning %</th>
                        <th>Time Critical %</th>
                    </tr
                </thead>
                 <tbody>
      <tr>
                <td>jenkinsserver</td>
                <td>Jenkins PROD GUI</td>
                <td><div id="Col3JPG">0.00</div></td>
                <td><div id="Col4JPG">0.00</div></td>
                <td><div id="Col5JPG">0.00</div></td>
                </tr>
                <tr>
                <td>nexusserver</td>
                <td>nexus GUI</td>
                <td><div id="Col3NG">0.00</div></td>
                <td><div id="Col4NG">0.00</div></td>
                <td><div id="Col5NG">0.00</div></td>
                </tr>
                <tr>
                <td>sonarserver</td>
                <td>sonrqube GUI</td>
                <td><div id="Col3JPG">0.00</div></td>
                <td><div id="Col4SG">0.00</div></td>
                <td><div id="Col5SG">0.00</div></td>
                </tr>
                <tr>
                <td colspan="5" class="bold" style="text-align:center">CLEARCASE</td>
                </tr>
      <tr>
                <td>clearcasewebserver</td>
                <td>clearcase web</td>
                <td><div id="Col3CW">0.00</div></td>
                <td><div id="Col4CW">0.00</div></td>
                <td><div id="Col5CW">0.00</div></td>
                </tr>
                <tr>
                <td>clearcase server</td>
                <td>check clearcase status</td>
                <td><div id="Col3CCS">0.00</div></td>
                <td><div id="Col4CCW">0.00</div></td>
                <td><div id="Col5CCW">0.00</div></td>
                </tr>
                </tbody>
                </table>

然后在您的脚本中，您可以创建一个 Switch Statement 并在那里进行比较：

for (var i=0; i<aa; i++) {
  switch(series.data.servicegroup.services[i].VariableWithCol2Content){
   case "Jenkins PROD GUI": //code for the changes
     $("#col3JPG").text(series.data.servicegroup.services[i].time_ok);
     $("#col4JPG").text(series.data.servicegroup.services[i].time_warning);
     $("#col5JPG").text(series.data.servicegroup.services[i].time_critical);
     //add all require code to update the row
   break;
   case "nexus GUI": //code for the changes
     $("#col3NG").text(series.data.servicegroup.services[i].time_ok);
     $("#col4NG").text(series.data.servicegroup.services[i].time_warning);
     $("#col5NG").text(series.data.servicegroup.services[i].time_critical);
     //add all require code to update the row
   break;
     //and so on with all of them...

【讨论】：