-1
ich alserstellen HTML-Tabelle aus JSON/JQuery
eine JSON bekam[{
"id": "INC0000001",
"priority": "HIGH",
"status": "Assigned"
"assignedGroup": "Ecommerce"
}, {
"id": "INC0000002",
"priority": "HIGH",
"status": "Pending"
"assignedGroup": "Backend"
}, {
"id": "INC0000003",
"priority": "CRITICAL",
"status": "In Progress"
"assignedGroup": "Backend"
}, {
"id": "INC0000004",
"priority": "LOW",
"status": "In Progress"
"assignedGroup": "Backend"
}, {
"id": "INC0000005",
"priority": "MEDIUM",
"status": "In Progress"
"assignedGroup": "Ecommerce"
}];
Die Tabelle wird wie folgt aussehen:
, nun die Werte in einer Gruppe erhalten i geändert der Code wie:
var priorities = ['low', 'high', 'medium', 'critical'];
var prioMax = priorities.length;
var statuses = ['pending', 'assigned', 'in progress'];
var statusMax = statuses.length;
$.each(responseJson, function(key, value) {
if (value.assignmentGroup == "Ecommerce"){
for (var i = 0; i < prioMax; i++) {
var prioKey = value.priority.toLowerCase();
if (prioKey === priorities[i]) {
var target = $('td').filter(function() {
if ($(this).text().toLowerCase() === prioKey) {
return true;
}
}).next('td');
var targetVal = (isNaN(target.text())) ? 0 : target.text() * 1;
target.text(++targetVal);
}
}
for (var i = 0; i < statusMax; i++) {
var statKey = value.status.toLowerCase();
if (statKey === statuses[i]) {
var target = $('td').filter(function() {
if ($(this).text().toLowerCase() === statKey) {
return true;
}
}).next('td');
var targetVal = (isNaN(target.text())) ? 0 : target.text() * 1;
target.text(++targetVal);
}
}
} else if(value.assignmentGroup == "Backend"){
for (var i = 0; i < prioMax; i++) {
var prioKey = value.priority.toLowerCase();
if (prioKey === priorities[i]) {
var target = $('td').filter(function() {
if ($(this).text().toLowerCase() === prioKey) {
return true;
}
}).next('td');
var targetVal = (isNaN(target.text())) ? 0 : target.text() * 1;
target.text(++targetVal);
}
}
for (var i = 0; i < statusMax; i++) {
var statKey = value.status.toLowerCase();
if (statKey === statuses[i]) {
var target = $('td').filter(function() {
if ($(this).text().toLowerCase() === statKey) {
return true;
}
}).next('td');
var targetVal = (isNaN(target.text())) ? 0 : target.text() * 1;
target.text(++targetVal);
}
}
}
});
und mein HTML-Code ist wie:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="15%">
<thead>
<tr>
<td colspan="4">Ecommerce</td>
</tr>
</thead>
<tbody>
<tr>
<td>Assigned</td>
<td>0</td>
<td>Critical</td>
<td>0</td>
</tr>
<tr>
<td>In Progress</td>
<td>0</td>
<td>High</td>
<td>0</td>
</tr>
<tr>
<td>Pending</td>
<td>0</td>
<td>Medium</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Low</td>
<td>0</td>
</tr>
</tbody>
</table>
<table border="1" width="15%">
<thead>
<tr>
<td colspan="4">Backend</td>
</tr>
</thead>
<tbody>
<tr>
<td>Assigned</td>
<td>0</td>
<td>Critical</td>
<td>0</td>
</tr>
<tr>
<td>In Progress</td>
<td>0</td>
<td>High</td>
<td>0</td>
</tr>
<tr>
<td>Pending</td>
<td>0</td>
<td>Medium</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Low</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>
Ich habe Probleme mit dem Verständnis der Tabellenbildung und wie man mehrere Tabellen mit den befragten JSON-Daten erstellt.
Vielen Dank für Ihre Hilfe zu diesem Thema. Es funktioniert vollkommen in Ordnung. –
Ich habe gerade meine Frage mit Ihrer Hilfe geändert und versucht, sie weiter zu verbessern. Ich bin sehr neu in jQuery und lerne von hier aus, also wenn die Fragen zu einfach sind, bitte bitte um Verzeihung. –
Ich würde vorschlagen, IDs in der Tabellenspalte, wo Sie die Werte setzen möchten .. auf diese Weise wird es einfacher sein. – four