如何在JavaScript中迭代包含数组的对象?

时间:2017-09-06 01:42:47

标签: javascript jquery arrays json

我有以下JSON结构(一个包含数组,其中每个数组都包含一个dict元素的数组)我从基于函数的视图中获取,我想迭代所有元素并丢弃那些这是具有空字典的数组。

data.table_values = [[{'id': 1021972,'Aging_Un_investigated_Issue': '0.94', 
'User': 'John P.', 'Open_date':'2017-08-04 01:34:18','End_date':'2017-09-05 00:29:01', 
'Ticket_status':'Transferred'},{'id': 1036722, 'Aging_Un_investigated_Issue': '0.01', 
'User': 'John P.', 'Open_date':'2017-09-01 00:34:18',
'End_date':'', 'Ticket_status':'Researching'},{'id': 1015621, 
'Aging_Un_investigated_Issue': '0.11', 'User': 'John D.','Open_date':'2017-01-01 00:00:18',
'End_date':'2017-09-01 20:20:57','Ticket_status':'Closed'}],
[{}],
[{}],
[{'id': 1045971,'Aging_Un_investigated_Issue': '0.23', 
'User': 'John C.', 'Open_date':'2016-05-01 02:32:18','End_date':'2017-09-05 12:29:01', 
'Ticket_status':'Transferred'},{'id': 1035522, 'Aging_Un_investigated_Issue': '0.02', 
'User': 'John C.', 'Open_date':'2015-08-01 00:34:18',
'End_date':'', 'Ticket_status':'Researching'},{'id': 1223621, 
'Aging_Un_investigated_Issue': '0.11', 'User': 'John C.','Open_date':'2016-01-01 00:00:18',
'End_date':'2017-09-02 21:20:57','Ticket_status':'Closed'}]]

我知道如何遍历一个数组元素的所有值,但我不知道如何遍历所有数组的所有值。

//iterate through all the values of one array element 

<script>
    //select the first list element
   //data.table_values is the variable that receives the JSON 
    var table_values = data.table_values[0]
    setTable()

    function setTable(){
    var tbody = $('#reservations tbody'),
    //iterate through the elements of list 0
    props = ["id", "User", "Open_date", "Ticket_status", "End_date"];
    $.each(table_values, function(i, value) {
        var tr = $('<tr>');
        $.each(props, function(i, prop) {
            $('<td>').html(value[prop]).appendTo(tr);
        });
        tbody.append(tr);
    });

    $(document).ready(function(){
    $('#reservations').DataTable();
    });
  }
</script>

<html>
<table id="reservations" style="width:100%">
<thead>
<tr>
   <th>ID</th>
   <th>User</th>
   <th>Open Date</th>
   <th>Ticket Status</th>
   <th>End Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</html>

如何遍历所有数组并丢弃包含空dicts数组的数组?

随意使用我准备的JS Fiddle,以便您可以进行一些测试。

2 个答案:

答案 0 :(得分:1)

您希望遍历data.table_values数组并测试每个元素以查看它是否为空 - 如果是,则跳过迭代。

&#13;
&#13;
var data = {}; // Assuming that you have data declared before - 
               // I just need this one here to make the snippet work
data.table_values = [
[{
	'id': 1021972,
	'Aging_Un_investigated_Issue': '0.94',
	'User': 'John P.',
	'Open_date': '2017-08-04 01:34:18',
	'End_date': '2017-09-05 00:29:01',
	'Ticket_status': 'Transferred'
}, {
	'id': 1036722,
	'Aging_Un_investigated_Issue': '0.01',
	'User': 'John P.',
	'Open_date': '2017-09-01 00:34:18',
	'End_date': '',
	'Ticket_status': 'Researching'
}, {
	'id': 1015621,
	'Aging_Un_investigated_Issue': '0.11',
	'User': 'John D.',
	'Open_date': '2017-01-01 00:00:18',
	'End_date': '2017-09-01 20:20:57',
	'Ticket_status': 'Closed'
}], [{}], [{}], [{
	'id': 1045971,
	'Aging_Un_investigated_Issue': '0.23',
	'User': 'John C.',
	'Open_date': '2016-05-01 02:32:18',
	'End_date': '2017-09-05 12:29:01',
	'Ticket_status': 'Transferred'
}, {
	'id': 1035522,
	'Aging_Un_investigated_Issue': '0.02',
	'User': 'John C.',
	'Open_date': '2015-08-01 00:34:18',
	'End_date': '',
	'Ticket_status': 'Researching'
}, {
	'id': 1223621,
	'Aging_Un_investigated_Issue': '0.11',
	'User': 'John C.',
	'Open_date': '2016-01-01 00:00:18',
	'End_date': '2017-09-02 21:20:57',
	'Ticket_status': 'Closed'
}]
];

for(table_values of data.table_values) {
    if( table_values.length == 0 ) continue;
    setTable();
}

function setTable(){
    var tbody = $('#reservations').find('tbody'),
    //iterate through the elements of list 0
    props = ["id", "User", "Open_date", "Ticket_status", "End_date"];
    $.each(table_values, function(i, value) {
       var tr = $('<tr>');
        $.each(props, function(i, prop) {
            $('<td>').html(value[prop]).appendTo(tr);
        });
        tbody.append(tr);
    });
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="reservations" style="width:100%">
<thead>
<tr>
   <th>ID</th>
   <th>User</th>
   <th>Open Date</th>
   <th>Ticket Status</th>
   <th>End Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

  1. Flatten your Array of records
  2. 过滤掉任何没有&#34; id&#34;。
  3. 的元素

    我通过添加mapfilter语句来完成1和2来修改你的小提琴:http://jsfiddle.net/8a6858b6/1/

    是否展平了足够的策略,或者您是否试图保留表数据的Array结构?

相关问题