Question

This code takes data from a php file which is doing a json_encode, which is pulling info from a csv file. I would like a parent div around each group of values within the second loop. I tried this with the newDiv2, but it wrapped each .field with .sub_row.

Instead of this:

 <div class="row"> // This one happens to only have one payment
     <div class="sum_field">Total: 79.99</div>
          <div class="field">BENV5239</div> // Details of payment
          <div class="field">11111</div>
</div>
 <div class="row"> // Based on Vendor ID
     <div class="sum_field">Total: 2487.01</div> // Sums up all payments for that Vendor
     <div class="field">BENV2137</div>
     <div class="field">11111</div>
     <div class="field">BENV2137</div>
     <div class="field">111111</div>
</div>
<div class="row"></div> // Another Vendor ID

It should be this:

 <div class="row">
     <div class="sum_field">Total: 200.00</div>
     <div class="sub_row">  // one payment
          <div class="field">BENV5239</div> // Details of payment
          <div class="field">11111</div>
     </div>
</div>
 <div class="row">
     <div class="sum_field">Total: 2487.01</div>
  <div class="sub_row"> // each payment that has the same vendor id is in it's own div
     <div class="field">BENV2137</div> 
     <div class="field">11111</div>
 </div>
 <div class="sub_row">
     <div class="field">BENV2137</div>
     <div class="field">111111</div>
 </div>
</div>

PHP Code

 $(document).ready(function() {
 $.getJSON('WF-XML.php', function(data) {

    //JSON.stringify(data); 
    var prevCardCode = '';
    var newDiv;

    $.each(data, function(index, element) {
        if (element['CardCode'] != prevCardCode) {
            newDiv = $('<div/>').addClass('row').appendTo('#showdata');
            $('<div class="sum_field">' + 'Total: ' + element['payment_sum'] + '</div>').appendTo(newDiv);      
            }
        prevCardCode = element['CardCode'];

        $.each(element, function(key, value) {

            switch (key) {
                case 'InvKey':
                case 'PostDate':
                case 'City':
                break;

                default:
                //newDiv2 = $('<div/>').addClass('sub_row').appendTo('.row');
                $('<div class="field">' + value + '</div>').appendTo(newDiv);
                break;
                 }
             });
         });
     });
  });

JSON – I’m looping through this twice, the first time I’m only printing the sum (which is being calculated within the SQL and the second time to print out the rest of the info. You can see the the last 2 objects are for the same Vendor Id – therefore I would like this to put a parent div around each new Vendor and then each individual payment. My code is already wrapping each group of payment going out to one vendor with a parent div, but I can’t figure out how to wrap each individual payment with a parent div.

 {"VendorID":"BENV5239","payment_sum":"79.99","Address":"525 Sapper St.","ZipCode":"19116"},
 {"VendorID":"BENV2137","payment_sum":"2487.01","InvPayAmnt":"108.92","Address":"340 Middle Road","ZipCode":"19037"},
 {"VendorID":"BENV2137","payment_sum":"2487.01","InvPayAmnt":"57.60","Address":"340 North Middle Road","ZipCode":"19037"}

Answer 1

 $(document).ready(function() {
 $.getJSON('WF-XML.php', function(data) {

//JSON.stringify(data); 
var prevCardCode = '';
var newDiv;

$.each(data, function(index, element) {
    if (element['CardCode'] != prevCardCode) {
        newDiv = $('<div/>').addClass('row').appendTo('#showdata');
        $('<div class="sum_field">' + 'Total: ' + element['payment_sum'] + '</div>').appendTo(newDiv);      
        }
    newDiv2 = $('<div/>').addClass('sub_row').appendTo(newDiv);
    prevCardCode = element['CardCode'];

    $.each(element, function(key, value) {

        switch (key) {
            case 'InvKey':
            case 'PostDate':
            case 'City':
            break;

            default:
            //newDiv2 = $('<div/>').addClass('sub_row').appendTo('.row');
            $('<div class="field">' + value + '</div>').appendTo(newDiv2);
            break;
             }
         });
     });
 });

});