We Keep Coding

Array issue when the length is below 5

Listing last five items in an array by using this code below worked so far, but when the array length was only 1 it started causing issues. Can I some how condition it so it doesn't cycle though when there is only one item in the array?
$(function() {
$.getJSON("#myURL", function(getStressTestErrorInfo2) {
if (getStressTestErrorInfo2.length >= 1) {
var len = getStressTestErrorInfo2.length - 5;
var data = getStressTestErrorInfo2;
var txt = "";
if (data.length - 1 !== undefined) {
for (var i = len; i < len + 5; i++) {
// dynamically generating a table-row for appending in the table.
txt += "<tr><td>" + data[i].AlarmNo + "</td><td>" + data[i].AlarmCnt + "</td><td>" + data[i].StresstestId + "</td><td>" + data[i].StresstestRunId + "</td><td>" + data[i].Name + "</td><td>" + data[i].StackTrace + "</td><td>" + data[i].Timestamp + "</td></tr>";
}
if (txt != "") {
// #table is the selector for the table element in the html
$("#listErrorsTest2").append(txt);
}
}
};
});
});

Change this line:
if (getStressTestErrorInfo2.length >= 1) {
to:
if (getStressTestErrorInfo2.length >= 5) {
This way, it wont start the function, if the length is lower then 5.

The issues you have is that no matter the size of the array, you take the size and substract 5 to it. Allowing you to take the last 5 cells of an array ... long enough. If the length is below 5, the index will be negative.
Now, you can't simply update the condition if you want to get the values of smaller arrays.
You can simply set the index to 0 if it is negative :
var len = getStressTestErrorInfo2.length - 5;
if (len < 0) len = 0; //Array with less than 5 values.
And loop until you reach the end
while(len < getStressTestErrorInfo2.length){ ... }

My approach at the begging had some (stupid) flaws. Instead of showing the last 5 items I reversed the array and listed first five and added the condition
if (len > 5) len = 5;
so it did the trick.
$(function() {
$.getJSON("#myURL", function(getStressTestErrorInfo0) {
if (getStressTestErrorInfo0.length >= 1) {
var data = getStressTestErrorInfo0;
/*Function to reverse the array*/
function reverseArr(input) {
var ret = new Array;
for (var i = input.length - 1; i >= 0; i--) {
ret.push(input[i]);
}
return ret;
}
var reverseData = reverseArr(data);
var len = getStressTestErrorInfo0.length;
var data = getStressTestErrorInfo0;
var txt = "";
if (len > 0) {
if (len > 5) len = 5;
for (var i = 0; i < len; i++) {
// dynamically generating a table-row for appending in the table.
txt += "<tr><td>" + reverseData[i].AlarmNo + "</td><td>" + reverseData[i].AlarmCnt + "</td><td>" + reverseData[i].StresstestId + "</td><td>" + reverseData[i].StresstestRunId + "</td><td>" + reverseData[i].Name + "</td><td>" + reverseData[i].StackTrace + "</td><td>" + reverseData[i].Timestamp + "</td></tr>";
}
if (txt != "") {
//selector for the table element in the html
$("#listErrors").append(txt);
}
}
};
});
});

I am currently stuck on how to display this array

This is the code I currently have. I am having issues displaying the ordinals as I am not sure what for loop to put then in. Can someone please assist?
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + [i + 1] + " band is " + currentBand + "</li>";
}
var bands = i;
if (bands == 0) {
bands = i + "st";;
} else if (bands == 1) {
bands = i + "nd";
} else if (bands == 2) {
bands = i + "rd";
} else if (bands == 3) {
bands = i + "th";
} else if (bands == 4) {
bands = i + "th";
} else {
}
for (var i = 0; i < bandsListArray.length; i++) {
var newBandList = bandsListArray[i];
newBandString += "<li>My # " + [i + 1] + " band is " + currentBand + "</li>";
}
document.write(bandsString);
document.write(newBandString);

I'm not exactly sure what you're trying to do, but does this help? Instead of manually working out how to put the correct ordinal suffix ('st', 'nd', 'rd', etc.) on the numbers, I googled a function.
The ordinal_suffix_of function works like this:
This first part is the start of the function. Hopefully this is self-explanatory. We're creating a function that accepts one parameter, that will be named i inside the function.
function ordinal_suffix_of(i) {
This next part defines j and k. You can declare multiple variables while only typing var once by using commas, as this code does:
var j = i % 10,
k = i % 100;
This would do exactly the same thing:
var j = i % 10;
var k = i % 100;
The percent sign (%) is called "modulus" and is a mathematical operator. What it does is divide the left operand by the right operand and returns the remainder. So in the case of j, it's being assigned remainder of dividing i by 10. If i was 14, for example, j would be 4. If i was 179, j would be 9. The same thing happens for k except that it's divided by 100 instead of 10.
What it's effectively doing is extracting the last 1 digit (for j) and the last 2 digits (for k) and then just checking (in the if statements) what ordinal suffixes they should have.
The reason for k is that you always want numbers ending in 1, 2, or 3 to have the suffixes st, nd , and rd except when the number ends in 11, 12, or 13, in which case it should get the suffix th. So for example, 112 should be 112th, and 313513 should be 313513th. k handles this by making it so that if the number ends in 11, 12, or 13 we only add th. Note that 11 % 100 will result in 11, so this works for 11, 12, and 13 as well.
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + (i + 1) + " band is " + currentBand + "</li>";
}
for (var i = 0; i < bandsListArray.length; i++) {
var newBandList = bandsListArray[i];
newBandString += "<li>My " + ordinal_suffix_of(i + 1) + " band is " + newBandList + "</li>";
}
function ordinal_suffix_of(i) {
var j = i % 10,
k = i % 100;
if (j == 1 && k != 11) {
return i + "st";
}
if (j == 2 && k != 12) {
return i + "nd";
}
if (j == 3 && k != 13) {
return i + "rd";
}
return i + "th";
}
document.write(bandsString);
document.write(newBandString);

Try this, just make the code more simple
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + [i + 1] + " band is " + currentBand + "</li>";
newBandString += "<li> My #" + numeric(i+1) + " band is " + currentBand + "</li>";
}
function numeric(i){
var bands = i+"th";
if (i == 1) {
bands = i + "st";;
} else if (i == 2) {
bands = i + "nd";
} else if (i == 3) {
bands = i + "rd";
}
return bands;
}
document.write(bandsString);
document.write(newBandString);

