How do I fill in empty html table spaces with <td></td> so my JSON data lines up properl-CodePudding

How do I display JSON data in an HTML table and fill in the empty spaces with <td></td>? In the following HTML table, "modality" is in the wrong column. It should be under the column date "05/18/22 12:50" but instead it shows up under the "05/18/22 12:56" date column because I don't have empty <td></td> to fill in the spaces. The first column "Treatment Name" should stay the same but there will be many date/time columns and the data in the date/time columns will vary. Can someone show how do I fill in the empty table data fields so that the data lines up properly?

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

</head>
<style>
table, th, td {border-collapse:collapse; border: 1px solid black;}
/*table { empty-cells: show;}*/
.coloredMedRow {background: #f0f0f0;}
.normalMedRow {background: #d0d0d0;}
</style>
<body>
<hr />
Radiation Oncology
<hr />
<div>
<p id="output"></p>
</div>

<script>
  function isEven(n) {
     return n % 2 == 0;
  }

//*********************************************JSON below here:*********************************************
var radonc1 = '{"RADIATION_ONC1":{"RADIATION_CNT":1,"RADIATION_ARR":[{"RETURNED_PERSON_ID":48876878.000000,"RETURNED_NAME_FULL_FORMATTED":"ZZZTEST, FOOD TEST","RETURNED_ENCOUNTER_ID":165820945.000000,"RETURNED_ENCOUNTER_TYPE":"Clinic","RETURNED_MRN":"2774392","RETURNED_FIN":"11234853"}],"RADIATION_ONC_CNT":23,"QUAL":[{"RADIATIONCD":5989260393.000000,"RADIATIONDISP":"Radiation Oncologist"},{"RADIATIONCD":6080428113.000000,"RADIATIONDISP":"Type of Radiation"},{"RADIATIONCD":6080428249.000000,"RADIATIONDISP":"Radiation Site of Treatment"},{"RADIATIONCD":6080428477.000000,"RADIATIONDISP":"Radiation Total Dose"},{"RADIATIONCD":6080428671.000000,"RADIATIONDISP":"Radiation Daily Fractionated Dose"},{"RADIATIONCD":7461824257.000000,"RADIATIONDISP":"Radiation Therapy Oncology(RTOG) Grading"},{"RADIATIONCD":8171645925.000000,"RADIATIONDISP":"Radiation Course Number"},{"RADIATIONCD":8171645943.000000,"RADIATIONDISP":"RadiationTreatment Intent"},{"RADIATIONCD":8171645961.000000,"RADIATIONDISP":"Radiation Modality"},{"RADIATIONCD":8171645979.000000,"RADIATIONDISP":"Radiation Target"},{"RADIATIONCD":8171646003.000000,"RADIATIONDISP":"Radiation Fractions"},{"RADIATIONCD":8171646021.000000,"RADIATIONDISP":"Radiation Notes"},{"RADIATIONCD":8171646041.000000,"RADIATIONDISP":"Radiation Treatment Status"},{"RADIATIONCD":8171646061.000000,"RADIATIONDISP":"Radiation Treatment Diagnosis"},{"RADIATIONCD":8171646079.000000,"RADIATIONDISP":"Radiation Fraction Pattern"},{"RADIATIONCD":8171646099.000000,"RADIATIONDISP":"Radiation Treatment Start Date"},{"RADIATIONCD":8171646119.000000,"RADIATIONDISP":"Radiation Last Treatment Day"},{"RADIATIONCD":8171646137.000000,"RADIATIONDISP":"Radiation Treatment Elapsed Days"},{"RADIATIONCD":8171646155.000000,"RADIATIONDISP":"Radiation Current Fraction"},{"RADIATIONCD":8171646173.000000,"RADIATIONDISP":"Radiation Total Planned Fraction"},{"RADIATIONCD":8171646191.000000,"RADIATIONDISP":"Radiation Fractional Dose"},{"RADIATIONCD":8171646209.000000,"RADIATIONDISP":"Radiation Total Dose Received"},{"RADIATIONCD":8171646227.000000,"RADIATIONDISP":"Radiation Total Dose Planned"}],"DATECNT":2,"DATE":[{"DATEVAL":"05\/18\/22 12:56"},{"DATEVAL":"05\/18\/22 12:50"}],"TREATMENTCNT":19,"QUAL1":[{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"ONCOLOGIST MD, BILLYBOB","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"1","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Modality","TREATMENTCD":"8171645961","TREATMENTRESULT":"modality","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"xmcnvbcvmnbxcv","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"PHYSICIAN DO, X","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"2","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"Notes section","TREATMENTDTTM":"05\/18\/22 12:56"}],"STATUS_DATA":{"STATUS":"S","SUBEVENTSTATUS":[{"OPERATIONNAME":"","OPERATIONSTATUS":"","TARGETOBJECTNAME":"","TARGETOBJECTVALUE":""}]}}}';
//*********************************************JSON above here:************************************************************

//JSON setup.
var RO = JSON.parse(radonc1);
var recordData = RO.RADIATION_ONC1;

var tempStr=[];

if(recordData.TREATMENTCNT > 0) {
        tempStr.push("<div id = 'antiBioScroll'>");
        tempStr.push("<table class ='antiBioTable'>");
        tempStr.push("<th rowspan='2'>Treatment Name</th><th class = 'antiStartRow antiStartHead' align='left' colspan='",recordData.DATECNT,"'>Treatment Date/Time</th>");
      tempStr.push("<tr>");
var columns = recordData.DATECNT;
var rows = recordData.RADIATION_ONC_CNT;
//for (r = 0; r < rows; r  ) {
for(var x=0,date_cnt=recordData.DATECNT;x<date_cnt;x  ){
            tempStr.push("<th class='antiBioDate'>",recordData.DATE[x].DATEVAL,"</th>"); //Write out column headers with dateval.
            //console.log(recordData.DATE[x].DATEVAL);
    }
//for (c = 0; c < columns; c  ) {

            tempStr.push("</tr>"); //End header row.
for(var i=0,cat_cnt=recordData.RADIATION_ONC_CNT;i<cat_cnt;i  ){
           if(isEven(i))
           {
             var medRow = 'normalMedRow';
           }
           else{
             var medRow = 'coloredMedRow';
           }
       tempStr.push("<tr class = "   medRow   "><td class='bold antiBioMed'>",recordData.QUAL[i].RADIATIONDISP,"</td>"); //First column of treatment names.
                var radcode = recordData.QUAL[i].RADIATIONCD; //Shorthand for radiation code.
                //console.log("radcode: "   radcode);
       if(recordData.DATECNT > 0){ //Check if something was charted.
       for(var dt=0,d=recordData.DATECNT;dt<d;dt  ){ //Get how many date/times something was charted.
        var dhead = recordData.DATE[dt].DATEVAL; //Shorthand for date/time.
        for(var a=0,aa=recordData.TREATMENTCNT;a<aa;a  ){ //Get treatments that were charted.
        var tdate = recordData.QUAL1[a].TREATMENTDTTM; //Shorthand for treatment date.
        var treatcode = recordData.QUAL1[a].TREATMENTCD; //Shorthand for treatment code.
            if(radcode == treatcode && dhead == tdate){//Line everything up.
            tempStr.push("<td>",recordData.QUAL1[a].TREATMENTRESULT,"</td>");//Display results.
       //tempStr.push("<td>",recordData.QUAL1[a].TREATMENTRESULT,"(",dhead, "==", tdate,")","</td>");//Display display date along with treatment.
                }
                }
            }
        }

       tempStr.push("</tr>");
    }
       tempStr.push("</table>");
}
else {
    tempStr.push("<table><tr><td>No data to display</td></tr></table>");
}
document.getElementById("output").innerHTML = tempStr.join("");
</script>

<script>
console.log("RADIATION_ONC_CNT: "   recordData.RADIATION_ONC_CNT);
console.log("DATECNT: "   recordData.DATECNT);
console.log("TREATMENTCNT: "   recordData.TREATMENTCNT);
//console.log("TREATMENTNAME: "   recordData.QUAL1[0].TREATMENTNAME);
//console.log("TREATMENTCD: "   recordData.QUAL1[0].TREATMENTCD);
//console.log("TREATMENTRESULT: "   recordData.QUAL1[0].TREATMENTRESULT);
//console.log("TREATMENTDTTM: "   recordData.QUAL1[0].TREATMENTDTTM);
//console.log(RADIATIONCD": "   recordData.QUAL[0].RADIATIONCD);
//console.log("RADIATIONDISP: "   recordData.QUAL[0].RADIATIONDISP);
//console.log("DATEVAL: "   recordData.DATE[0].DATEVAL);
console.log("columns: "   columns);
console.log("rows: "   rows);
</script>
</body>
</html>

CodePudding user response：

I believe this will satisfy what you are trying to achieve. In order to keep the data aligned w/ the date columns, I first looped through known dates (the 2 under DATE property) and created object keys on dateGroups with the unique dates, and then set those date key's values as empty arrays. I then looped through all QUAL1 treatment objects, and used the TREATMENTDTTM property value to check if the date on the object exists as one of our object keys;

if it does exist, then push the treatment object to the array associated with that date key. From there, when looping through the QUAL row headers, we can then loop through our known dates again (x2, and this always assumes that the date headers order matches the same order we are looping through again), pass the associated QUAL radiation code and the matching dateGroup array of treatment objects to the mapDateColumns function, which will then try to match a treatment record using the radiation code; if a match found, return the TREATMENTRESULT, else return empty <td></td>.

I tried to add code comments on the new logic that is handling the groupings / rendering of table data. I will say, that some of the looping/processing logic may benefit further by breaking it out into separate functions that build out the table data, etc. Please let me know if you have any questions!

var radonc1 = '{"RADIATION_ONC1":{"RADIATION_CNT":1,"RADIATION_ARR":[{"RETURNED_PERSON_ID":48876878.000000,"RETURNED_NAME_FULL_FORMATTED":"ZZZTEST, FOOD TEST","RETURNED_ENCOUNTER_ID":165820945.000000,"RETURNED_ENCOUNTER_TYPE":"Clinic","RETURNED_MRN":"2774392","RETURNED_FIN":"11234853"}],"RADIATION_ONC_CNT":23,"QUAL":[{"RADIATIONCD":5989260393.000000,"RADIATIONDISP":"Radiation Oncologist"},{"RADIATIONCD":6080428113.000000,"RADIATIONDISP":"Type of Radiation"},{"RADIATIONCD":6080428249.000000,"RADIATIONDISP":"Radiation Site of Treatment"},{"RADIATIONCD":6080428477.000000,"RADIATIONDISP":"Radiation Total Dose"},{"RADIATIONCD":6080428671.000000,"RADIATIONDISP":"Radiation Daily Fractionated Dose"},{"RADIATIONCD":7461824257.000000,"RADIATIONDISP":"Radiation Therapy Oncology(RTOG) Grading"},{"RADIATIONCD":8171645925.000000,"RADIATIONDISP":"Radiation Course Number"},{"RADIATIONCD":8171645943.000000,"RADIATIONDISP":"RadiationTreatment Intent"},{"RADIATIONCD":8171645961.000000,"RADIATIONDISP":"Radiation Modality"},{"RADIATIONCD":8171645979.000000,"RADIATIONDISP":"Radiation Target"},{"RADIATIONCD":8171646003.000000,"RADIATIONDISP":"Radiation Fractions"},{"RADIATIONCD":8171646021.000000,"RADIATIONDISP":"Radiation Notes"},{"RADIATIONCD":8171646041.000000,"RADIATIONDISP":"Radiation Treatment Status"},{"RADIATIONCD":8171646061.000000,"RADIATIONDISP":"Radiation Treatment Diagnosis"},{"RADIATIONCD":8171646079.000000,"RADIATIONDISP":"Radiation Fraction Pattern"},{"RADIATIONCD":8171646099.000000,"RADIATIONDISP":"Radiation Treatment Start Date"},{"RADIATIONCD":8171646119.000000,"RADIATIONDISP":"Radiation Last Treatment Day"},{"RADIATIONCD":8171646137.000000,"RADIATIONDISP":"Radiation Treatment Elapsed Days"},{"RADIATIONCD":8171646155.000000,"RADIATIONDISP":"Radiation Current Fraction"},{"RADIATIONCD":8171646173.000000,"RADIATIONDISP":"Radiation Total Planned Fraction"},{"RADIATIONCD":8171646191.000000,"RADIATIONDISP":"Radiation Fractional Dose"},{"RADIATIONCD":8171646209.000000,"RADIATIONDISP":"Radiation Total Dose Received"},{"RADIATIONCD":8171646227.000000,"RADIATIONDISP":"Radiation Total Dose Planned"}],"DATECNT":2,"DATE":[{"DATEVAL":"05\/18\/22 12:56"},{"DATEVAL":"05\/18\/22 12:50"}],"TREATMENTCNT":19,"QUAL1":[{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"ONCOLOGIST MD, BILLYBOB","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"1","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Modality","TREATMENTCD":"8171645961","TREATMENTRESULT":"modality","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"xmcnvbcvmnbxcv","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"PHYSICIAN DO, X","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"2","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"Notes section","TREATMENTDTTM":"05\/18\/22 12:56"}],"STATUS_DATA":{"STATUS":"S","SUBEVENTSTATUS":[{"OPERATIONNAME":"","OPERATIONSTATUS":"","TARGETOBJECTNAME":"","TARGETOBJECTVALUE":""}]}}}';


//JSON setup.
var RO = JSON.parse(radonc1);
var recordData = RO.RADIATION_ONC1;
var tempStr = [];

function isEven(n) {
  return n % 2 == 0;
}

// if we find a matching radiation code in our date grouping, return the treatment result, else return empty <td>
function mapDateColumns(radiationCode, dateGroup) {
  for (var group in dateGroup) {
    if (dateGroup[group].TREATMENTCD == radiationCode) {
      return '<td>'   dateGroup[group].TREATMENTRESULT   '</td>';
    }
  }
  return '<td></td>';
}

if (recordData.TREATMENTCNT > 0) {
  tempStr.push("<div id='antiBioScroll'>");
  tempStr.push("<table class='antiBioTable'>");
  tempStr.push("<th rowspan='2'>Treatment Name</th><th class = 'antiStartRow antiStartHead' align='left' colspan='", recordData.DATECNT, "'>Treatment Date/Time</th>");
  tempStr.push("<tr>");
  var columns = recordData.DATECNT;
  var rows = recordData.RADIATION_ONC_CNT;
  var dateGroups = {};

  for (var x = 0, date_cnt = recordData.DATECNT; x < date_cnt; x  ) {
    tempStr.push("<th class='antiBioDate'>", recordData.DATE[x].DATEVAL, "</th>"); //Write out column headers with dateval.
    // store unique grouping of dates as keys in object for later processing below
    var dateVal = recordData.DATE[x].DATEVAL;
    dateGroups[dateVal] = [];
  }

  tempStr.push("</tr>"); //End header row.

  // loop through all treatments and group them based on their date (matching the object keys set above)
  for (var a = 0, aa = recordData.TREATMENTCNT; a < aa; a  ) { //Get treatments that were charted.
    var tdate = recordData.QUAL1[a].TREATMENTDTTM; //Shorthand for treatment date.
    if (dateGroups[tdate]) {
      dateGroups[tdate].push(recordData.QUAL1[a]);
    }
  }

  for (var i = 0, cat_cnt = recordData.RADIATION_ONC_CNT; i < cat_cnt; i  ) {
    if (isEven(i)) {
      var medRow = 'normalMedRow';
    } else {
      var medRow = 'coloredMedRow';
    }
    tempStr.push("<tr class = "   medRow   "><td class='bold antiBioMed'>", recordData.QUAL[i].RADIATIONDISP, "</td>"); //First column of treatment names.
    // Loop through our known dates, pass the matching date grouping and radiation code
    for (var dt = 0, d = recordData.DATECNT; dt < d; dt  ) { //Get how many date/times something was charted.
      var dhead = recordData.DATE[dt].DATEVAL;
      // if we find a matching radiation code in our date grouping, return the treatment result, else return empty <td>
      tempStr.push(mapDateColumns(recordData.QUAL[i].RADIATIONCD, dateGroups[dhead]));
    }
  }
  tempStr.push("</table>");
} else {
  tempStr.push("<table><tr><td>No data to display</td></tr></table>");
}
tempStr.push("</div>");

document.getElementById("output").innerHTML = tempStr.join("");

<html>

<head>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

</head>
<style>
  table,
  th,
  td {
    border-collapse: collapse;
    border: 1px solid black;
  }
  /*table { empty-cells: show;}*/
  
  .coloredMedRow {
    background: #f0f0f0;
  }
  
  .normalMedRow {
    background: #d0d0d0;
  }
</style>

<body>
  <hr /> Radiation Oncology
  <hr />
  <div>
    <p id="output"></p>
  </div>

</body>

</html>

CodePudding user response：

a simpliest way to do that...

var radonc1 = '{"RADIATION_ONC1":{"RADIATION_CNT":1,"RADIATION_ARR":[{"RETURNED_PERSON_ID":48876878.000000,"RETURNED_NAME_FULL_FORMATTED":"ZZZTEST, FOOD TEST","RETURNED_ENCOUNTER_ID":165820945.000000,"RETURNED_ENCOUNTER_TYPE":"Clinic","RETURNED_MRN":"2774392","RETURNED_FIN":"11234853"}],"RADIATION_ONC_CNT":23,"QUAL":[{"RADIATIONCD":5989260393.000000,"RADIATIONDISP":"Radiation Oncologist"},{"RADIATIONCD":6080428113.000000,"RADIATIONDISP":"Type of Radiation"},{"RADIATIONCD":6080428249.000000,"RADIATIONDISP":"Radiation Site of Treatment"},{"RADIATIONCD":6080428477.000000,"RADIATIONDISP":"Radiation Total Dose"},{"RADIATIONCD":6080428671.000000,"RADIATIONDISP":"Radiation Daily Fractionated Dose"},{"RADIATIONCD":7461824257.000000,"RADIATIONDISP":"Radiation Therapy Oncology(RTOG) Grading"},{"RADIATIONCD":8171645925.000000,"RADIATIONDISP":"Radiation Course Number"},{"RADIATIONCD":8171645943.000000,"RADIATIONDISP":"RadiationTreatment Intent"},{"RADIATIONCD":8171645961.000000,"RADIATIONDISP":"Radiation Modality"},{"RADIATIONCD":8171645979.000000,"RADIATIONDISP":"Radiation Target"},{"RADIATIONCD":8171646003.000000,"RADIATIONDISP":"Radiation Fractions"},{"RADIATIONCD":8171646021.000000,"RADIATIONDISP":"Radiation Notes"},{"RADIATIONCD":8171646041.000000,"RADIATIONDISP":"Radiation Treatment Status"},{"RADIATIONCD":8171646061.000000,"RADIATIONDISP":"Radiation Treatment Diagnosis"},{"RADIATIONCD":8171646079.000000,"RADIATIONDISP":"Radiation Fraction Pattern"},{"RADIATIONCD":8171646099.000000,"RADIATIONDISP":"Radiation Treatment Start Date"},{"RADIATIONCD":8171646119.000000,"RADIATIONDISP":"Radiation Last Treatment Day"},{"RADIATIONCD":8171646137.000000,"RADIATIONDISP":"Radiation Treatment Elapsed Days"},{"RADIATIONCD":8171646155.000000,"RADIATIONDISP":"Radiation Current Fraction"},{"RADIATIONCD":8171646173.000000,"RADIATIONDISP":"Radiation Total Planned Fraction"},{"RADIATIONCD":8171646191.000000,"RADIATIONDISP":"Radiation Fractional Dose"},{"RADIATIONCD":8171646209.000000,"RADIATIONDISP":"Radiation Total Dose Received"},{"RADIATIONCD":8171646227.000000,"RADIATIONDISP":"Radiation Total Dose Planned"}],"DATECNT":2,"DATE":[{"DATEVAL":"05\/18\/22 12:56"},{"DATEVAL":"05\/18\/22 12:50"}],"TREATMENTCNT":19,"QUAL1":[{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"ONCOLOGIST MD, BILLYBOB","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"1","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Modality","TREATMENTCD":"8171645961","TREATMENTRESULT":"modality","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"xmcnvbcvmnbxcv","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"PHYSICIAN DO, X","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"2","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"Notes section","TREATMENTDTTM":"05\/18\/22 12:56"}],"STATUS_DATA":{"STATUS":"S","SUBEVENTSTATUS":[{"OPERATIONNAME":"","OPERATIONSTATUS":"","TARGETOBJECTNAME":"","TARGETOBJECTVALUE":""}]}}}';

//------------------

const recordData = JSON.parse(radonc1).RADIATION_ONC1;

if (recordData.TREATMENTCNT > 0)
  {
  document.querySelector('#output').innerHTML = 
    `<div id="antiBioScroll">
      <table>
        <thead>
          <tr>
            <th rowspan="2"> Treatment Name      </th>
            <th colspan="2"> Treatment Date/Time </th>
          </tr>
          <tr>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>`

  let
    trDates = document.querySelector('#output table thead tr:nth-of-type(2)') 
  , tbData  = document.querySelector('#output table tbody')
    ;
  recordData.DATE.forEach( ({DATEVAL:dt}) => trDates.insertCell().outerHTML = `<th> ${dt} </th>` )

  recordData.QUAL.forEach( ({RADIATIONDISP : dDisp, RADIATIONCD: rCD})=>
    {
    let newRow = tbData.insertRow()
    newRow.insertCell().textContent = dDisp

    recordData.DATE.forEach( ({DATEVAL:dtKey}) =>
      newRow.insertCell().textContent = recordData.QUAL1.find(({TREATMENTCD:tCD,TREATMENTDTTM:dt})=>tCD==rCD && dt===dtKey)?.TREATMENTRESULT )
    })
  }

table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : black;
  }
td,th {
  background-color : white;
  padding          : .1em .3em;
  }
thead tr:first-of-type th:nth-of-type(2) {
  text-align: left;
  }

tbody tr:nth-child(odd) td  { background-color: #d0d0d0; }
tbody tr:nth-child(even) td { background-color: #f0f0f0; }

<hr>
  Radiation Oncology
<hr>
<div>
  <p id="output"></p>
</div>