We Keep Coding

Same data adds twice to JavaScript table instead of adding two different things to the table

I have a program that pulls from an API and displays the results on a table. What should be happening is that each row should be different data. However, when this runs, it adds the data with the ID of 4 twice, completely skipping over the data with the ID of 3. At first, I thought I must've goofed something up with the GET requests. I went to check, and turns out it is getting the data, but not adding it to the table. I moved all of the code to add to the table inside of the for loop, but the same problem happened. If it's any use, I'm using Tomcat to handle the API.
Attached is the function I use to add rows to the table.
function addRow(tableName, rowData) {
for (var h = 0; h < rowData.length; h++) {
var ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
if(ajaxRequest.status == 200){
let table = document.getElementById(tableName);
let row = table.insertRow(1);
var order = JSON.parse(ajaxRequest.responseText);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
var cell5 = row.insertCell(5);
var cell6 = row.insertCell(6);
var cell7 = row.insertCell(7);
var cell8 = row.insertCell(8);
var cell9 = row.insertCell(9);
var cell10 = row.insertCell(10);
cell0.innerHTML = order.id;
cell1.innerHTML = order.name;
cell2.innerHTML = order.time;
cell3.innerHTML = order.type;
cell4.innerHTML = order.creamerAmount + " " + order.creamerType;
cell5.innerHTML = order.sugarAmount;
cell6.innerHTML = order.coffeeType;
cell7.innerHTML = order.teaType;
cell8.innerHTML = order.hotChocolateType;
cell9.innerHTML = order.smoothieType;
cell10.innerHTML = order.protein;
} else {
//I'm aware this is bad, not sure how to handle it otherwise though...
h--;
}
}
}
ajaxRequest.open('GET', 'http://localhost:13760/cafe/cafe/orders/' + rowData[h]);
ajaxRequest.send();
}
} ```

Looks like Andreas is right.
Try const ajaxRequest = ... instead of var ajaxRequest = ....
It's hard for me to explain in detail what is happening here. My guess is the following:
As said above, you use the same ajaxRequest, as if it would be declared before the for loop.
Secondly, as the request is async, it gets sent from the event loop after the main thread code is completed. Which means it sends the request to id = 4 two times.
Still I can be mistaken in the details (and please correct me if I'm wrong), but changing var to const should help. Have you tried it?

JavaScript global var return undefined

in my project i have this JavaScript function as shown below;
function refTable(clickon) {
t_threads = document.getElementById("tab_threads");
//Activate timeline for specific thread on active thread onclick in table
t_line = document.getElementById("tline");
t_lineH1 = GetElementInsideContainer("tl_tit", "tl_h4");
var c_type = clickon;
$.ajax({
type: "POST",
url: "trefresh",
data: {},
success: function (data) {
t_threads.innerHTML = "";
$.each(data, function (index) {
var row = t_threads.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = data[index].OptionID;
cell2.innerHTML = data[index].OptionKey;
cell3.innerHTML = data[index].OptionVal;
cell4.innerHTML = data[index].OptionVal2;
cell5.innerHTML = data[index].OptionThread;
});
var rows = t_threads.rows; // or table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
rows[i].onclick = (function() { // closure
var cnt = i; // save the counter to use in the function
return function() {
task_det(this.cells[0].innerHTML);
t_line.style.visibility='visible';
t_lineH1.innerHTML = "TIMELINE FOR PROC. ID: "+this.cells[0].innerHTML;
c_type = this.cells[4].innerHTML;
getTline(c_type)
//alert("row"+cnt+" data="+this.cells[0].innerHTML);
}
})(i);
}
}
});
alert(c_type);
setTimeout(refTable.bind(c_type), 10000);
}
the problem is that anytime the global var c_type is populated in my jquery function, at the and, where i place alert, the variable result 'undefined'
How can i make c_type global and save it's value?
Thanks in advance

To make a variable global just declare it outside of a function
var c_type = clickon;
and other option could be defining it in the global object, which in browser would be the window..
window.c_type = clickon;
Anyway isn't a good Practice defining global variables, it might cause so trouble with other third part libraries.
Note:
make sure you don't define the same variable, inside a function you want to work with, in that case the function will take the variable defined in the function...

keep javascript variables values obtained by id after refresh

i'm getting some html input values with javascript that i insert in a table , but those turned null when i refresh , how can i keep those value visible after refresh . I know i should set and get my cookies but i just don't how .
here is my javascript code :
function myFunction(tableID) {
var x = document.getElementById("name").value;
var ad = document.getElementById("address").value;
var nu = document.getElementById("tel").value;
var pr = document.getElementById("product").value;
var s = document.getElementById("size").value;
var d = document.getElementById("date").value;
var st = document.getElementById("statu").value;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = x;
var cell2 = row.insertCell(1);
cell2.innerHTML = ad;
var cell3 = row.insertCell(2);
cell3.innerHTML = nu;
var cell4 = row.insertCell(3);
cell4.innerHTML = pr;
var cell5 = row.insertCell(4);
cell5.innerHTML = s;
var cell6 = row.insertCell(5);
cell6.innerHTML = d;
var cell7 = row.insertCell(6);
cell7.innerHTML = st;
}
any help ?
THanks

One way to do it would be to stick them in sessionStorage (which will be accessible across page refreshes).
To store them:
sessionStorage.setItem('foo', 'bar');
to get them:
sessionStorage.getItem('foo');
When your page is loaded, you can get them from the sessionStorage to repopulate your elements.

you can use localStorage
// before you leave your page , save all your variables here
window.onunload = function(){
// save them one by one in to localStorage
localStorage.setItem("x", x)
...
}
when you enter the page load from localStorage first :
// before all your code work.
window.onload = function (){
// set value back one by one
document.getElementById("name").value = localStorage.getItem("x");
...
}

Retrieve a variable value from a table cell in javascript

How do I retrieve a variable value from a table cell using javascript.
var clicks = new Array();
var click1;
var click2;
function addTableRow() {
click1 = parseInt(document.getElementById('caption').value),10;
click2 = parseInt(document.getElementById('caption1').value),10;
var clicks = [click1, click2];
clicks.push({c1:clicks[0], c2:clicks[1]});
var table = document.getElementById('table');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var input = document.createElement('input');
input.setAttribute("type", "text");
input.style.width = "100px";
cell2.appendChild(input);
cell3.innerHTML = "x:" + clicks[0] + ", y:" + clicks[1];
var btnDelete = document.createElement('Button');
var btnDeleteText = document.createTextNode("Delete");
btnDelete.appendChild(btnDeleteText);
btnDelete.style.width = "80px";
cell4.appendChild(btnDelete);
btnDelete.onclick = function() {
var rowToDelete = this.parentNode.parentNode;
var parentReference = rowToDelete.parentNode;
parentReference.removeChild(rowToDelete);
var inputsInTable = document.getElementsByTagName('input');
for(i=0; i<inputsInTable.length; i++)
{
??????????????????????
}
}
}
Basically, when I add a row the clicks get stored in the array. When I delete a row, I need to update the array by rebuilding it.
I hope it's more clear now.
Any help would be very appreciated.
Marco

Is there a way to transfer an object from one local storage to another local storage?

I am trying to move an object from one localStorage to another localStorage based on whether or not a checkbox in a table is ticked.
// version 1.0
// Developer
// Date: Tuesday December 29th 2015
// Registeration for Cars and stuff as well as table to retreive the Car information
var Car = [];
function carReg(storagekey) {
alert('submitted');
"use strict";
// checks localstorage to see if there are already values and then keeps those values rather than deleteing them
//Car = JSON.parse(localStorage.getitem(storagekey));
// if (Car == null) {
// Car = [];
// }
// push all of the data into localStorage under the specific variable id's
Car.push({
Brand: document.getElementById("mySelect").value,
Model: document.getElementById("selectModel").value,
Age: document.getElementById("carAge").value,
KM: document.getElementById("km").value,
Name: document.getElementById("name").value,
ContactInfo: document.getElementById("cInfo").value,
})
// stores everthing into local storage under the specified key
localStorage.setItem(storagekey, JSON.stringify(Car))
}
/////////////////////////////
/// Table Code starts here//
///////////////////////////
function maketable() {
// get data from localStorage
var carReg = JSON.parse(localStorage.getItem("register"))
// Variables for the table values and classifications
var table, row, cell1, cell2, cell3, cell4, cell5, cell6;
table = document.getElementById('ownedCar')
// Row definers
for (var index = 0; index < carReg.length; index++) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = index;
row = table.insertRow(index+1)
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);
cell4 = row.insertCell(3);
cell5 = row.insertCell(4);
cell6 = row.insertCell(5);
cell7 = row.insertCell(6);
// row classifications
cell1.innerHTML = carReg[index].Brand
cell2.innerHTML = carReg[index].Model
cell3.innerHTML = carReg[index].Age
cell4.innerHTML = carReg[index].KM
cell5.innerHTML = carReg[index].Name
cell6.innerHTML = carReg[index].ContactInfo
cell7.appendChild(checkbox);
}
}
function selling() {
//query from localStorage
var carReg = JSON.parse(localStorage.getItem("register"))
for (var index = 0; index < carReg; index++) {
if (!(document.getElementById(index).checked)) {
index = localStorage.setItem("sell", JSON.stringify(carReg))
}
}
}
Basically the part that should be doing this is this.
function selling() {
//query from localStorage
var carReg = JSON.parse(localStorage.getItem("register"))
for (var index = 0; index < carReg; index++) {
if (!(document.getElementById(index).checked)) {
index = localStorage.setItem("sell", JSON.stringify(carReg))
}
}
}
But it isn't doing anything. Is there something that I'm missing? Or is it just that my if statement part is wrong?

I found what the answer was I was missing a '.length' in my for statement. Thanks wapsee!