We Keep Coding

How do I format the date in HTML table from dataGrid columns

I need help with Google Apps Script for formatting the HTML output in the email to Currency for dataGrid[i][6] and date (mm-dd-yyy) for dataGrid[i][9], dataGrid[i][11] and dataGrid[i][12]. The date currently outputs to Fri Apr 22 2022 00:00:00 GMT-0700 (Pacific Daylight Time). Full code w/comments below:
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('reports_send')
.addItem('LOB (Report)', 'sendLob')
.addToUi();
}
function sendLob()
{
//capture the sheet with this identifier
var sheet = SpreadsheetApp.getActive().getSheetByName("report_lob");
//get the email address of the recipient
var email = sheet.getRange(2, 14).getValue(); //loads the current email address into variable "email". Notice columns are referred to as numbers.
//get data for this range
var dataGrid = sheet.getRange(6, 1, sheet.getLastRow(), 14).getValues(); //loads the data in this range at the time
var message = ""; //container to hold final email content
//set up the HTML to be rendered by sendEmail eventually.
//adding a table for the column headings and content inside it.
message = " <table width='100%' border='1' cellpadding='5' style='border:1px #999999; border-collapse:collapse'>";
message += "<tr>"
message += "<td><b>Supplier</td>"
message += "<td><b>PO</td>"
message += "<td><b>PO Line#</td>"
message += "<td><b>Line Item</td>"
message += "<td><b>Buyer</td>"
message += "<td><b>Line Value</td>"
message += "<td><b>Line Order Qty</td>"
message += "<td><b>Open Qty</td>"
message += "<td><b>Contract Date</td>"
message += "<td><b>Organization</td>"
message += "<td><b>Anticipated Date</td>"
message += "<td><b>Updated Date</td>"
message += "<td><b>Justification</td>"
message += "</b> </tr>"
//Loop through the content in data grid and set them up in each column with new row for each.
for(var i=1;i<dataGrid.length; i++)
{
message+= "<tr>"
message+= "<td>" + dataGrid[i][1] + "</td>"
message+= "<td>" + dataGrid[i][2] + "</td>"
message+= "<td>" + dataGrid[i][3] + "</td>"
message+= "<td>" + dataGrid[i][4] + "</td>"
message+= "<td>" + dataGrid[i][5] + "</td>"
message+= "<td>" + dataGrid[i][6] + "</td>"
message+= "<td>" + dataGrid[i][7] + "</td>"
message+= "<td>" + dataGrid[i][8] + "</td>"
message+= "<td>" + dataGrid[i][9] + "</td>"
message+= "<td>" + dataGrid[i][10] + "</td>"
message+= "<td>" + dataGrid[i][11] + "</td>"
message+= "<td>" + dataGrid[i][12] + "</td>"
message+= "<td>" + dataGrid[i][13] + "</td>"
message+= "</tr>"
}
//end of table tag
message +="</table>"
//send email. Done!
MailApp.sendEmail(email, "LOB (Report)", "", {htmlBody:message});
Browser.msgBox("LOB (Active) report sent! Who took the chocolate?");
}
I tried:
var cell = SpreadsheetApp.getActiveSheet().getRange(1, 1);
cell.setValue(new Date()).setNumberFormat("MM/dd/yyyy");
but it just changed the worksheet cell contents.

Have you tried this? as it seems very logically,
you just want the format to change?
cell.setValue(cell.getValue()).setNumberFormat("MM/dd/yyyy");
replace cell with the cell in question.

As answered in the comments section:
var dataGrid = sheet.getRange(6, 1, sheet.getLastRow(), 14).getValues();
Needs to be modified to
var dataGrid = sheet.getRange(6, 1, sheet.getLastRow(), 14).getDisplayValues()

Conditional Formatting JavaScript inside PHP

