How to iterate over an object containing arrays in JavaScript?

Question

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.

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.

`empty dicts` - what does this mean? – Aydin4ik Sep 06 '17 at 01:46 — Aydin4ik, Sep 06 '17 at 01:46
no elements, just a `{}` with no elements – abautista Sep 06 '17 at 01:47 — abautista, Sep 06 '17 at 01:47

Aydin4ik · Answer 1 · 2017-09-06T02:13:49.500

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.

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>

You shouldn't do `== {}` - In JavaScript `{}` is a new object every time, so it'll always fail. Since `table_values` is an array, a much easier solution is to just test it's length: `table_values.length > 0`. I've proposed an edit to the question to reflect this. — Gareth Jones, Sep 06 '17 at 01:50
@AlejandroBautistaRamos @Aydin If you ever need to do `== {}` you can use `JSON.stringify` on both sides first as a quick and dirty method. See this q/a for more elegant ways: https://stackoverflow.com/questions/679915 — Gareth Jones, Sep 06 '17 at 01:53
When doing jQuery selectors that involve ids, it's always more efficient to do the id selector first, and call `.find()` on the results: `$('#reservations').find('tbody')` instead of `$('#reservations tbody')`, since for ids jQuery just uses the native getElementById method. — Gareth Jones, Sep 06 '17 at 02:00
Plus there is no reason to have the `setTable()` function within the `for` loop - just fixed it. I was just trying to point out how to iterate through the array, not providing an overall code improvement review :) — Aydin4ik, Sep 06 '17 at 02:16
I received no data in the rows and the console.log() displays `{} {}` — abautista, Sep 06 '17 at 02:50
How did you implement it? If you click on Run Code Snippet, it works a charm. — Aydin4ik, Sep 06 '17 at 02:52
Just noticed the problem. The rows appear in blank but when you type any letter in the search bar you see the results. The search bar is not implemented in the code snippet. — abautista, Sep 06 '17 at 03:01

score 1 · Accepted Answer · answered Sep 06 '17 at 01:57

1

Flatten your Array of records.
Filter out any elements which do not have an "id".

I have modified your fiddle by adding a map and filter statement to accomplish 1 and 2: http://jsfiddle.net/8a6858b6/1/

Is flattening a sufficient strategy, or are you trying to preserve the Array structure of your table data?

answered Sep 06 '17 at 01:57

Peter

96
3

Doing the Flatten of Array records can make the trick that I want. – abautista Sep 06 '17 at 02:00
I implemented your solution but I received no data. – abautista Sep 06 '17 at 02:44

How to iterate over an object containing arrays in JavaScript?

2 Answers2