从JSON / Jquery创建一个html表

Question

我有一个JSON为

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

表格如下所示：

现在，要获取组中的值，我将代码修改为：

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


                            }
                        });

我的HTML代码就像：

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

我无法理解表格形成部分以及如何使用浏览的json数据创建多个表格。

Answer 1

查看此演示：

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>