If this is what you are trying to achieve is:
My 2nd band is Atmosphere
Then this how you might achieve it
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + (i + 1) + " band is " + currentBand + "</li>";
newBandString += "<li>My " + numberSuffix(i + 1) + " band is " + currentBand + "</li>";
}
function numberSuffix(number){
if(number % 10==1) return number+'st';
if(number % 10==2) return number+'nd';
if(number % 10==3) return number+'rd';
return number+'th';
}
document.write(bandsString);
document.write(newBandString);

Make a selectable html table with objects as values

I am been trying to create a html table that is populated by objects.
The table was supposed to be selectable by row (via hover), when the row was hovered over a function ran.
The table headers are in an array:
var topTitles = ["Type","Origin","Destination","T","A","G"];
all the data are sitting inside arrays,
var Type = [];
var Origin = [];
var Destination = [];
var T = [];
var A = [];
var G = [];
I tried to modify an example piece of code, but it was very difficult to conceptualize it and place it into a programatic solution. What is an easy way to map such data directly into a interactive table.
function createTable() {
var table = document.getElementById('matrix');
var tr = addRow(table);
for (var j = 0; j < 6; j++) {
var td = addElement(tr);
td.setAttribute("class", "headers");
td.appendChild(document.createTextNode(topTitles[j]));
}
for (var i = 0; i < origins.length; i++) {
var tr = addRow(table);
var td = addElement(tr);
td.setAttribute("class", "origin");
td.appendChild(document.createTextNode(mode[i]));
for (var j = 0; j < topTitles.length; j++) {
var td = addElement(tr, 'element-' + i + '-' + j);
td.onmouseover = getRouteFunction(i,j);
td.onclick = getRouteFunction(i,j);
}
}
}
function populateTable(rows) {
for (var i = 0; i < rows.length; i++) {
for (var j = 0; j < rows[i].elements.length; j++) {
var distance = rows[i].elements[j].distance.text;
var duration = rows[i].elements[j].duration.text;
var td = document.getElementById('element-' + i + '-' + j);
td.innerHTML = origins[i] + "<br/>" + destinations[j];
}
}
}
if (highlightedCell) {
highlightedCell.style.backgroundColor="#ffffff";
}
highlightedCell = document.getElementById('element-' + i + '-' + j);
highlightedCell.style.backgroundColor="#e0ffff";
showValues();
}

This is probably the easiest way I could think of building the table without changing your data structure and make it very clear where all the data is coming from. It is defiantly not the best code, but it should work for your situation.
CodePen
var topTitles = ["Type","Origin","Destination","T","A","G"];
var Type = ["Type1", "type2", "type3"];
var Origin = ["Origin1", "origin2", "origin3"];
var Destination = ["Destination1", "Destination2", "dest3"];
var T = ["t1", "t2","T3"];
var A = ["steaksauce", "a2", "a3"];
var G = ["G1", "G2", "G3"];
var appendString = [];
for(var i =0; i < topTitles.length; i++){
if(!i){
appendString.push("<tr><td>" + topTitles[i] + "</td>");
}
else if(i === topTitles.length -1){
appendString.push("<td>" + topTitles[i] + "</td></tr>");
}
else{
appendString.push("<td>" + topTitles[i] + "</td>");
}
}
for(var i =0; i < Type.length; i++){
appendString.push("<tr><td>" + Type[i] + "</td><td>" + Origin[i] + "</td><td>" + Destination[i] + "</td><td>" + T[i] + "</td><td>" + A[i] + "</td><td>" + G[i] + "</td></tr>");
}
var table = document.getElementById('table');
table.innerHTML = appendString.join('');

