создать HTML таблицу из JSON/Jquery

-1

Я получил JSON всоздать HTML таблицу из JSON/Jquery

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

Таблица будет выглядеть следующим образом:

enter image description here

Теперь, чтобы получить значения в группе я модифицированном код как:

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-данных.

источник

2016-10-31 Saptarsi Mondal

Проверить это демо:

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>

источник

2016-11-01 23:43:57 four

Большое спасибо за вашу помощь по этому вопросу. Он отлично работает. –

Я только что изменил свой вопрос с вашей помощью и попытаюсь улучшить его дальше. Я очень новичок в jquery и учился здесь, поэтому, если вопросы слишком просты, прошу прощения. –

Я бы предложил добавить id в столбец таблицы, где вы хотите поместить значения. Таким образом, это будет проще. – four

создать HTML таблицу из JSON/Jquery

ответ

Смежные вопросы