Экспресс приложение - создать таблицу из данных JSON. Изменить фон неудачных данных - PullRequest
0 голосов
/ 25 августа 2018

Я пытаюсь создать простое экспресс-приложение, которое отображает таблицу из файла JSON. В настоящее время я могу сгенерировать таблицу HTML с данными JSON. Значение из файла JSON является либо пропущенным, либо неудачным. Если значение не удалось, я хотел бы изменить ячейку на красный фон.

Я могу создать таблицу, но у меня возникла проблема с доступом к "неудачным" полям. Я попытался использовать вложенные циклы, чтобы получить значение, но в моем вложенном цикле постоянно появляется ошибка, что данные не определены.

Ищете идеи о том, как выбрать значения, которые показывают сбой, а затем как обновить фон ячейки таблицы.

JSON DATA

[
{
    "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>

1 Ответ

0 голосов
/ 25 августа 2018

Вы можете добавить это к Вашим td элементам

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

, если оператор проверяет, равно ли возвращенное значение "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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...