Adding an onclick event to a new html element only working on the last element

The problem is that when I create page number buttons at the bottom of the page the onclick only ever works with the last element created.
Here is what the page buttons look like:
for(var i = 0; i < numberOfPages; i++) {
if(Math.floor((((startIndex + 1) / 10) + 1)) == (i + 1)) {
var newElement = document.createElement("u");
document.getElementById("imagesNav").appendChild(newElement);
newElement.id = "imagesNavU";
var newElement = document.createElement("a");
document.getElementById("imagesNavU").appendChild(newElement);
var str = "page" + (i + 1);
newElement.innerHTML = i + 1;
newElement.onclick=function(){currentPageNumber(str);};
} else {
var newElement = document.createElement("a");
document.getElementById("imagesNav").appendChild(newElement);
var str = "page" + (i + 1);
newElement.innerHTML = i + 1;
newElement.onclick=function(){currentPageNumber(str);};
}
if(i + 1 != numberOfPages) {
document.getElementById("imagesNav").innerHTML += " ";
}
}
}
The first if statement just puts underline tags on if that element is the current page.
Edit: The problem has been solved. Thank you to everyone for their help!

The problem is with this part of the loop:
if(i + 1 != numberOfPages) {
document.getElementById("imagesNav").innerHTML += " ";
}
This is re-parsing all the HTML in the imagesNav element. This creates new <a> elements, which don't have the onclick bindings that the previous ones had.
Instead, you can append a <span> element containing the spaces.
var numberOfPages = 3;
var startIndex = 0;
for (var i = 0; i < numberOfPages; i++) {
if (Math.floor((((startIndex + 1) / 10) + 1)) == (i + 1)) {
var newElement = document.createElement("u");
document.getElementById("imagesNav").appendChild(newElement);
newElement.id = "imagesNavU";
var newElement = document.createElement("a");
document.getElementById("imagesNavU").appendChild(newElement);
var str = "page" + (i + 1);
newElement.innerHTML = i + 1;
newElement.onclick = function() {
currentPageNumber(str);
};
} else {
var newElement = document.createElement("a");
document.getElementById("imagesNav").appendChild(newElement);
var str = "page" + (i + 1);
newElement.innerHTML = i + 1;
newElement.onclick = function() {
currentPageNumber(str);
};
}
if (i + 1 != numberOfPages) {
var span = document.createElement('span');
span.innerHTML = ' ';
document.getElementById("imagesNav").appendChild(span);
}
}
function currentPageNumber(str) {
alert(str);
}
<div id="imagesNav">
</div>
Another way to do it is with insertAdjacentHTML, which adds HTML to an element without re-parsing what's already in it.
document.getElementById("imagesNav").insertAdjacentHTML('beforeend', ' ');
You should also see JavaScript closure inside loops – simple practical example because the way you're using the str variable, all the click handlers will use the value from the last iteration of the loop.

Conversion function in asp to Javascript

I'm trying to write asp-classic function in Javascript... but i can't seem to get it right... can someone help?
ASP:
Dim i
Dim sAscii
sAscii = ""
For i = 1 To Len(str)
sAscii = sAscii + "&#" + CStr(Asc(Mid(str, i, 1))) + ";"
Next
ascconv= sAscii
javascript:
var i;
str1 = document.getElementById('firstname').value;
var sAscii1;
i = 0;
sAscii1 = "";
for(i; i = str1.length; i++) {
sAscii1 = sAscii1 + "&#" + str1.charCodeAt(i) + ";";
}
document.getElementById('firstname').innerHTML = sAscii1;

To convert this function in javascript you have to do something like this:
var i,str1 = document.getElementById('firstname').value;
var sAscii1 = "";
for(var i=0; i < str1.length; i++) {
sAscii1 = sAscii1 + "&#" + str1.charCodeAt(i) + ";";
}
document.getElementById('firstname').value = sAscii1;//I think you made a mistake here...as you have a input variable you will get/set the value and not innerHTML
where charCodeAt is similar to Asc (converts to ascii code)

var i, sAscii = "", str = "This is a string";
for(i = 0; i < str.length; a++){
sAscii += "&#" + str[a].charCodeAt(0) + ";";
}