We Keep Coding

How do I encode/decode a fetch URL/JSON using javascript and flask

This is in reference to dynamically change options in a list by another list. Unfortunately, it all works except if the project name has a " or a #. Eg. Project name: '10" Centerline #3 Pipe'
I am a newbie to this and I have been cut/paste (learning) as I go along. If someone can help, it will be great. I am seen some things about escaping and encoding URI stuff but not sure where to put it in. The other problem is just understanding what happens past the onchange event.
I can get the list of project names from a previous list and it shows up in my HTML page. However, when I select the choices that have a ( " ) or a ( # ), the next populated list breaks.
Thanks in advance. I really, really appreciate the time if someone puts in a response.
Here is the javascript portion:
project_name_select.onchange = function(){
project_name = project_name_select.value;
fetch('/sr/new/project/' + project_name).then(function(response){
response.json().then(function(data) {
var areaHTML = '<option value="See List">Select Area</option>';
for (var state of data.project_area) {
areaHTML += '<option value="' + state.project_area + '">' + state.project_area + '</option>'
}
project_area_select.innerHTML = areaHTML;
});
});
}
Here is the flask portion:
#surveys.route("/sr/new/project/<get_project_name>")
def project(get_project_name):
project_dict, dict_type = choice_project_dict(get_project_name)
project_areaArray = []
for proj in project_dict:
ownerObj = {}
ownerObj['id'] = proj['company_name']
ownerObj['owner_company'] = proj['company_name']
ownerArray.append(ownerObj)
return jsonify({'project_area': project_areaArray})

Trying to get strings from specific sites (same domain) and place them in a chart

I have a chrome extension that, right now, is purely a cosmetic addition to a Counter-Strike forum and matchmaking site. I'm trying to implement some Javascript to show players ranks when looking at the statistics of a match. Currently, it looks like this: statistics page imgur
I'm trying to add a new column to the left of where players' names appear that shows their ranks. Ranks are currently only stored on the players' profile page, so I'm trying to write code that will go to each players' profile (currently hyperlinked to their name), get their rank and display that as text.
I have 0 understanding of Javascript despite trying to learn it many times but this is a heavily requested feature and I'd like to implement it for my users.
sample statistics page
sample profile page
As of a few months ago, the following code worked:
function findRanks(i) {
var allUsers = $(document).find("#body-match-total" + i + " tr");
$.each($(document).find("#body-match-total" + i + " tr"), function(index, value){
var userLink = "https://play.esea.net/users/" + allUsers[index].children[0].children[1].innerHTML
$.get(userLink, function(data) {
var parsed = $('<div/>').append(data);
rank = $(parsed).find("#rankGraph h1").text();
allUsers[index].children[0].children[1].innerHTML += " (" + rank + ") ";
});
});
}
findRanks(1);
findRanks(2)

Was missing a bracket. Thanks to some random guy on ESEA forums for the help.
Here is the functional code for people with the same issue
function findRanks(i) {
var allUsers = $(document).find("#body-match-total" + i + " tr");
$.each($(document).find("#body-match-total" + i + " tr"), function(index, value){
var userLink = "https://play.esea.net/users/" + allUsers[index].children[0].children[1].innerHTML
$.get(userLink, function(data) {
data = data.replace(/<img[^>]*>/g,"");
var parsed = $('<div/>').append(data);
rank = $(parsed).find("#rankGraph h1").text();
allUsers[index].children[0].children[1].innerHTML += " (" + rank + ") ";
});
});
}
findRanks(1);
findRanks(2);

How do I add social media icons to my code?

This is the code i have so far.
At the end of the email, I would like to provide social icons like these ones that i found free online. And to lead them to corresponding links i have. Minus the skype.
https://codepen.io/anon/pen/QgjeXw
function sendEmails() {
var allData,counter,emailAddress,fourRowsOfData,i,lastRow,
message,messageStart,messageEnd,numRows,
row,sheet,startRow,studentName,subject;
//USER INPUT
startRow = 2; // First row of data to process
numRows = 4; // Number of rows to process
subject = "Camp Pursuit: Report Card ";
messageStart = "Dear Parents,"+'\n' +'\n' +
"Every week at Camp Pursuit, we ask the teachers to make observations about how the kiddos did." +'\n' +
"We know that one week isn't enough to truly know a child, so we call this our " +"Glows, Grows, & Apropos." +'\n' +
"Meaning..." + '\n' +'\n' +
"Glows: Positive things the teacher noticed" +'\n' +
"Grows: Areas for continued growth" +'\n' +
"Apropos: Ways to continue your son/daughter's enrichment" +'\n' +
"We hope you appreciate seeing what the teachers saw last week, and perhaps you can use some of"+'\n' +
"the recommendations for further enrichment this summer. Feel free to let us know your thoughts on the camp through our anonymous online survey."+'\n' +
"Your feedback helps us improve the experience for all kiddos! "+'\n' +
"Survey Link: https://docs.google.com/forms/d/1g4LvA9a8sdKECr1yvp5uOoPnvKACFm3HvbTBfvQGRyo/viewform?usp=send_form" +'\n' +
"We look forward to seeing your child at our programs throughout the year!" +'\n' +
"Sincerely, "+'\n' +
"The Camp Pursuit Team"
+'\n';
//END USER INPUT
sheet = SpreadsheetApp.getActiveSheet();
lastRow = sheet.getLastRow();
allData = sheet.getRange(startRow, 1, lastRow-startRow, 10);// Get All data first
counter = 0;
while (counter < lastRow-startRow) {
Logger.log('counter: ' + counter)
fourRowsOfData = sheet.getRange(startRow + counter, 1, numRows, 6).getValues();
emailAddress = fourRowsOfData[0][0]; // First column of first row
Logger.log('emailAddress: ' + emailAddress)
studentName = fourRowsOfData[0][1];
messageEnd = "";//Reset on every outer loop
for (i = 0; i < numRows; i++) {//loop numRows times - once for each row
row = fourRowsOfData[i];
messageEnd = messageEnd + '\n' +
"Class: " + row[2] + '\n' +'\n' +
"Glows: " + row[3]+ '\n' +
"Grows: " + row[4] +'\n' +
"Apropos: " + row[5] +'\n';
}
message = messageStart + "\n" + studentName + "\n" + messageEnd;
MailApp.sendEmail(emailAddress, subject, message);//Send the email outside of inner loop
counter+=numRows;//Increment counter by number of rows to process
}
}

I don't think you will be able to use examples from codepen as they involve lots of code (e.g. for displaying hover states, etc). However, you could save the buttons as images and store them in your Drive or elsewhere.
The next step is to get the blob for your image from external URL
var imageBlob = UrlFetchApp.fetch(yourImageUrl).getBlob();
or from Drive
var imageBlob = DriveApp.getFileById(yourFileId).getBlob();
Build the string for the html body of your email. Use 'br' tags for line breaks. Wrap your images in 'a' tags to get them to link to external websites. In 'src' attribute of the 'img' tag, create a unique id for your image blob and put it after 'cid'.
var body = "<h1> Header </h1> <br />" +
"<a href='www.example.com'><img src='cid:uid' /></a> Image <br />" +
"Content";
Instead of string parameters, pass the following object to MailApp.sendEmail() method. At runtime, the script will parse the string stored in 'body' variable and create html output, using cid identifiers to retrieve images from inlineImages object. The property names of 'inlineImages' object must match the ids you put created for your images in 'body'
MailApp.sendEmail({
to: "recipient#example.com",
subject: "subject",
htmlBody: body,
inlineImages: {
uid: imageBlob
}
});
Concatenating the string to produce html body is not the best solution though. Consider creating a reusable html template using HtmlService https://developers.google.com/apps-script/guides/html/

Dynamically add array contents as new elements - JQuery

edit: Problem solved! I was modifying the page before it was loaded so the script didn't actually do anything. I fixed it now and it works. Thanks for the help, I'll have to chalk this one up to being new to jQuery and it's weirdness.
Long story short I'm trying to make a webpage that dynamically takes Article titles, thumbnail images, descriptions, and links to them, and creates a nicely formatted list on the page. I'm trying to accomplish this in jQuery and HTML5.
Here is the sample data that I'll be using to dynamically populate the page. For now formatting isn't important as I can do that later after it works at all.
<script>
var newsTitles = ["If It Ain't Broke, Fix It Anyways"];
var newsPics = ["images/thumbnail_small.png"];
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/> Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."];
var newsLinks = ["it_aint_broke-gill_popson.html"];
var newsIndex = 0;
var newsMax = 1;
The section of code where I'm trying to use the contents of the arrays above to dynamically fill elements.
<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article">
<h1>Articles</h1>
<!-- the column for each news peice add an element with the thumbnail, the title and teh desc -->
<script>
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href="" newsLinks[i] + "">" + newsTitles[i] + "</h3>", "<img src=""newsPics[i] + "">","<p>" + newsDesc[i] + "</p>", ); $("div").append("hello");
}
</script>
<div id="articleList">
HELLO
</div>
</td>
Here is what it ends up looking like, I can post more info if needed as I am aware this may not be clear enough to fully explain my problem but I am unable to determine that. Thank you in advance.

