Develop Reference

Only displaying database rows that match the ID of the user that created it

I have a HTML table that's displaying all of my database's data (individual job listings). However, I need to write an if statement to only show a job if the job's createdByUserID matches the ID of the user viewing it.
$(function() {
var records = [];
$.getJSON('https://db-ommitted-for-privacy?tableName=JobListings&fields=company,logo,img,companyDescription,role,roleDescription,location,link,createdByUserID,dateAdded&view=AllListings', function(data) {
$.each(data.records, function parseJSON(i, { fields: f }) {
var tblRow = "<tr>" +
"<td>" +
"<div style='padding-top: 1%; padding-bottom: 1%;'>" +
"<div style='border: 1px solid black;'>" +
"<button class='accordionList' style='font-size: large; outline: none;'>" +
"<span style='padding-top: 2.5%; padding-bottom: 3%;'>" +
"<img src='" + f.logo + "' height='30px'>" +
"</span> <span style='padding-top: 3%; padding-bottom: 3%;'> " +
f.company + " | " + f.role +
" <span style='color: #2b2b2b;''><span class='iconify-inline' data-icon='eva:pin-outline' style='color: #2b2b2b;'></span> " + f.location +"</span></span>" +
"</button>" +
"<div class='panel'>" +
"<img src='img/jobBanner2.png' width='100%'>" +
"<br>" +
"<p style='color: #505050;'>Posted: " + f.dateCreated + " | Status: " + f.status + "</p>" +
"<h4>About this role:</h4>" +
"<p>" + f.roleDescription + "</p>" +
"<h4>About " + f.company + ":</h4>" +
"<p>" + f.companyDescription + "</p>" + "<br>" +
"<a href='pricing.html' class='button btn btn-lg btn-block btn-sm button-black' style='padding-top: 1%; padding-bottom: 1%; width: 200px;'>Apply <span class='iconify-inline' data-icon='bi:arrow-right-circle' data-width='15' style='color: white;'></span></a>" +
"<br>" + "</div>" +
"</div>" +
"</div>" +
"</div>" +
"</td>" +
"</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
The code to display a logged in user's ID:
<div data-ms-member="id"></div>
I understand the concept of how this should work, but I have no idea how to execute it in JS and HTML. Any help is appreciated, thanks.

Just simply add:
var uid = /*get your user id here*/
//filter out any data not created by current user
if (uid != f.createdByUserID) {return ;}
before this line
var tblRow = "<tr>" +
What I still have to say is that, it is silly to do the filtering at front-end, for causing both security risk of exposing your database to everybody using developer tools to check your code, and low performance as a result of trying to recieve all the data in a database table from the server. It would be better to have a back-end written in php or node.js doing these checkings.

How to validate HTML content with multiple variables put inside a string

I've below code
issuesList.innerHTML += "<div class=\"well\">" +
"<h6> Issue Id:" + id + "</h6" +
"<p><span class=\"label label-info\">" + status + "</span></p>" +
"<h3>" + desc + "</h3>" +
"<p><span class=\"glyphicon glyphicon-time\">" + severity + "</span></p>" +
"<p><span class=\"glyphicon glyphicon-user\">" + assignedTo + "</span></p>" +
"Close" +
"<a href=\"#\ onclick=\"deleteIssue( \"" + id + "\")\" class=\"btn btn-danger\>Delete</a>" +
"</div>";
I wish to validate if this is correct format of HTML as it contains many variable and it's hard to debug if something goes wrong.

To make it one degree less complicated, you can use single quotes to wrap class or style declarations and double quotes to wrap the overall html (or vice versa).
In this piece of html, I observed issued at closing of </h6> and in the class declaration of last anchor tag.
issuesList.innerHTML += "<div class='well'>" +
"<h6> Issue Id:" + id + "</h6>" +
"<p><span class='label label-info'>" + status + "</span></p>" +
"<h3>" + desc + "</h3>" +
"<p><span class='glyphicon glyphicon-time'>" + severity + "</span></p>" +
"<p><span class='glyphicon glyphicon-user'>" + assignedTo + "</span></p>" +
"<a href='#' onclick= 'setStatusClosed(\"" + id + "\")' class='btn btn-warning'>Close</a>" +
"<a href='#' onclick='deleteIssue( \"" + id + "\")' class='btn btn-danger'>Delete</a>" +
"</div>";
You may use following function to validate the html so created:
function validator(createdhtml) {
var tempdiv = document.createElement('div');
tempdiv.innerHTML = createdhtml;
return tempdiv.innerHTML;
}
Further I recommend reading:
check-if-html-snippet-is-valid

Electron won't open file from JSON

I'm trying to use the onclick='shell.openItem('filename') with the filename being populated by JSON. When I console.log(data[i].url) it returns the correct kmz file for each button, but when I click on the button it says Uncaught Reference Error: filename.kmz is not defined.
Thoughts on what I'm missing? Thanks.
var portsbtn = document.getElementById("portsbtn");
portsbtn.addEventListener("click", function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'jsonclean.json');
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData[23]);
};
ourRequest.send();
});
//WRITE HTML FROM JSON ON BUTTON CLICK
function renderHTML(data) {
var htmlString = "";
$('#aceCategory').empty();
for (i = 0; i < data.length; i++) {
htmlString += "<p class='categoryName'>" + data[i].category + "</p>" + "<tr>" + "<td class='feedDesc'>" + "<b>" + data[i].name +
"</b>" + "<br>" + data[i].desc + "</br>" + "<br>" + "<input type='button' id='openBtn' style='border-radius: 25px; outline: none' value='Open Link' onclick='shell.openItem(" + data[i].url + ");'" + ">" + "</td>" +
"</tr>"
console.log(data[i].url)
};
aceFeedTable.insertAdjacentHTML('beforeend', htmlString)
}

I figured it out. Code below.
htmlString += "<p class='categoryName'>" + data[i].category + "</p>" + "<tr>" + "<td class='feedDesc'>" + "<b>" + data[i].name +
"</b>" + "<br>" + data[i].desc + "</br>" + "<br>" + "<input type='button' id='openBtn' style='border-radius: 25px; outline: none' value='Open Link' onClick='openWindow(\"" + data[i].url + "\" )' >" + "</td>" +
"</tr>"
};
aceFeedTable.insertAdjacentHTML('beforeend', htmlString)
}
function openWindow(url) {
shell.openItem(url);
console.log(url);
}

