<html>
<head>
<title>Using Javascript Map Object - RJM Programming - August, 2024 ... thanks to https://www.w3schools.com/js/tryit.asp?filename=tryjs_map_groupby and https://medium.com/@sotoer/your-foreach-example-has-the-wrong-order-of-params-which-you-are-also-demonstrating-in-your-sample-42f5491b604e</title>
<style>
td {
vertical-align: top;
}
</style>
<script type=text/javascript>

var m = new Map();
//m.set('b', 2);
//m.set('a', 1);
//m.forEach((k, v, m) => console.log(`key:${k} value:${v} map:${m}`));

var tippingpoint=200;
var tabletds='';
var rspan=1;
var doadd=false;
var text="";

// Fish~`~taylor,300;barramundi,400;perch,100;mullet,234

// Create an Array
var fruits = [
{name:"apples", quantity:300},
{name:"bananas", quantity:500},
{name:"oranges", quantity:200},
{name:"kiwi", quantity:150}
];

// Callback function to select low volumes
function myCallback({ quantity }) {
return quantity > tippingpoint ? "ok" : "low";
}

function mysimpleCallback(qty) {
//alert(qty);
return qty > tippingpoint ? "ok" : "low";
}

function addone(knownname, knownquantity) {
doadd=true;
//alert(knownname);
//alert(knownquantity);
if (('' + knownname) != 'undefined' && ('' + knownquantity) != 'undefined') {
fruits.push({name:knownname, quantity:knownquantity});
m.set(knownname, knownquantity);
} else if (('' + knownname) != 'undefined') {
fruits.push({name:knownname, quantity:0});
m.set(knownname, 0);
} else {
fruits.push({name:"", quantity:0});
m.set('', 0);
}
doadd=false;
beadjustable();
}

function fix(tdo) {
var idx=0;
if (tdo.id.indexOf('tdname') == 0) {
if (tdo.id != 'tdname') { idx=eval(('' + tdo.id).substring(6)); }
fruits[idx].name=tdo.innerHTML;
if (m.has("")) {
m.delete("");
m.set(fruits[idx].name, fruits[idx].quantity);
tdo.setAttribute('contenteditable', false);
}
beadjustable();
} else {
if (tdo.id != 'tdquantity') { idx=eval(('' + tdo.id).substring(10)); }
fruits[idx].quantity=tdo.innerHTML;
if (m.has(fruits[idx].name)) {
m.set(fruits[idx].name, fruits[idx].quantity);
}
beadjustable();
}
}

function thecall() {
var kk=0;

// Group by ok and low
text="These " + document.getElementById('topic').innerHTML.toLowerCase() + "s are Ok: <br>";
try {
const result = Map.groupBy(fruits, myCallback);

// Display Results
try {
for (let x of result.get("ok")) {
if (x.name != '' || x.quantity != 0) {
text += "" + x.name + " " + x.quantity + "<br>";
}
if (!m.has(x.name)) {
m.set(x.name, x.quantity);
}
}
} catch(ebad) { }
text += "<br>These " + document.getElementById('topic').innerHTML.toLowerCase() + "s are low: <br>";
try {
for (let x of result.get("low")) {
if (x.name != '' || x.quantity != 0) {
text += "" + x.name + " " + x.quantity + "<br>";
}
if (!m.has(x.name)) {
m.set(x.name, x.quantity);
}
}
console.log(result.get("ok"));
} catch(ebad) { }
} catch(overebad) {
text="These " + document.getElementById('topic').innerHTML.toLowerCase() + "s are Ok: <br>";
for (kk=0; kk<fruits.length; kk++) {
if (('' + fruits[kk].quantity).replace('-','').substring(0,1) >= '0' && ('' + fruits[kk].quantity).replace('-','').substring(0,1) <= '9') {
if (mysimpleCallback(fruits[kk].quantity) == 'ok') {
//alert(fruits[kk].name);
text += "" + fruits[kk].name + " " + fruits[kk].quantity + "<br>";
//alert('2:' + fruits[kk].name);
if (!m.has(fruits[kk].name)) {
//alert('3:' + fruits[kk].name);
m.set(fruits[kk].name, fruits[kk].quantity);
//alert('4:' + fruits[kk].name);
}
}
}
}
text += "<br>These " + document.getElementById('topic').innerHTML.toLowerCase() + "s are low: <br>";
for (kk=0; kk<fruits.length; kk++) {
if (('' + fruits[kk].quantity).replace('-','').substring(0,1) >= '0' && ('' + fruits[kk].quantity).replace('-','').substring(0,1) <= '9') {
if (mysimpleCallback(fruits[kk].quantity) == 'low') {
text += "" + fruits[kk].name + " " + fruits[kk].quantity + "<br>";
if (!m.has(fruits[kk].name)) {
m.set(fruits[kk].name, fruits[kk].quantity);
}
}
}
}

}
document.getElementById("demo").innerHTML = text;

}

