Develop Reference

Problems with JavaScript Promises and an API

Good day. I need to popluate a table from an external API and mostof the info I can get from 1 request however I need a second request to populate the developer column. However my promise function does not populate the table for some reason. Please tell me if I am doing something wrong.
The string devList is supposed to be put into the innerHTML of document.getElementById(curDev).
const req1=new XMLHttpRequest();
const rawgAPIkey="*******************"; //real key used here
const baseurl="https://api.rawg.io/api";
const url=new URL(baseurl+"/games");
var tbl=document.getElementById("gametable");
url.searchParams.set("key", rawgAPIkey);
req1.open("GET", url);
req1.responseType="text";
req1.send();
req1.onreadystatechange=function(){
if(req1.readyState===4 && req1.status===200){
var gameArr = JSON.parse(req1.responseText).results;
console.log(JSON.parse(req1.responseText).results);
for (let index = 0; index < gameArr.length; index++) {
var game;
let genres="";
let tempGenre=gameArr[index].genres;
for (let index4 = 0; index4 < tempGenre.length; index4++) {
genres += tempGenre[index4].name;
if(index4!=tempGenre.length-1){
genres+= ", ";
}
}
let platforms="";
let tempPlatforms=gameArr[index].platforms;
for (let index2 = 0; index2 < tempPlatforms.length; index2++) {
platforms += tempPlatforms[index2].platform.name;
if(index2!=tempPlatforms.length-1){
platforms+=", ";
}
}
let Tags="";
let tempTags=gameArr[index].tags;
for (let index3 = 0; index3 < 3; index3++) {
Tags += tempTags[index3].name;
if(index3!=2){
Tags+=", ";
}
}
let agerating="";
if(gameArr[index].esrb_rating!=null){
agerating=gameArr[index].esrb_rating.name;
}else{
agerating="Rating unavailiable";
}
tbl.innerHTML+=
"<tr>"
+" <td> " + " <p> " + gameArr[index].name + " </p> "
+ "<img class=\"gamepic\" src=\" "+ gameArr[index].background_image + " \" alt=\"CS:GO\">" + " </td> "
+ "<td id=\"developerID" + index + "\">" + "</td>"
+ "<td>" + gameArr[index].released + "</td>"
+ "<td>" + genres + "</td>"
+ "<td>" + agerating + "</td>"
+ "<td>" + platforms + "</td>"
+ "<td>" + Tags + "</td>";
let curDev="developerID"+index;
var url2=new URL(baseurl+"/games/"+gameArr[index].id);
url2.searchParams.set("key", rawgAPIkey);
var developer="";
async function getDev(){
let myProm= new Promise (function(success, fail){
const req2= new XMLHttpRequest();
req2.open("GET", url2);
req2.responseType="text";
req2.onload=function(){
if(req2.status===200){
var gamedevs=JSON.parse(req2.responseText).developers;
devList="";
for (let i = 0; i < gamedevs.length; i++) {
devList += gamedevs[i].name + " ";
}
success(devList);
}else{
fail("Developer unavailable");
}
};
req2.send();
});
document.getElementById(curDev).innerHTML= await myProm;
}
getDev();
}
}
}
EDIT 2:
Got it working by doing the following where I just populated the table in the same function where I set devList thus I am not using promises anymore:
async function popdevs(){
let req2= new XMLHttpRequest();
req2.open("GET", url2);
req2.responseType="text";
req2.onload=function(){
if(req2.status===200){
var gamedevs=JSON.parse(req2.responseText).developers;
devList="";
for (let i = 0; i < gamedevs.length; i++) {
devList += gamedevs[i].name + " ";
}
document.getElementById(curDev).innerHTML= devList;
//console.log(devList);
//success(devList);
return devList;
}else{
//console.log("Hello");
return "developer unavailable";
}
};
req2.send();
}
popdevs();

Double for loop on a range to get the emails from a column and to compose a table for that email (GAS)