Trouble with jQuery loop through array of objects

I'm trying to nest 3 divs within a "row" div.
I had this working in "long format" (multiple var's instead of looping through the array). I've refactored my code and now I don't get any error codes AND my code does not append to the HTML file. When I console log I get an array with 3 objects. I'm sure i'm missing something minor.
Anyways some help would be great!
<div class="row">
**nested divs go here.
</div>
$(document).ready(function() {
$.get("http://api.openweathermap.org/data/2.5/forecast/daily?id4726206&cnt=3", {
APPID: "MY API KEY",
lat: 29.423017,
lon: -98.48527,
units: "imperial"
}).done(function(data) {
var stationId = data.city.name;
// Stattion Name
$('#station').append(stationId);
//console.log(data);
var forecast = data.list;
//Wind Direction in Compass Format
function getDirection(dir) {
var compass = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
var result = Math.floor((360 - dir) / 22.5);
return compass[result];
}
//Forecast Variables
$.each(forecast, function(i, v) {
var html = '';
html += "<div class='col-sm-3 wInfo'>" + "<div class='title'>High / Low</div>";
html += "<div class='cTemp'>" + (Math.ceil(forecast[i].temp.max)) + '°';
html += " / " + (Math.ceil(forecast[i].temp.min)) + '°' + "</div>";
html += "<div class='tempIcon'>" + "<img src='http://openweathermap.org/img/w/" + forecast[i].weather[0].icon;
html += ".png' alt=''></div>" + "<div class='conditions' id='castId'>" + '<span class="cond">' + forecast[i].weather[0].main;
html += "</span>: " + "<span>" + forecast[i].weather[0].description + '</span>' + "</div>";
html += "<div class='conditions'>" + "<span class='cond'>Humidity: </span>" + "<span>" + forecast[i].humidity + "%</span></div>";
html += "<div class='conditions'>" + "<span class='cond'>Wind: </span>" + "<span>" + (Math.floor(forecast[i].speed));
html += " mph / " + getDirection(forecast[i].deg) + "</span></div>" + "<div class='conditions'>";
html += "<span class='cond'>Pressure: </span>" + "<span>" + forecast[i].pressure + "</span></div>";
return html;
});
$('.forecast').append(forecast);
console.log(forecast);
});
});

You are trying to append the array forecast in html. which wont work. You should declare the html variable outside and then use it in append function.
I will also recommend to use string builder logic using array and then convert it to string and append it. remember string concatenation is heavy operator as it creates new instance of elememt every time concatenation is done :
var html = [];
$.each(forecast, function(i, v) {
html.push("<div class='col-sm-3 wInfo'>" + "<div class='title'>High / Low</div>");
html.push("<div class='cTemp'>" + (Math.ceil(forecast[i].temp.max)) + '°');
html.push(" / " + (Math.ceil(forecast[i].temp.min)) + '°' + "</div>");
html.push("<div class='tempIcon'>" + "<img src='http://openweathermap.org/img/w/" + forecast[i].weather[0].icon);
html.push(".png' alt=''></div>" + "<div class='conditions' id='castId'>" + '<span class="cond">' + forecast[i].weather[0].main);
html.push("</span>: " + "<span>" + forecast[i].weather[0].description + '</span>' + "</div>");
html.push("<div class='conditions'>" + "<span class='cond'>Humidity: </span>" + "<span>" + forecast[i].humidity + "%</span></div>");
html.push("<div class='conditions'>" + "<span class='cond'>Wind: </span>" + "<span>" + (Math.floor(forecast[i].speed)));
html.push(" mph / " + getDirection(forecast[i].deg) + "</span></div>" + "<div class='conditions'>");
html.push("<span class='cond'>Pressure: </span>" + "<span>" + forecast[i].pressure + "</span></div></div>");
});
$('.forecast').append(html.join(""));

jquery increase by 1

Afternoon,
I would like to increase the number in this code by 1 for each question displayed.
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question 1</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
With this it would show, question 1, question 2, and so on...
How would i go about doing this in jQuery please?
Update Victor provided what i needed, thanks all for your help. Updated code below.
var questionNumber = 1;
$.each(result, function (index, res) {
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question " + (questionNumber++) + "</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
$('#pinfos').append(new_question);

Declare a variable outside your loop and incremenet it inside your loop and use that in the markup.
var questionNumber=0;
$.each(someJsonData, function (index, res) {
{
questionNumber++;
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question "+questionNumber+"</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
}

Declare a var called questionNumber and increment it at each call
var questionNumber = 1;
$.each(result, function (index, res) {
new_question = "<div id=\"" + res.qId + "\">" +
"<h1>Question " + (questionNumber++) + "</h1>" +
"<p><i>" + res.question + "</i></p>" +
"<div class=\"answer-grid\">" +
"<div id=\"a1\" class=\"answer\">" +
"<p>" + res.answer1 + "</p>" +
"<p>" + res.answer2 + "</p>" +
"<p>" + res.answer3 + "</p>" +
"</div>" +
"</div>";
$('#pinfos').append(new_question);