function consolelog(inrec) {
if (rspan == 0) {
document.getElementById("tdname").innerHTML=inrec.split('value:')[1].split(' key:')[0].split(' map:')[0];
document.getElementById("tdquantity").innerHTML=inrec.split('key:')[1].split(' value:')[0].split(' map:')[0];
rspan=1;
} else if (inrec.split('value:')[1].split(' key:')[0].split(' map:')[0] == '') {
tabletds+='<tr><td contenteditable=true id=tdname' + rspan + ' onblur=fix(this);>' + inrec.split('value:')[1].split(' key:')[0].split(' map:')[0] + '</td><td contenteditable=true id=tdquantity' + rspan + ' onblur=fix(this);>' + inrec.split('key:')[1].split(' value:')[0].split(' map:')[0] + '</td></tr>';
rspan++;
} else {
tabletds+='<tr><td contenteditable=false id=tdname' + rspan + ' onblur=fix(this);>' + inrec.split('value:')[1].split(' key:')[0].split(' map:')[0] + '</td><td contenteditable=true id=tdquantity' + rspan + ' onblur=fix(this);>' + inrec.split('key:')[1].split(' value:')[0].split(' map:')[0] + '</td></tr>';
rspan++;
}
//alert(inrec);
if (doadd) {
fruits.push({name:"", quantity:0});
m.set('', 0);
tabletds+='<tr><td contenteditable=true id=tdname' + rspan + ' onblur=fix(this);></td><td contenteditable=true id=tdquantity' + rspan + ' onblur=fix(this);>0</td></tr>';
rspan++;
doadd=false;
}
}

function beadjustable() {
tippingpoint=eval('' + document.getElementById('itip').value);
document.getElementById("mysup").title='Add an editable ' + document.getElementById('topic').innerHTML.toLowerCase();
thecall();
tabletds='';
rspan=0;
m.forEach((k, v, m) => consolelog(`key:${k} value:${v} map:${m}`));
document.getElementById("thd").innerHTML = document.getElementById("thd").innerHTML.split(document.getElementById("demo").innerHTML)[0] + document.getElementById("demo").innerHTML + '</td></tr>' + tabletds;
document.getElementById("demo").rowSpan = rspan;
document.getElementById("tdtip").rowSpan = rspan;
document.getElementById('itip').value = tippingpoint;
}

