We Keep Coding

How to get associative array elements and names. JS

Problem: Trying to get certain elements from a associative array, by using a loop. The loop is for multiple times i will go through. This associative array is associated to an array key. Ex: {eid0:{...},eid1:{...}}
It's to update a page with JS using DOM an no refresh. I've gone over StackOverflow and some other sites. I've looked in books. I can't seem to figure it out.
function display_oddsbet(id) {
var ds = document.getElementById("ds");
var tr = document.createElement("tr");
var td = document.createElement("td");
var tr0 = document.createElement("tr");
var tr1 = document.createElement("tr");
var tbl = document.createElement("table");
var tdsp = document.createElement("td");
var tdlg = document.createElement("td");
var tdloc = document.createElement("td");
var tda = document.createElement("td");
var tdh = document.createElement("td");
var tdsd = document.createElement("td");
var i;
var cnt= 0;
for (var s in id) {
var v = id[s];
for (var t in v) {
var k = v[t];
// for (var f in k) {
var ed = "eid" + cnt;
var i = v[ed];
cnt++;
console.log(i);
tr.classList = "eid" + cnt;
var a = i.awayteam_name;
var h = i['hometeam_name'];
var sd = i['startdate'];
var sport = i['sport_name'];
var league = i['league_name'];
var loc = i['location_name'];
tdsp.innerHTML = sport;
tdlg.innerHTML = league;
tdloc.innerHTML = loc;
tr0.appendChild(tdsp);
tr0.appendChild(tdloc);
tr0.appendChild(tdlg);
tbl.appendChild(tr0);
tda.innerHTML = a;
tdh.innerHTML = h;
tdsd.innerHTML = sd;
tr1.appendChild(tdsd);
tr1.appendChild(tda);
tr1.appendChild(tdh);
tbl.appendChild(tr1);
tr.appendChild(tbl);
// left
if (i['oddsbet'] == "1") {
td.innerHTML = "1";
td.style = "oddsbet";
tr.appendChild(td);
}
// 2 is on right
if (i['oddsbet'] == "2") {
td.innerHTML = "2";
td.classList = "oddsbet";
tr.appendChild(td);
}
// middle
else {
td.innerHTML = i['oddsbet'];
td.classList = "oddsbet";
tr.appendChild(td);
}
ds.appendChild(tr);
// }
}
}
return;
}
I get nothing doing this. I need to get i['awayteam_name']; and the rest from an API.

Don't ever forget. Garbage in Garbage out..
function display_oddsbet(id) {
var ds = document.getElementById("ds");
var tr = document.createElement("tr");
var td = document.createElement("td");
var tr0 = document.createElement("tr");
var tr1 = document.createElement("tr");
var tbl = document.createElement("table");
var tdsp = document.createElement("td");
var tdlg = document.createElement("td");
var tdloc = document.createElement("td");
var tda = document.createElement("td");
var tdh = document.createElement("td");
var tdsd = document.createElement("td");
Object.keys(id).forEach(function(key, index) {
var j = this[key];
Object.keys(j).forEach(function(key, index) {
//console.log(this[index]);
var ed = "eid" + cnt;
//var i = v[ed];
cnt++;
console.log(j[key]);
tr.classList = "eid" + cnt;
var a = j[key].awayteam_name;
var h = j[key]['hometeam_name'];
var sd = j[key]['startdate'];
var sport = j[key]['sport_name'];
var league = j[key]['league_name'];
var loc = j[key]['location_name'];
tdsp.innerHTML = sport;
tdlg.innerHTML = league;
tdloc.innerHTML = loc;
tr0.appendChild(tdsp);
tr0.appendChild(tdloc);
tr0.appendChild(tdlg);
tbl.appendChild(tr0);
tda.innerHTML = a;
tdh.innerHTML = h;
tdsd.innerHTML = sd;
tr1.appendChild(tdsd);
tr1.appendChild(tda);
tr1.appendChild(tdh);
tbl.appendChild(tr1);
tr.appendChild(tbl);
// left
if (j[key].oddsbet == "1") {
td.innerHTML = "1";
td.style = "oddsbet";
tr.appendChild(td);
}
// 2 is on right
if (j[key].oddsbet == "2") {
td.innerHTML = "2";
td.classList = "oddsbet";
tr.appendChild(td);
}
// middle
else {
td.innerHTML = j[key].oddsbet;
td.classList = "oddsbet";
tr.appendChild(td);
}
ds.appendChild(tr);
// }
}, j);
}, id);
return;
}