The data is like this, basically:
Activity Deadline Responsible Status
Activity1 09/20/2020 some#gmail.com In progress
Activity2 10/10/2020 someother#gmail.com Finished
The code below loops through Responsible column to create a unique set of emails and then it loops through the data range to create a table containing the activities pending different than Cancelled and Finished, which will then be sent to each of the email in the am set of email to remember them which activities are waiting for their input/update.
Despite the piece where I compare the first responsible with the one from the second loop, the activities composing the tables are not separated correcltly.
One recipient gets his activities, but the other gets all of the activities and the email is sent twice to the latter.
Here is the log output for both loops/columns compared:
If you could shed a light here, that would be greatly appreciated:
function emailPendingActivity() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Atividades");
var startRow = 9; // First row of data to process
var numRows = sheet.getLastRow(); // Number of rows to process
var dataRange = sheet.getRange(startRow, 1, numRows, 24);
var data = dataRange.getValues();
//This creates the history table headers
var historyMsg = "<html>"
+ "<h2 style='color:darkred;font-size:22px;font-weight:bold;'>Atividades Pendentes</h2>"
+ "<body>"
+ "<table style=\"text-align:center\">"
+ "<tr style='color:darkred;font-size:12px;'>"
+ "<th>N°</th>"
+ "<th>Solicitante</th>"
+ "<th>Projeto</th>"
+ "<th>Natureza</th>"
+ "<th>Área</th>"
+ "<th>Atividade</th>"
+ "<th>Status</th>"
+ "<th>Prazo</th>"
+ "<th>Dias de Atraso</th>";
//This gets unique responsible people from Atividades sheet
var responsibles = [];
for (var j = 0; j < data.length; ++j) {
var rowResp = data[j];
responsibles.push(rowResp[7]);
}
var unique = (value,index,self) => {
return self.indexOf(value) === index
}
var uniqueResp = responsibles.filter(unique);
for (var n = 0; n < uniqueResp.length;++n) {
if (uniqueResp[n] != ''){
var respRow = uniqueResp[n];
for (var i = 0; i < data.length; ++i) {
var rowData = data[i];
var activityNo = rowData[0];
var resp = rowData[7];
var status = rowData[11];
//if ((status.indexOf('Concluído') == -1) || (status.indexOf('Cancelado') == -1)) {
if (activityNo != '') {
if (status != 'Concluído') {
if (status != 'Cancelado') {
if (resp === respRow){
Logger.log('resp: ' + resp);
Logger.log('respRow: ' + respRow);
Logger.log(status)
var solicitante = rowData[2];
var nature = rowData[3];
var project = rowData[4];
var area = rowData[5];
var activity = rowData[6];
var deadline = rowData[9];
var statusDays = rowData[13];
//var deadlineAsDate = Utilities.formatDate(deadline, SpreadsheetApp.getActive().getSpreadsheetTimeZone(), "dd/MM/yyyy");
historyMsg += "<tbody>"
+ "<tr>"
+ "<td>" + activityNo + "</td>"
+ "<td>" + solicitante + "</td>"
+ "<td style=\"text-align:center\">" + nature + "</td>"
+ "<td style=\"text-align:center\">" + project + "</td>"
+ "<td style=\"text-align:center\">" + area + "</td>"
+ "<td style=\"text-align:left\">" + activity + "</td>"
+ "<td style=\"text-align:center\">" + status + "</td>"
+ "<td style=\"text-align:center\">" + deadline + "</td>"
+ "<td style=\"text-align:center\">" + statusDays + "</td>"
+ "</tr>";
}
}
}
}
}
var message = "<HTML><BODY>"
+ historyMsg;
+ "</HTML></BODY>"
var subject = "Some subject";
MailApp.sendEmail({
name: "Specific Name",
to: respRow,
subject: subject,
htmlBody: message
});
}
}
}