try this
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href=""+ newsLinks[i] + "">" + newsTitles[i] + "</h3>, <img src=""+newsPics[i] + "">, <p>" + newsDescs[i] + "</p>" ); $("div").append("hello");
}
Concatation issue + typo for newsDescs

The following string is invalid html and is missing a +
"<h3 href="" newsLinks[i] + "">"
You need to use proper quotes for html attributes, not &quote;
Try
"<h3 href='" + newsLinks[i] + "'>"
OR
"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote
Personally I prefer opening/closing html strings with single quotes but either will work
Note tht you should be getting a syntax error thrown in dev tools console which would have helped you locate problems

for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>");
$("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>" );
}

How can I append to a select drop down that lives on another page?

I'm working on creating a service that allows you to create team or user based challenges. Using HTML 5 specifications to design the page, I've run into a bit of an issue appending to a drop down list that resides in another page. The entirety of functionality lives within two pages, mainly by making AJAX calls to other pages. There's a little function that appends 2 properties of a team to a drop down list, but I can't seem to get it to work properly.
Code:
var teams = $.parseJSON(getAllTeams());
$('#multiPurpose').load('allTeams2.html #teamSelect');
for (i = 0; i < teams.length; i++) {
var team = $.parseJSON(getTeam(teams[i]));
if (team.ownerID === userID) {
$(
"<option value='" + team.teamID + "'>" + team.teamName
+ "</option>").appendTo('#teamSelection');
}
}
}
The #teamSelection is contained within the #teamSelect div. Any help would be great.

Adding a callback function within .load() will solve the problem. Basically, you're telling it to load everything within that div before running the for loop.
$('#multiPurpose').load(
'allTeams2.html #teamSelect',
function() {
for (i = 0; i < teams.length; i++) {
var team = $.parseJSON(getTeam(teams[i]));
if (team.ownerID === userID) {
$(
"<option value='" + team.teamID + "'>"
+ team.teamName + "</option>")
.appendTo('#teamSelection');
}
}
});