Dynamicly creating rows with Javascript then sending to Flask. No information being transfered

My issue is that my dynamically created rows ( by javascript) are not being sent to my back end python function.
I have created a script which creates a table row with 7 columns, in each column is a html input. These inputs will be used by the user to input information about products. ( serial number / part number etc...)
function Add_row() {
var tbl = document.getElementById('sct_components_table');
var iteration = tbl.tBodies[0].rows.length;
newRow = tbl.tBodies[0].insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.classList.add("sct_components_input")
newCell.innerHTML = '0' + iteration;
var newCell1 = newRow.insertCell(1);
newCell1.classList.add("sct_components_input");
var el = document.createElement('input');
el.type = 'text';
el.name = 'quantity';
el.value = '';
newCell1.appendChild(el);
var newCell2 = newRow.insertCell(2);
newCell2.classList.add("sct_components_input");
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'part_number';
newCell2.appendChild(el2);
var newCell3 = newRow.insertCell(3);
newCell3.classList.add("sct_components_input");
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'serial_number';
newCell3.appendChild(el3);
var newCell4 = newRow.insertCell(4);
newCell4.classList.add("sct_components_input");
var el4 = document.createElement('textarea');
el4.type = 'text';
el4.name = 'description';
newCell4.appendChild(el4);
var newCell5 = newRow.insertCell(5);
newCell5.classList.add("sct_components_input");
var el5 = document.createElement('input');
el5.type = 'text';
el5.name = 'installed_by_cm';
newCell5.appendChild(el5);
var newCell6 = newRow.insertCell(6);
newCell6.classList.add("sct_components_input");
var el6 = document.createElement('input');
el6.type = 'text';
el6.name = 'installed_after_cm';
newCell6.appendChild(el6);
var newCell7 = newRow.insertCell(7);
newCell7.classList.add("sct_components_input");
var el7 = document.createElement('textarea');
el7.type = 'text';
el7.name = 'notes';
newCell7.appendChild(el7);
}
The inputs are collected by a flask framework with the following code
temp_multi_quantity = request.form.getlist('quantity')
temp_multi_part_number = request.form.getlist('part_number')
temp_multi_serial_number = request.form.getlist('serial_number')
temp_multi_description = request.form.getlist('description')
temp_multi_installed_by_cm = request.form.getlist('installed_by_cm')
temp_multi_installed_after_cm = request.form.getlist('installed_after_cm')
temp_multi_notes = request.form.getlist('notes')
If I manually create the table rows on the html page they are uploaded successfully. It is only the 'Javascript Rows' which are ignored.
This code mimics an example found at: http://www.mredkj.com/tutorials/tablebasics5.html
This example is old and uses php not python, so that could be where I have got confused, but I used wireshark on the page and it appeared to be submitting.
If anyone could shed some light as to what concept I have misunderstood / the mistake I have made, it would be appreciated.

Avoid display duplicate elements in table

So I saved some data in localStorage.
I get them back from localstorage to the table.
When I click on the button to enter new data, the data entered earlier is duplicated in the table. When I refresh the page, everything is fine.
$(document).ready(function() {
function save() {
list.forEach(function(item) {
var nameNode = document.createTextNode(item.name);
var surnameNode = document.createTextNode(item.surname);
var dataNode = document.createTextNode(item.data);
var nrNode = document.createTextNode(item.nr);
var tdName = document.createElement("td");
var tdSurname = document.createElement("td");
var tdData = document.createElement("td");
var tdNr = document.createElement("td");
tdName.appendChild(nameNode);
tdSurname.appendChild(surnameNode);
tdData.appendChild(dataNode);
tdNr.appendChild(nrNode);
var tr = document.createElement("tr");
tr.appendChild(tdName);
tr.appendChild(tdSurname);
tr.appendChild(tdData);
tr.appendChild(tdNr);
// download table and insert cells and rows
var table = document.getElementById("table");
table.appendChild(tr);
});
}
list = jQuery.parseJSON(localStorage.getItem("osoba") === null ? [] : localStorage.getItem("osoba"));
save();
$("#send").click(function() {
var osoba = {};
osoba["name"] = document.getElementById("name").value;
osoba["surname"] = document.getElementById("subname").value;
osoba["data"] = document.getElementById("date_bth").value;
osoba["nr"] = document.getElementById("numer_phone").value;
list.push(osoba);
localStorage.setItem("osoba", JSON.stringify(list));
document.getElementById("name").value = "";
document.getElementById("surname").value = "";
document.getElementById("date_bth").value = "";
document.getElementById("numer_phone").value = "";
save();
});
});
How to avoid duplication in the table without reloading the page?

