Question

我正在尝试创建一个简单的快速应用程序，该应用程序可从JSON文件呈现表格。我目前能够使用JSON数据生成HTML表。 JSON文件中的值是通过还是失败。如果该值失败，我想将单元格更改为红色背景。

我能够创建表，但是在访问“失败的”值时遇到问题。我尝试将嵌套的for循环赋值，但是在嵌套的循环中不断出错，即数据未定义。

寻找有关如何选择显示失败的值然后如何更新表格单元格背景的想法。

JSON数据

[
{
    "DC":  "SV07DC1",
    "Connectivity":  "Passed",
    "Advertising":  "Passed",
    "FRS":  "Passed",
    "DFSR":  "Passed",
    "KCCEvent":  "Passed",
    "K.R.Holders":  "Passed",
    "Mach.Acct":  "Passed",
    "NetLogons":  "Passed",
    "Obj.Repl":  "Passed",
    "Repl":  "Passed",
    "RidMgr":  "Passed",
    "Services":  "Passed",
    "SystemLog":  "Failed",
    "VerifyRef":  "Passed",
    "Loc.Check":  "Passed",
    "Intersite":  "Passed"
},
{
    "DC":  "SV07DC2",
    "Connectivity":  "Passed",
    "Advertising":  "Passed",
    "FRS":  "Passed",
    "DFSR":  "Passed",
    "KCCEvent":  "Passed",
    "K.R.Holders":  "Passed",
    "Mach.Acct":  "Passed",
    "NetLogons":  "Passed",
    "Obj.Repl":  "Passed",
    "Repl":  "Passed",
    "RidMgr":  "Passed",
    "Services":  "Passed",
    "SystemLog":  "Failed",
    "VerifyRef":  "Passed",
    "Loc.Check":  "Passed",
    "Intersite":  "Passed"
}
]

app.js文件

var express = require("express");
var app = express();
var fs = require('fs');

app.set("view engine", "ejs");
app.use(express.static("public"));

 var data; 

app.get("/", function (req, res) {
 fs.readFile('adhealth.json', 'utf8', function (err, contents) {
    if (err) {
        console.log(err);
    } else {
        data = JSON.parse(contents)
        console.log(data.length);
    }
})
res.render("index", { data: data })
})

app.listen(3000, function () {
console.log("server started");
})

最后是我的前端表数据页面

<html>

<body>


<h1 class="text-center">Table data</h1>



<table class="table table-dark table-striped table-bordered table-hover table-sm">
    <thead class="">
        <tr>
            <th>DC</th>
            <th>Connectivitiy</th>
            <th>Advertising</th>
            <th>FRS</th>
            <th>DFSR</th>
            <th>KCCEvent</th>
            <th>K.R Holders</th>
            <th>Mach.Acct</th>
            <th>NetLogons</th>
            <th>OBJ.Repl</th>
            <th>Repl</th>
            <th>RidMgr</th>
            <th>Services</th>
            <th>SystemLog</th>
            <th>VerifyRef</th>
            <th>Loc.Check</th>
            <th>Intersite</th>

        </tr>
    </thead>

    <% data.forEach(function(dc) { %>

    <tr>
        <td>
            <%= dc["DC"] %>
        </td>
        <td>
            <%= dc["Connectivity"] %>
        </td>
        <td>
            <%= dc["Advertising"] %>
        </td>
        <td>
            <%= dc["FRS"] %>
        </td>
        <td>
            <%= dc["DFSR"] %>
        </td>
        <td>
            <%= dc["KCCEvent"] %>
        </td>
        <td>
            <%= dc["K.R.Holders"] %>
        </td>
        <td>
            <%= dc["Mach.Acct"] %>
        </td>
        <td>
            <%= dc["NetLogons"] %>
        </td>
        <td>
            <%= dc["Obj.Repl"] %>
        </td>
        <td>
            <%= dc["Repl"] %>
        </td>
        <td>
            <%= dc["RidMgr"] %>
        </td>
        <td>
            <%= dc["Services"] %>
        </td>
        <td>
            <%= dc["SystemLog"] %>
        </td>
        <td>
            <%= dc["VerifyRef"] %>
        </td>
        <td>
            <%= dc["Loc.Check"] %>
        </td>
        <td>
            <%= dc["Intersite"] %>
        </td>
    </tr>
    <% }) %>


</table>

Answer 1

您可以将其添加到您的 td 元素

   <td <% if ( dc["SystemLog"] === "Failed" ){ %>
        style="background-color:red;"
        <% } %> >
        <%= dc["SystemLog"] %>
    </td>

if 语句检查返回的值是否等于“ Failed”，如果是，则将样式粘贴到该html元素

然后...您可以使这段代码更短

<table class="table table-dark table-striped table-bordered table-hover table-sm">
    <thead class="">
        <tr>
            <% for ( key in data[0] ) { %>
                <th><%= key %></th>
            <% } %>
        </tr>
    </thead>

    <% data.forEach(function(dc) { %>
        <tr>
            <% for ( key in dc ) { %>
                <td <% if ( dc[key]==="Failed" ) { %>
                    style="background-color: red;"
                    <% } %>>
                <%= dc[key] %>
                </td>
            <% } %>
        </tr>
    <% }) %>
</table>

快速应用程序-从JSON数据创建表。更改失败数据的背景

1 个答案: