saptarsi Mondal saptarsi Mondal - 1 month ago 11
HTML Question

create a html table from JSON/Jquery

I got a JSON as

[{
"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"
}];


The Table will look like this:

enter image description here

Now, to get the values in a group i modified the code as :

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);
}
}


}
});


and my HTML code is like:

<!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>


I am having trouble with understanding the table formation part and how to create multiple tables with the groped json data.

Answer

Check this demo:

var responseJson = [{
    "id": "INC0000001",
    "priority": "HIGH",
    "status": "Assigned"
}, {
    "id": "INC0000002",
    "priority": "HIGH",
    "status": "Pending"
}, {
    "id": "INC0000003",
    "priority": "CRITICAL",
    "status": "In Progress"
}, {
    "id": "INC0000004",
    "priority": "LOW",
    "status": "In Progress"
}, {
    "id": "INC0000005",
    "priority": "MEDIUM",
    "status": "In Progress"
}];


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) {

    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);
        }
    }
});
table {
    width: 300px;
}

td:nth-child(even) {
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>