When you save, you need to first clear the data already on the table or it will be added to it again when you call save. Here's how you do that:
$(document).ready(function(){
function save() {
$("#table tr").remove(); // <- this
list.forEach(function (item) {
var nameNode = document.createTextNode(item.name);
var surnameNode = document.createTextNode(item.surname);
var dataNode = document.createTextNode(item.data);
var nrNode = document.createTextNode(item.nr);
var tdName = document.createElement("td");
var tdSurname = document.createElement("td");
var tdData = document.createElement("td");
var tdNr = document.createElement("td");
tdName.appendChild(nameNode);
tdSurname.appendChild(surnameNode);
tdData.appendChild(dataNode);
tdNr.appendChild(nrNode);
var tr =document.createElement("tr");
tr.appendChild(tdName);
tr.appendChild(tdSurname);
tr.appendChild(tdData);
tr.appendChild(tdNr);
// download table and insert cells and rows
var table = document.getElementById("table");
table.appendChild(tr);
});
}
list = jQuery.parseJSON(localStorage.getItem("osoba") === null ? [] : localStorage.getItem("osoba"));
save();
$("#send").click(function(){
var osoba = {};
osoba["name"] = document.getElementById("name").value;
osoba["surname"] = document.getElementById("subname").value;
osoba["data"] = document.getElementById("date_bth").value;
osoba["nr"] = document.getElementById("numer_phone").value;
list.push(osoba);
localStorage.setItem("osoba",JSON.stringify(list));
document.getElementById("name").value="";
document.getElementById("surname").value="";
document.getElementById("date_bth").value="";
document.getElementById("numer_phone").value="";
save();
});
});

Removing items from table

I'm solving this problem, I want to add and remove items to the HTML table using javascript. So far I've got this, but I don't really know how to make the removing part possible. Could you give me a hand please?
let inputJmeno = document.querySelector('#inputJmeno');
let inputPrijmeni = document.querySelector('#inputPrijmeni');
let inputVek = document.querySelector('#inputVek');
let buttonAdd = document.querySelector('#add');
let table = document.querySelector('table');
let tbody = document.querySelector('tbody');
let tr = document.querySelector('tr');
let jmeno = null;
let prijmeni = null;
let vek = null;
let pocetOsob = 0;
buttonAdd.addEventListener('click', add);
function add() {
jmeno = inputJmeno.value;
prijmeni = inputPrijmeni.value;
vek = inputVek.value;
let newRow = document.createElement('tr');
let newJmeno = document.createElement('td');
let newPrijmeni = document.createElement('td');
let newVek = document.createElement('td');
let krizek = document.createElement('span');
krizek.id = "krizek" + pocetOsob;
krizek.className = "krizClass";
newRow.id = "row" + pocetOsob;
newJmeno.innerHTML = jmeno;
newPrijmeni.innerHTML = prijmeni;
newVek.innerHTML = vek;
krizek.innerHTML = 'x';
tbody.appendChild(newRow);
newRow.appendChild(newJmeno);
newRow.appendChild(newPrijmeni);
newRow.appendChild(newVek);
newRow.appendChild(krizek);
load(pocetOsob);
pocetOsob++;
}
function load(p) {
let krz = document.querySelector('#krizek'+p);
console.log(p);
}

try
newRow.removeChild(krizek);

I can't add html elements dynamically in IE