function askall() {
var delall=false;
var enterall=prompt('Optionally copy all your CSV (comma separated values) data to apply here (where ; or | can be record delimiters). Optionally prefix this CSV data with your topic followed by ~`~' + String.fromCharCode(10) + String.fromCharCode(10) + 'Example ...' + String.fromCharCode(10) + 'Fish~`~taylor,300;barramundi,400;perch,100;mullet,234', '');
if (enterall == null) { enterall=''; }
if (enterall.indexOf('~`~') != -1) { document.getElementById('topic').innerHTML=enterall.split('~`~')[0]; enterall=enterall.replace(enterall.split('~`~')[0] + '~`~', ''); }
if (enterall.indexOf(',') != -1) {
var elines=[];
if (enterall.indexOf(String.fromCharCode(10)) != -1) {
elines=enterall.split(String.fromCharCode(10));
} else if (enterall.indexOf(';') != -1) {
elines=enterall.split(';');
} else if (enterall.indexOf('|') != -1) {
elines=enterall.split('|');
}
for (var ie=0; ie<elines.length; ie++) {
if (elines[ie].indexOf('","') != -1 && elines[ie].indexOf('","') < elines[ie].indexOf(',')) {
if (!delall) {
delall=true;
fruits=[];
m = new Map();
}
if (elines[ie].substring(1).replace('-','').substring(0,1) >= '0' && elines[ie].substring(1).replace('-','').substring(0,1) <= '9') {
addone(elines[ie].split('","')[1].split('"')[0], elines[ie].substring(1).split('"')[0]);
} else {
addone(elines[ie].substring(1).split('"')[0], elines[ie].split('","')[1].split('"')[0]);
}
} else if (elines[ie].indexOf('",') != -1 && elines[ie].indexOf('",') < elines[ie].indexOf(',')) {
if (!delall) {
delall=true;
fruits=[];
m = new Map();
}
if (elines[ie].substring(1).replace('-','').substring(0,1) >= '0' && elines[ie].substring(1).replace('-','').substring(0,1) <= '9') {
addone(elines[ie].split('",')[1].split(',')[0], elines[ie].substring(1).split('"')[0]);
} else {
addone(elines[ie].substring(1).split('"')[0], elines[ie].split('",')[1].split(',')[0]);
}
} else if (elines[ie].indexOf(',"') != -1 && elines[ie].indexOf(',"') == elines[ie].indexOf(',')) {
if (!delall) {
delall=true;
fruits=[];
m = new Map();
}
if (elines[ie].substring(0).replace('-','').substring(0,1) >= '0' && elines[ie].substring(0).replace('-','').substring(0,1) <= '9') {
addone(elines[ie].split(',"')[1].split('"')[0], elines[ie].substring(0).split(',')[0]);
} else {
addone(elines[ie].substring(0).split(',')[0], elines[ie].split(',"')[1].split('"')[0]);
}
} else if (elines[ie].indexOf(',') != -1) {
if (!delall) {
delall=true;
fruits=[];
m = new Map();
}
if (elines[ie].substring(0).replace('-','').substring(0,1) >= '0' && elines[ie].substring(0).replace('-','').substring(0,1) <= '9') {
addone(elines[ie].substring(0).split(',')[1], elines[ie].substring(0).split(',')[0]);
} else {
addone(elines[ie].substring(0).split(',')[0], elines[ie].substring(0).split(',')[1]);
}
}
}
beadjustable();
}
}


</script>
</head>
<body onload='beadjustable();'>
<h1>Arrays and Maps</h1>
<h3>RJM Programming - August, 2024 ... thanks to https://www.w3schools.com/js/tryit.asp?filename=tryjs_map_groupby and https://medium.com/@sotoer/your-foreach-example-has-the-wrong-order-of-params-which-you-are-also-demonstrating-in-your-sample-42f5491b604e</h3>
<br>
<table id=mytable border=20 style="width:80%;" cellpadding=10 cellspacing=10>
<thead id=thd>
<tr><th colspan=4><span title='Double click to be able to enter CSV data' id=topic contenteditable=true onblur=beadjustable(); ondblclick=askall();>Fruit</span> Report <sup id=mysup style=cursor:pointer; title='Add an editable fruit' onclick=addone();>++</sup></th></tr>
<tr><th>Name</th><th>Quantity</th><th>Tipping Value</th><th>Ok versus Low Report</th></tr>
<tr><td id=tdname contenteditable=false onblur=fix(this);></td><td id=tdquantity contenteditable=true onblur=fix(this);></td><td id=tdtip rowspan=1><input style=width:98%; onblur="tippingpoint=eval('' + this.value); beadjustable();" onchange="tippingpoint=eval('' + this.value); beadjustable();" type=number id=itip step=1 value=200 min=0></input></td><td id=demo rowspan=1></td></tr>
</thead>
<tbody id=tbd>
</tbody>
</table>
</body>
</html>