working on draw div2

by Alex Cowan

HTML

<div class="Case-Details">
    <h3>Case Details</h3>
    <div id="caseDetails"></div>
    </div>

CSS

.home {
    border-style: dotted;
    font-family: Alegreya;
    font-style: normal;
    font-weight: normal;
    font-size: 6vw;
    text-align: center;
    color: #FF0000;
    background-color:#282b2b;
    margin-top:0vw;
}



#logo {
    width: 15vw;
}

.myButton {
    box-shadow: inset 0px -3px 10px 10px #29bbff;
    background-color: #2dabf9;
    border-radius: 15px;
    border: 5px solid #0b0e07;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Courier New;
    font-size: 8vw;
    padding: 40px 80px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #263666;
}

.myButton:hover {
    background-color: #0688fa;
}

.myButton:active {
    position: relative;
    top: 1px;
}

.UI-container {
    display: grid;
    grid-template-columns: 8vw 10vw 14.285vw 14.285vw 14.285vw 24.285vw 10vw;
    grid-template-rows: 3.5vw 10vw 10vw 10vw 5vw 2vw 2vw 8vw;
    gap: 1px 1px;
    grid-template-areas:
    "Help . Location Location Location Location time"
    "Body Body Ultrasound Ultrasound Ultrasound Ultrasound Actions"
    "Body Body Ultrasound Ultrasound Ultrasound Ultrasound Actions"
    "Body Body Ultrasound Ultrasound Ultrasound Ultrasound Actions"
    "Body Body Ultrasound Ultrasound Ultrasound Ultrasound Actions"
    ". Case-Details Case-Details Case-Details . Vitals ."
    ". Case-Details Case-Details Case-Details . Vitals ."
    ". Case-Details Case-Details Case-Details . Vitals .";
}
.Help { grid-area: Help;
}
#help {
    height: 3vw;
}

.Body { grid-area: Body;
}
.Body>img {
    vertical-align:center;
}
.parent{
    position:absolute;
    z-index:0;
}

#bodyImage{
    height:39vw;
    object-fit:cover;
}
#ruqicon {
    position:absolute;
    z-index:1;
    bottom:25vw;
    right:9.5vw;
    height:2vw;}

#luqicon {
    position:absolute;
    z-index:1;
    bottom:25vw;
    right:5vw;
    height:2vw;}

#subxicon {
    position:absolute;
    z-index:1;
    bottom:26vw;
    right:7.25vw;
    height:2vw;}

#bladdericon {
   ...

JavaScript

var JSONFEED = 'https://spreadsheets.google.com/feeds/list/1dpcguZ2Ak0zc0Sh1WoPV0c0tXVxre3yGWC1Wo5ElWtc/1/public/basic?alt=json';

$(document).ready(function() {
  $.ajax({
    url: JSONFEED,
    success: function(data) {
      readData(data);
    }
  });
});

function readData(data) {
  var partfeed = data.feed.entry;
  var divData = [];
  for (var i = 0; i < partfeed.length; i++) {
    var JSONrow = partfeed[i].content.$t.split(',');
    var row = [];
    // console.log('the Current Case Data is: ' + JSONrow);
    for (var j = 0; j < JSONrow.length; j++) {
      //console.log('we are on the ' + j + 'th iteration');
      val = JSONrow[j].split(':')[1];
      //console.log('the index is ' + j + ' and the value is ' + val);
      row[j] = val;
    }
    //trying to pull just row for the heck of it
    if (i != 0) {
    	thehistory = row[1];
      //console.log(thehistory);
      drawDiv(row, thehistory, "#caseDetails");
    }
  }
}

function drawDiv(divData, thehistory, parent) {
  if (divData == null) return null;

  //caseid = $.trim(divData[0]);
  //it appears it is not pulling case id, and index 0 is the title

  //title = $.trim(divData[0]);

  //history is pulling "[object history]" not the text there, haven't figured out why yet
  console.log(thehistory);

  age = $.trim(divData[2]);
  //console.log("The age is "+ age)
  gender = $.trim(divData[3]);
  //console.log("The sex is "+ gender)
  //tempc = $.trim(divData[4]);
  tempf = $.trim(divData[5]);
  //console.log("The temperature is "+ tempf+ " degrees F")
  bpsys = $.trim(divData[6]);
  //console.log("The BPsys= " + bpsys)
  bpdia = $.trim(divData[7]);
  //console.log("The BPdia= " + bpdia)
  hr = $.trim(divData[8]);
  //console.log("The HR= " + hr)
  oxy = $.trim(divData[9]);
  //console.log("The Oxy= " + oxy)
  // outcomeObs = $.trim(divData[10]);
  // outcomeCT = $.trim(divData[11]);
  // outcomeSurg = $.trim(divData[12]);
  // outcomeInt = $.trim(divData[13]);


  var $caseDiv = $("<div/>");
 ...