I have this javascript code to add html elements dynamically. It works perfectly in chrome but it doesn´t work in IE, nothing happens, just seems to add spaces that are maybe divs. Please Help Me!!
<script type="text/javascript">
var numero = 0;
evento = function (evt) {
return (!evt) ? event : evt;
}
addCampo = function () {
nDiv = document.createElement('div');
nDiv.className = 'material';
nDiv.id = 'material' + (++numero);
nTabla = document.createElement('table');
nTabla.width = '800';
nTabla.cellPadding = '3';
nTabla.cellSpacing = '0';
nTabla.id = 'formularioContacto';
nTR = document.createElement('tr');
nTD4 = document.createElement('td');
nTD4.className = 'labelEntrega';
nTD5 = document.createElement('td');
nTD5.className = 'labelEntrega';
nTD6 = document.createElement('td');
nTD6.className = 'labelEntrega';
nTD7 = document.createElement('td');
nTD7.className = 'labelEntrega';
nTD8 = document.createElement('td');
nTD8.className = 'labelEntrega';
nTD9 = document.createElement('td');
nTD9.className = 'labelEntrega';
nIMG = document.createElement('img');
nIMG.src = '../../images/btnBuscar1.gif';
nIMG.width = '100';
nIMG.height = '28';
nIMG.name = 'imagen[]';
nIMG.border = '0';
nIMG.vAlign = 'bottom';
nCampo = document.createElement('input');
nCampo.name = 'codigo' + (numero);
nCampo.type = 'text';
nCampo.size = '10';
nCampo.id = 'formularioContactoCampoCodigo' + (numero);
var onchange1 = "buscaMateriales(this,";
var onchange2 = numero;
var onchange3 = ")";
var onchange = onchange1 + onchange2 + onchange3;
nCampo.setAttribute('onchange', onchange);
//nCampo.style = 'font-family:Arial';
nCampo1 = document.createElement('input');
nCampo1.name = 'unidad' + (numero);
nCampo1.type = 'text';
nCampo1.size = '10';
nCampo1.id = 'formularioContactoCampoUnidad' + (numero);
//nCampo1.style = 'font-family:Arial';
nCampo1.readOnly = 'readonly';
nCampo4 = document.createElement('input');
nCampo4.name = 'id' + (numero);
nCampo4.type = 'hidden';
nCampo4.size = '10';
nCampo4.id = 'formularioContactoCampoID' + (numero);
//nCampo4.style = 'font-family:Arial';
nCampo4.readOnly = 'readonly';
nCampo2 = document.createElement('input');
nCampo2.name = 'cantidad' + (numero);
nCampo2.type = 'text';
nCampo2.size = '5';
nCampo2.id = 'formularioContactoCampoCantidad';
//nCampo2.style = 'font-family:Arial';
nCampo3 = document.createElement('input');
nCampo3.name = 'descripcion' + (numero);
nCampo3.type = 'text';
nCampo3.size = '50';
nCampo3.id = 'formularioContactoCampoDescripcion' + (numero);
//nCampo3.style = 'font-family:Arial';
nCampo3.readOnly = 'readonly';
a1 = document.createElement('a');
a1.name = nDiv.id;
a1.href = '../../include/consultarMaterial.php?id=' + (numero);
a1.target = '_blank';
a = document.createElement('a');
a.name = nDiv.id;
a.href = '#';
a.onclick = elimCamp;
a.innerHTML = 'Eliminar';
nDiv.appendChild(nTabla);
nTabla.appendChild(nTR);
nTR.appendChild(nTD4);
nTD4.appendChild(nCampo);
nTD4.appendChild(nCampo4);
nTR.appendChild(nTD5);
nTD5.appendChild(nCampo1);
nTR.appendChild(nTD6);
nTD6.appendChild(nCampo2);
nTR.appendChild(nTD7);
nTD7.appendChild(nCampo3);
nTR.appendChild(nTD8);
nTD8.appendChild(a1);
a1.appendChild(nIMG);
nTR.appendChild(nTD9);
nTD9.appendChild(a);
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
elimCamp = function (evt) {
evt = evento(evt);
nCampo = rObj(evt);
div = document.getElementById(nCampo.name);
div.parentNode.removeChild(div);
}
rObj = function (evt) {
return evt.srcElement ? evt.srcElement : evt.target;
}
</script>

In IE, you can't append a TR element to a TABLE unless you first put it in a TBODY, THEAD, or TFOOT element.
Reference: http://webbugtrack.blogspot.com/2007/11/bug-171-dynamic-table-dom-gotcha-in-ie.html
#Ricardo: Here's the short version of what you need...
Table
+- TBody <=== This is REQUIRED when building a table DOM in IE
+- TR
+-TD
+-TD
+-TD
nTabla = document.createElement('table');//create your table
...
nTBody = document.createElement('tbody');//ADD THIS
...
nTR = document.createElement('tr');
nTR.appendChild(nTD);//add TDs to TRs
...
nTBody.appendChild(nTR);//add TRs to TBody
...
nTabla.appendChild(nTBody);//add TBody to Table