I'm new to js and php, in fact web design in general....
I've had a website built by uni students. It uses PHP, JavaScript, Apache, AJAX, MySQL. Sadly the project is finished, but I need to change what is formatted.
What i have and what i require
I have tried to install WAMP on my computer without success.
Instead I edit the .js file in wordpad and swap it out on the server.
//Currently the output from displaying a "law" on my website is this:
//The &plusmn and the second number (sd - in the code below SDBefore) is formatted green for 0<=sd <50.
//The first number (mean - in the code before meanBefore) is not formatted.
//AFAIK the javascript file on the server produces this is currently as follows:
$(".mean-value").html("Loading");
$(".sd-value").html("Loading");
//parse the returned data
var jsonData = JSON.parse(data);
$(".mean-value").html(parseInt(jsonData.mean));
$(".sd-value").html("± " + parseInt(jsonData.sd));
currentHTML = currentHTML + "<td><a href='./event-profile.php?id=" + event.event_id + "' >" + event.event_name + "</a></td>";
if(event.SDBefore >= 0 && event.SDBefore < 50)
{
currentHTML = currentHTML + "<td>" + event.meanBefore + "<span class='sd-value-green'>&plusmn" + event.SDBefore + "</span></td>";
}
//.....( JSON is a format for storing and transporting data).
//So what I want to do is one of the following a) or b)
// a) format the mean only according to 0<=sd <50.
Is this correct?
//parse the returned data
var jsonData = JSON.parse(data);
$(".mean-value").html(parseInt(jsonData.mean));
//$(".sd-value").html("± " + parseInt(jsonData.sd)); //Don't need this line
currentHTML = currentHTML + "<td><a href='./event-profile.php?id=" + event.event_id + "' >" + event.event_name + "</a></td>";
if(event.SDBefore >= 0 && event.SDBefore < 50)
{
currentHTML = currentHTML + "<td>" + "<span class='mean-value-green'>event.meanBefore+</span>" + &plusmn + event.SDBefore + "</td>";
}
//b) format the whole law according to 0<=sd <50.
//So I have added the following (in bold):
// Is this correct?
$(".mean-value").html("Loading");
$(".sd-value").html("Loading");
$(".law-value").html("Loading");
//parse the returned data
var jsonData = JSON.parse(data);
$(".mean-value").html(parseInt(jsonData.mean));
$(".sd-value").html("± " + parseInt(jsonData.sd))
$(".law-value").html(parseInt(jsonData.mean) + "± " + parseInt(jsonData.sd));
currentHTML = currentHTML + "<td><a href='./event-profile.php?id=" + event.event_id + "' >" + event.event_name + "</a></td>";
if(event.SDBefore >= 0 && event.SDBefore < 50)
{
currentHTML = currentHTML + "<td>" + "<span class='law-value-green'> event.meanBefore + &plusmn + event.SDBefore" + "</span></td>";

Have a look on ±. This is symbol you would like to change to +/-.

Javascript Append Function, Need to build a loop

I have a .php file where I am using both HTML and JavaScript to display items from my database. I have a JavaScript append function that is creating cards where each item is display. On my cards, I have a button that will expand the card to show product history. Some products have more history than others so the expansion needs to be dynamic. The historical data is being pulled from database and is initially in a php array. I originally was going to institute php into the javascript append function but I could not figure out how to set the JavaScript index variable 'I' to my php index. So I want to just stay with JavaScript. But I don't know how to write a loop in the middle of this append function that will loop through the historical array and populate the expansion. Below is what I am attempting. I took out a lot of the lines in the append function but you can see what I am trying to do.
function get_products() {
clear_cards();
$.each(productNumbers,
function(i, value) {
$('.main_card_shell').append(
"<div class='card_content card_style' id='card" + i + "'>" +
"<div id='card_tab2" + i + "' class='tabcontent' data-tab='tab-name2'>" +
"<div class='details_tables'>" +
"<table>" +
"<tr>" +
"<th>Item Type</th>" +
"<th>Painted</th>" +
"<th>Last Sold" +
"<a id='_close_tab" + i + "' class='tablinks tab_override' onclick=\"openCity(event,'card_tab4" + i + "')\">" +
"<i class='large angle up icon'></i>" +
"</a>" +
"</th>" +
"</tr>" +
"<tr>" +
var itemdatesplit = itemdate[i].split("$$");
var itemtypesplit = itermtype[i].split("$$");
var itemsplit = item[i].split("$$");
var arraylength = itemsplit.length;
var counter = 0;
while(counter < arraylength)
{
+ "<td>" + itemtypesplit[counter] + "</td>" +
+ "<td>" + itemdatesplit[counter] + "</td>" +
counter = counter + 1;
}
+
"</tr>" +
"</table>" +
"</div>" +
"</div>" +
Please help. I had it working with PHP inserted in, but I just couldn't figure out how to set it to a PHP variable.

Place this code into a function:
function getSomething(i) {
var html = '';
var itemdatesplit = itemdate[i].split("$$");
var itemtypesplit = itermtype[i].split("$$");
var itemsplit = item[i].split("$$");
var arraylength = itemsplit.length;
var counter = 0;
while(counter < arraylength) {
html += "<td>" + itemtypesplit[counter] + "</td>";
html += "<td>" + itemdatesplit[counter] + "</td>";
counter = counter + 1;
}
return html;
}
And then use it in your HTML building block:
'<some html>' + getSomething(i) + '<some other html>'

splice in javascript change values of my other objects

NOTE! this is for an extra credit assignment, so I am not looking for code re-write but rather guidance in what I am doing wrong. I have gone through my code several times and I feel like I am just missing something very minor. I have completed it fully with the exception of the following error:
I created an array of objects.
Everything starts off fine. I can create objects and they are added to the array and successfully displayed on my screen with correct values.
The trouble arises when I delete an object from the array. It does delete this object and removes it from my displayed list, but suddenly all the remaining objects get new values. These new values match those of the LAST object I added to the array. I need them to retain their original values!
var tableContent = document.getElementById("tableContent");
var tableString = " ";
var counter = 0;
var courseArray = [];
tableContent.innerHTML = tableString;
function Course(number, title, hours, prereq) {
this.number = number;
this.title = title;
this.hours = hours;
this.prereq = prereq;
}
function createCourse() {
var number = document.getElementById("number-field");
var title = document.getElementById("title-field");
var hours = document.getElementById("hours-field");
var prereq = document.getElementById("prereq-field");
courseArray.push(new Course(number, title, hours, prereq));
buildCourseTableBody();
}
function buildCourseTableBody() {
tableString += "<tr>" +
"<td>" + counter + "</td>" +
"<td>" + courseArray[counter].number.value + "</td>" +
"<td>" + courseArray[counter].title.value + "</td>" +
"<td>" + courseArray[counter].hours.value + "</td>" +
"<td>" + courseArray[counter].prereq.value + "</td>" +
"<td><button id='delete' onClick='deleteCourse(" + counter + ")'><img id=counter src='../image/delete.png' alt='delete course'></button></td>" +
"</tr>";
counter++;
tableContent.innerHTML = tableString;
}
function deleteCourse(counterIndex) {
courseArray.splice(counterIndex, 1);
counter--;
tableString = "";
for (var i = 0; i < courseArray.length; i++) {
tableString += "<tr>" +
"<td>" + i + "</td>" +
"<td>" + courseArray[i].number.value + "</td>" +
"<td>" + courseArray[i].title.value + "</td>" +
"<td>" + courseArray[i].hours.value + "</td>" +
"<td>" + courseArray[i].prereq.value + "</td>" +
"<td><button id='delete' onClick='deleteCourse(" + i + ")'><img id=counter src='../image/delete.png' alt='delete course'></button></td>" +
"</tr>";
}
and HTML code(everything in main, which is wrapped in body. js file is included):
<main id="main-index">
<h1 id="page-caption">CS Department Course Catalog</h1>
<div id="course-list">
<p id="course-list-caption">Course List</p>
<table>
<thead>
<tr>
<th>Count</th>
<th>Number</th>
<th>Title</th>
<th>Hours</th>
<th>Prereq</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableContent">
</tbody>
</table>
</div>
<div id="course-edit">
<p><input id="number-field" placeholder="Course #, e.g. CS234"></p>
<p><input id="title-field" placeholder="Course title, e.g. Database and Wed Systems Development"></p>
<p><input id="hours-field" placeholder="Credit hours, e.g. 3.0"></p>
<p><input id="prereq-field" placeholder="Course prereqs, e.g. CS150, CS111"></p>
<p><button id="add" onClick="createCourse()">+</button></p>
</div>
</main>

Your error is in createCourse. You are assigning the HTML-Elements instead of their value.
function createCourse() {
var number = document.getElementById("number-field").value;
var title = document.getElementById("title-field").value;
var hours = document.getElementById("hours-field").value;
var prereq = document.getElementById("prereq-field").value;
courseArray.push(new Course(number, title, hours, prereq));
buildCourseTableBody();
}
The class course will hold a reference to the element itself. Like that your functions which generate the table itself, will always get the most current value of the input boxes.
Notice:
Don't forget to adapt buildCourseTableBody and deleteCourse.

How can I dynamically output each index in an array to HTML

I'm attempting to create a tooltip that prints every indexed position of a particular array dynamically.
I first start with a 'for' loop that pushes the targeted values that I want displayed in the tooltip to an array if they pass a condition like so:
var myArray = [];
for (var i = 0; i < ccirdata.length; i++) {
if (myArray[i].catType === 'I') {
myArray.push(ccirdata[i].catNum);
}
}
I'd like to iterate/print EACH index item of the array:
scope.data = [
{
key: 'Category I',
MyAttribute:<INSERT HERE>
},
So that my tooltip is formatted as such where 'MyAttribute' will create a new row, "< tr >" for every index item:
var header =
"<thead>" +
"<tr>" +
"<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
"<td class='key'>" + series.key + " CCIRs:</td>" +
"</tr>" +
"</thead>";
var rows =
"<tr>" +
"<td class='key'><strong>" + series.key + "</strong></td>" +
"<td class='x-value'>" + MyAttribute + "</td>" +
"</tr>"
return "<table>" +
header +
"<tbody>" +
rows +
"</tbody>" +
"</table>";
I'm just not sure how this can be done, since iterations require javascript, and i'm looking to print each item in html format (the tooltip)