Trying to understand $.each()
I need a logic check or what I am trying to can't be done this way.
I can't explain this except to show you Code and Output.
Each Invoice should be shown. Only the last one is. I've been trying to figure the logic for several days and can't get it. Maybe I'm too close to this and can't see some obvious fix.
Thanks, R
- <!DOCTYPE html>
<!-- This version 3 Aug 2014 writes table to screen -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> Feeder program for beta.v4-report1.php - 28Jul2014 </title>
<!-- ============== styles ================ -->
<!-- ============== scripts1 ================ -->
<script type="text/javascript" src="../../jquery/jquery-1.9.1.js"></script>
</head>
<body>
<!-- =============== html ================== -->
<form id="myForm" action="#" method="post" >
<label for='inv'>Invoice No:</label>
<input type="text" name="inv" id='inv' size="30" />
<label for='year'>Year:</label>
<input type="text" name="year" id='year' />
<button type="button" name="getinv" id="getinv" >Get Invoices</button>
<button type="button" name="exit" id="exit" >Exit</button>
</form>
<div id='div1'>
</div>
<!-- =============== scripts2 ================ -->
<script type="text/javascript" >
$('button[id="getinv"]').click( function() {
//successMsgShow(); // commented out for testing testing testing
//$.ajax({
//type: "POST",
//url: "beta.v4-report1.php",
//data: $('#myForm').serialize(),
//success: showTable
//testing only
showTable();
})
$('button[name="exit"]').click (function() { window.location.href='ExitProgram.php'; });
</script>
<!-- ============ Function showTable =================== -->
<script type="text/javascript">
//function showTable(acctData) {
function showTable() { // testing testing testing - only
var acctData={}; // testing testing testing - only
acctData=[{"invNo":"03063","datepick":"2014-07-18","year":"2014","description":"Shop Towel","cost":"2.28","tax":"0.14","vendor":"Home Depot"},
{"invNo":"03063","datepick":"2014-07-18","year":"2014","description":"Sanding Discs","cost":"19.94","tax":"1.20","vendor":"Home Depot"},
{"invNo":"03063","datepick":"2014-07-18","year":"2014","description":"Calking","cost":"7.54","tax":"0.45","vendor":"Home Depot"},
{"invNo":"18985","datepick":"2014-07-21","year":"2014","description":"White Paint","cost":"33.98","tax":"2.04","vendor":"Home Depot"},
{"invNo":"J31464\/B","datepick":"2014-06-22","year":"2014","description":"14 ga. Wire Mesh","cost":"25.99","tax":"1.56","vendor":"Big R"},
{"invNo":"J31464\/B","datepick":"2014-06-22","year":"2014","description":"Fertilizer","cost":"5.99","tax":"0.36","vendor":"Big R"},
{"invNo":"J31464\/B","datepick":"2014-06-22","year":"2014","description":"Deer\/Rabbit Repellant - Concentrate","cost":"34.99","tax":"2.10","vendor":"Big R"},
{"invNo":"J31464\/B","datepick":"2014-06-22","year":"2014","description":"Fruit Tree Spray","cost":"19.99","tax":"1.20","vendor":"Big R"},
{"invNo":"J31464\/B","datepick":"2014-06-22","year":"2014","description":"Plants","cost":"3.87","tax":"0.23","vendor":"Big R"}];
var zz=$('#year').val(); // to show year
var myobj={};
var table_str = "";
var invKey=Array();
var invValue=Array();
var invAll=Array();
var prev="";
var i=0;
var j=0;
var k=0;
$.map(acctData[0], function(v,k){ // gets invoice keys
invKey.push(k);
});
$.each(acctData, function() { // get the invoice values
console.log("inv ... prev "+this['invNo']+" ..."+prev); // testing testing testing - only
if(this['invNo']!=prev) {
table_str = "<table class='center' border='4' cellspacing='6' cellpadding='4' bgcolor='#fff99d' ><br/>";
table_str+="<caption> Invoice No. "+this['invNo']+" Dated "
+this['datepick']+" From "+this['vendor']+"</caption>";
table_str+="<tr><th>Description</th><th>Cost</th><th>Tax</th></th></tr>";
prev=this['invNo'];
} // this
for( var i=1; i<invKey.length; i++) { // write Row Desc Cost Tax - checks 7 keys prints 3
if(i==3) table_str+="<tr><td>"+this[invKey[3]]+"</td>";
if(i==4) table_str+="<td>"+this[invKey[4]]+"</td>";
if(i==5) table_str+="<td>"+this[invKey[5]]+"</td></tr>";
}
}); // each
table_str+="</table>";
$("#div1").append(table_str + "<p></p>");
} // showTable
</script>
</body>
</html>