For cycle not running properly and not being added to the HTML.

Hi All,

I'm trying to create a report based on HTML, JS, and JSON.

This is the code that I have right now:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Child Rows">
    <title></title>
	<meta charset="utf-8" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<style>
	        td.details-control {
            text-align:center;
            color:forestgreen;
    cursor: pointer;
}
tr.shown td.details-control {
    text-align:center; 
    color:red;
}
	
	</style>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js" type="text/javascript"></script>
	<script>
     $(document).ready(function () {
	 
         var table = $('#example').DataTable({
             "data": testdata.data,
             select:"single",
             "columns": [
                 {
                     "className": 'details-control',
                     "orderable": false,
                     "data": null,
                     "defaultContent": '',
                     "render": function () {
                         return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                     },
                     width:"15px"
                 },
                 { "data": "StorageVirtualMachine" },
                 { "data": "VolumeName" },
                 { "data": "SnapshotCount" },
                 { "data": "VolumeSize" },
				 { "data": "Used"},
				 { "data": "SpaceAvailable"}
             ],
             "order": [[1, 'asc']]
         });

         // Add event listener for opening and closing details
         $('#example tbody').on('click', 'td.details-control', function () {
             var tr = $(this).closest('tr');
             var tdi = tr.find("i.fa");
             var row = table.row(tr);

             if (row.child.isShown()) {
                 // This row is already open - close it
                 row.child.hide();
                 tr.removeClass('shown');
                 tdi.first().removeClass('fa-minus-square');
                 tdi.first().addClass('fa-plus-square');
             }
             else {
                 // Open this row
				 row.child(format(row.data())).show();
                 tr.addClass('shown');
                 tdi.first().removeClass('fa-plus-square');
                 tdi.first().addClass('fa-minus-square');				 
             }
         });

         table.on("user-select", function (e, dt, type, cell, originalEvent) {
             if ($(cell.node()).hasClass("details-control")) {
                 e.preventDefault();
             }
         });
     });

		function format(d,i){
			 // `d` is the original data object for the row		
			 var snapCount = d.SnapshotCount;
			for (var i = 0 ; i < snapCount; i+= 1){
			   return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
				 '<tr>' +
					 '<th>SnapshotName:</th>' +   '<th>SnapsDate:</th>' + '<th>SnapsSize:</th>' +
				 '</tr>' +
				 '<tr>' +
					 '<td>' + d.snapshotName[i] + '</td>' + 
					 '<td>' + d.snapsDate[i] + '</td>' +
					 '<td>' + d.snapsSize[i] + '</td>' +
				 '</tr>' +			
			 '</table>';
			 }
    }
    
    var testdata = {
    "data": [
	    {
        "StorageVirtualMachine":  "server",
        "VolumeName":  "XXXXXXXXX1",
        "SnapshotCount":  3,
        "Used":  "58%",
        "VolumeSize":  "          204,800.00",
        "SpaceAvailable":  "           84,585.37",
        "snapshotName":  [
                             "daily.2018-04-28_0010",
                             "daily.2018-04-29_0010",
                             "daily.2018-04-30_0010"
                         ],
        "snapsDate":  [
                          "\/Date(1524870600000)\/",
                          "\/Date(1524957000000)\/",
                          "\/Date(1525043400000)\/"
                      ],
        "snapsSize":  [
                          495616,
                          610304,
                          3235840
                      ]
    }
   
    ]
    };	
	</script>
</head>
<body>
    <table width="100%" class="display" id="example" cellspacing="0">
        <thead>
            <tr>
                <th></th>
                <th>StorageVirtualMachine</th>
                <th>VolumeName</th>
                <th>SnapshotCount</th>
                <th>VolumeSize</th>
				<th>Used</th>
				<th>SpaceAvailable</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>StorageVirtualMachine</th>
                <th>VolumeName</th>
                <th>SnapshotCount</th>
                <th>VolumeSize</th>
				<th>Used</th>
				<th>SpaceAvailable</th>
            </tr>
        </tfoot>
    </table>

</body>
</html>

Open in new window


The issue that I'm having is during the for cycle, is not showing the full array on the HTML page it only shows the position [0] of the array instead of showing and add to the table the remaining rows.

I'm not a HTML or JS programmer thats why I decided to ask for your help.

Thank you.

D.
LVL 12
David Paris VicenteSystems and Comunications Administrator Asked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
OK. What you probably need to do in your function, is to build the repeating part of your table in the for loop and then return the entire table:

function format(d){
    var table = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"><tr><th>SnapshotName:</th><th>SnapsDate:</th><th>SnapsSize:</th></tr>';

    for (var i = 0; i < d.SnapshotCount; i++) {
        table += '<tr><td>' + d.snapshotName[i] + '</td><td>' + d.snapsDate[i] + '</td><td>' + d.snapsSize[i] + '</td></tr>';
    }

    table += '</table>';

    return table;
}

Open in new window

0
 
Chris StanyonCommented:
Looks like some odd coding going on there. When a function returns, it exits, so in your format() function, as soon as it hits return for the first time it will exit out from the function. It won't then head back in and contine the loop.

From your code, I'm not entirely sure what you're tying to achieve.
0
 
David Paris VicenteSystems and Comunications  Administrator Author Commented:
Hi,

Thank for your reply and help.

I want to create a report in HTML but where we can toggle the rows when the rows are open it should show me the info inside of these arrays:
        "snapshotName":  [
                             "daily.2018-04-28_0010",
                             "daily.2018-04-29_0010",
                             "daily.2018-04-30_0010"
                         ],
        "snapsDate":  [
                          "\/Date(1524870600000)\/",
                          "\/Date(1524957000000)\/",
                          "\/Date(1525043400000)\/"
                      ],
        "snapsSize":  [
                          495616,
                          610304,
                          3235840
                      ]

I was able to do it but is not iterate the for loop with the value from the snapshot counts per volume.

I'm trying to build a snapshot report where the report should show us the number of snapshots per volume based on a JSON file.
I have built a raw HTML report but as you can imagine it has more than 50 pages due to the number of snapshots per volume and is not user-friendly.

I'm not very good with HTML or JS probably that's the reason why my code is odd, it is based on several examples that I have found online.

I have attached a screen capture.

Screen_capture
Thank you.

D.
0
 
David Paris VicenteSystems and Comunications  Administrator Author Commented:
Hi Chris,

That was perfect, it was exactly what I was looking for.

Thank you for your help and expertise.

Regards,

David
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.