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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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
Chris StanyonWebDevCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.