Here’s a JavaScript function to convert your JSON data into an HTML table, highlighting any fields marked as "error" in the keyStatus object with a red background.
function jsonToHtmlTable(data) {
if (!Array.isArray(data) || data.length === 0) {
return “<p>No data available</p>”;
}
let columns = Object.keys(data[0]).filter(key => key !== “keyStatus”);
let table = “<table border=’1′ style=’border-collapse: collapse; width: 100%;’>”;
// Header row
table += “<tr style=’background-color: #f2f2f2;’>” + columns.map(col => `<th>${col}</th>`).join(“”) + “</tr>”;
// Data rows
data.forEach(row => {
table += “<tr>”;
columns.forEach(col => {
let cellValue = row[col] || “”;
let isError = row.keyStatus && row.keyStatus[col] === “error”;
let style = isError ? “background-color: red; color: white;” : “”;
table += `<td style=’padding: 5px; ${style}’>${cellValue}</td>`;
});
table += “</tr>”;
});
table += “</table>”;
return table;
}
// Example usage
const jsonData = [
{“Internal ID”: “72266”, “Step Number”: “1”, “Status”: “0) On Dock1”, “keyStatus”: {“Status”: “error”}},
{“Internal ID”: “72879”, “Step Number”: “b”, “Status”: “3) Pending Labeling”, “keyStatus”: {“Step Number”: “error”}},
{“Internal ID”: “72880”, “Step Number”: “3”, “Status”: “4) Pending Staging 1”, “keyStatus”: {}}
];
document.body.innerHTML = jsonToHtmlTable(jsonData);
This script dynamically creates an HTML table from JSON data, marking fields flagged as "error" in red. You can embed this script into an HTML file or use it in a web application to display JSON data effectively.