[英]How to iterate over an object containing arrays in JavaScript?
I have the following JSON structure (an array that contains arrays where each array holds a dict element) that I receive from a function based view and I want to iterate through all the elements and discard those that are arrays with empty dictionaries. 我有以下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'}]]
I know how to iterate through the all values of one array element but I do not know how to iterate through all the values of all the arrays. 我知道如何遍历一个数组元素的所有值,但我不知道如何遍历所有数组的所有值。
//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>
How can I iterate through all the arrays and discard those that contain arrays with empty dicts? 如何遍历所有数组并丢弃包含空格的数组?
Feel free to use this JS Fiddle that I prepared, so you can do some tests. 请随意使用我准备的JS Fiddle ,以便您可以进行一些测试。
You would like to iterate through the data.table_values array and test each element to see if it is blank - if it is, then skip the iteration. 您想遍历data.table_values数组并测试每个元素以查看其是否为空-如果为空,则跳过迭代。
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); }); }
<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>
I have modified your fiddle by adding a map
and filter
statement to accomplish 1 and 2: http://jsfiddle.net/8a6858b6/1/ 我已经通过添加
map
和filter
语句来完成1和2来修改您的提琴, http : //jsfiddle.net/8a6858b6/1/
Is flattening a sufficient strategy, or are you trying to preserve the Array structure of your table data? 扁平化是一个足够的策略,还是您要保留表数据的Array结构?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.