Solution
You are instantiating the historyMsg variable outside the for-loop. Basically you will append every row to this previously instantiated HTML table. You can't continue to append the values if you want to send only the corresponding one to the correct email address.
You should instantiate a new historyMsg for each uniqueResp element. So that the table will be build accordingly to your if conditions.
Proposed modification
function emailPendingActivity() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Atividades");
var startRow = 9; // First row of data to process
var numRows = sheet.getLastRow(); // Number of rows to process
var dataRange = sheet.getRange(startRow, 1, numRows, 24);
var data = dataRange.getValues();
//Move this into the for loop so it will create a unique message for each recipient
/**var historyMsg = "<html>"
+ "<h2 style='color:darkred;font-size:22px;font-weight:bold;'>Atividades Pendentes</h2>"
+ "<body>"
+ "<table style=\"text-align:center\">"
+ "<tr style='color:darkred;font-size:12px;'>"
+ "<th>N°</th>"
+ "<th>Solicitante</th>"
+ "<th>Projeto</th>"
+ "<th>Natureza</th>"
+ "<th>Área</th>"
+ "<th>Atividade</th>"
+ "<th>Status</th>"
+ "<th>Prazo</th>"
+ "<th>Dias de Atraso</th>";*/
//This gets unique responsible people from Atividades sheet
var responsibles = [];
for (var j = 0; j < data.length; ++j) {
var rowResp = data[j];
responsibles.push(rowResp[7]);
}
var unique = (value,index,self) => {
return self.indexOf(value) === index
}
var uniqueResp = responsibles.filter(unique);
for (var n = 0; n < uniqueResp.length;++n) {
if (uniqueResp[n] != ''){
var respRow = uniqueResp[n];
//This creates the history table headers
var historyMsg = "<html>"
+ "<h2 style='color:darkred;font-size:22px;font-weight:bold;'>Atividades Pendentes</h2>"
+ "<body>"
+ "<table style=\"text-align:center\">"
+ "<tr style='color:darkred;font-size:12px;'>"
+ "<th>N°</th>"
+ "<th>Solicitante</th>"
+ "<th>Projeto</th>"
+ "<th>Natureza</th>"
+ "<th>Área</th>"
+ "<th>Atividade</th>"
+ "<th>Status</th>"
+ "<th>Prazo</th>"
+ "<th>Dias de Atraso</th>";
for (var i = 0; i < data.length; ++i) {
...

Adapting a javascript class for interactive draggable pie charts on HTML5 canvas and integrate it in Webflow

I found this nice canvas pie on Github, but it's giving me some problem.
I'm not very good in JS, so I'm here asking for help.
https://github.com/jamesalvarez/draggable-piechart
In the example shown here, you can see a UI to manipulate the graphic.
https://codepen.io/Waterbear83/pen/vYOrbva?editors=0010
I don't understand how to display that UI even if I'm using the same js.
https://codepen.io/Waterbear83/pen/yLNqVBZ?editors=0010
Is there someone so nice to help?
Thanks!
function onPieChartChange(piechart) {
var table = document.getElementById("proportions-table");
var percentages = piechart.getAllSliceSizePercentages();
var labelsRow = "<tr>";
var propsRow = "<tr>";
for (var i = 0; i < proportions.length; i += 1) {
labelsRow += "<th>" + proportions[i].format.label + "</th>";
var v = "<var>" + percentages[i].toFixed(0) + "%</var>";
var plus =
'<div id="plu-' +
dimensions[i] +
'" class="adjust-button" data-i="' +
i +
'" data-d="-1">+</div>';
var minus =
'<div id="min-' +
dimensions[i] +
'" class="adjust-button" data-i="' +
i +
'" data-d="1">−</div>';
propsRow += "<td>" + v + plus + minus + "</td>";
}
labelsRow += "</tr>";
propsRow += "</tr>";
table.innerHTML = labelsRow + propsRow;
var adjust = document.getElementsByClassName("adjust-button");
function adjustClick(e) {
var i = this.getAttribute("data-i");
var d = this.getAttribute("data-d");
piechart.moveAngle(i, d * 0.1);
}
for (i = 0; i < adjust.length; i++) {
adjust[i].addEventListener("click", adjustClick);
}
}

[...] even if I'm using the same js
Not quite the same :) It misses this in your setup onchange: onPieChartChange
var newPie = new DraggablePiechart({
canvas: document.getElementById("piechart"),
data: data,
onchange: onPieChartChange
});
And then, after, in the onPieChartChange() there is also the dimensions (it's the same array but sorted randomly with the function knuthfisheryates2(), like you don't have this function in your code, it throws an error ReferenceError: dimensions is not defined because it does not exist) term to change in data in the function onPieChartChange(piechart). The same goes with proportions. But you can keep this one rather to replace it, it's handy to place common parameter like collapsed: false and to do operations on others like label: d.format.label.charAt(0).toUpperCase() + d.format.label.slice(1)
var proportions = data.map(function(d,i) { return {
label: d.format.label,
proportion: d.proportion,
collapsed: false,
format: {
color: d.format.color,
label: d.format.label.charAt(0).toUpperCase() + d.format.label.slice(1) // capitalise first letter
}
}});
function onPieChartChange(piechart) {
var table = document.getElementById("proportions-table");
var percentages = piechart.getAllSliceSizePercentages();
var labelsRow = "<tr>";
var propsRow = "<tr>";
for (var i = 0; i < proportions.length; i += 1) { // <------------------ HERE but keep --------
labelsRow += "<th>" + proportions[i].format.label + "</th>"; // <--- HERE but keep --------
var v = "<var>" + percentages[i].toFixed(0) + "%</var>";
var plus = '<div id="plu-' +
data[i] + // <----------------- HERE ------------------
'" class="adjust-button" data-i="' +
i +
'" data-d="-1">+</div>';
var minus =
'<div id="min-' +
data[i] + // <-------------- AND HERE -----------------
'" class="adjust-button" data-i="' +
i +
'" data-d="1">−</div>';
propsRow += "<td>" + v + plus + minus + "</td>";
}
labelsRow += "</tr>";
propsRow += "</tr>";
table.innerHTML = labelsRow + propsRow;
var adjust = document.getElementsByClassName("adjust-button");
function adjustClick(e) {
var i = this.getAttribute("data-i");
var d = this.getAttribute("data-d");
piechart.moveAngle(i, d * 0.1);
}
for (i = 0; i < adjust.length; i++) {
adjust[i].addEventListener("click", adjustClick);
}
}
Note: Couldn't make it works with the angles, I looked all his examples, he never uses it, he always uses proportions: proportions. So I just changed that in addition in your code.
The code is to large to be posted in a snippet here, here a codepen:
You can change the data from line 744 (see picture)
https://codepen.io/jghjghjhg/pen/rNVrwbd

How to sum values using for function in JavaScript?

I need your help. I have created looping function which is FOR to sum the values for specific column.
var result = data.result; //declare result as variable
var rows = result.result.rows; //declare rows as variable
// var sum = 0;
for (var i = 0; rows.length > i; i++) {
var column = "";
var total = total_event_loss;
var sum += parseFloat(rows[i][total_event_loss]);
column += "<tr><td><center>" + rows[i][category] + "</center></td>";
column += "<td><center><div class='font-red'>" + sum + "</div>" + rows[i][pic] + "</center></td>";
column += "<td><center><div class='font-red'>" + rows[i][total_event_loss] + "</div>" + rows[i][field] + "<br/>" + rows[i][sub_category] + "</center></td></tr>";
$(column).appendTo(container.find("table > tbody"));
}

Initialize the sum variable before the loop, and add to it inside the loop. You can't use the var keyword when adding to it.
var result = data.result;
var rows = result.result.rows;
var sum = 0;
for (var i = 0; rows.length > i; i++) {
var column = "";
sum += parseFloat(rows[i][total_event_loss]);
column += "<tr><td><center>" + rows[i][category] + "</center></td>";
column += "<td><center><div class='font-red'>" + sum + "</div>" + rows[i][pic] + "</center></td>";
column += "<td><center><div class='font-red'>" + rows[i][total_event_loss] + "</div>" + rows[i][field] + "<br/>" + rows[i][sub_category] + "</center></td></tr>";
$(column).appendTo(container.find("table > tbody"));
}
You also never use the total variable, I removed that.
BTW, comments like declare result as a variable are pretty useless. Code comments should clarify things that might not be obvious. It's clear that a var statement declares a variable.

Edit row of table values in Javascript

I have a table being created in Javascript via an input table on my html page. I added a delete and edit button on the Javascript table so when it returns values, these two buttons appear at the end of each row added. However, I cannot get any sort of edit button at all. I have looked everywhere. Can anyone help me?
I have a jsFiddle of my entire program.
http://jsfiddle.net/aabbey0411/c46d9n2e/
This is where I created the button:
/**
* This function returns a row of an HTML table containing the contact data.
*/
Contact.prototype.tableRow = function() {
var deleteButton = "<button id ='delete' onclick= 'deleteRow(this)'>Delete</button>"
var editButton = "<button id ='edit' onclick='editRow(this)'>Edit</button>"
var tr = "</td><td>" + this.forename + "</td><td>" + this.surname + "</td><td>" + this.category + "</td><td>" + this.dob + "</td>" +
"<td>" + this.marital_status + "</td><td>" + this.phone + "</td><td>" + this.email + "</td><td>" + this.address + "</td>" +
"<td>" + this.postcode + "</td><td>" + this.notes + "</td>" +
"<td>" + editButton + "</td>" + "<td> " + deleteButton + "</td></tr>";
return tr;
};
/* This function builds the HTML table, using the input of contact details
*/
var updateList = function () {
var tableDiv = document.getElementById("table"),
table = "<table border='1'><thead><th>Forename</th><th>Surname</th><th>Category</th><th>Date of Birth</th>" +
"<th>Status</th><th>Phone Number</th><th>Email Address</th><th>Address</th><th>Postcode</th><th>Notes</th></thead>";
for (var i = 0, j = contacts.length; i < j; i++) {
var cont = contacts[i];
table+= cont.tableRow();
}
table+= "</table>";
tableDiv.innerHTML = table;
};
var showTable = function () {
var tableDiv = document.getElementById("table"),
table = "<table border='1'><thead><th>Forename</th><th>Surname</th><th>Category</th><th>Date of Birth</th><th>Status</th><th>Phone Number</th>" +
"<th>Email Address</th><th>Address</th><th>Postcode</th><th>Notes</th><th>Delete</th></thead>";
for(var i=0, j=contacts.length; i<j; i++){
var cont = contacts[i];
table += cont.tableRow();
}
table+="</table>";
tableDiv.innerTML = table;
};