从表单到关联数组检索数据

Question

could somebody tell me how to pass values from form to 2d associative array? I made simple associative array and it was easy to write it, but now I have problem with 2d array and getSalary() function. getWorkload() works fine, but getSalary() doesn't work. I would be grateful for some tip or code modification.

 var salaries = [ [ "mrWh", ["intern", 2511], ["contractual", 2592], ["designated", 2932], ["certificated", 3411] ], [ "mrbchWht", ["intern", 2121], ["contractual", 2200], ["designated", 2522], ["certificated", 3000] ], [ "bchWht", ["intern", 1868], ["contractual", 1910], ["designated", 2200], ["certificated", 2600] ] ]; var worklooad = []; worklooad["20"] = 20; worklooad["25"] = 25; worklooad["30"] = 30; worklooad["35"] = 35; function getSalary() { var slr = 0; var formData = document.forms["data"]; var selEdLvl = formData.elements["edLvl"]; var selDegree = formData.elements["degrees"]; slr = salaries[selEdLvl][selDegree.value]; return slr; } function getWorkload() { var psm = 0; var formularz = document.forms["data"]; var selPsm = formularz.elements["workload"]; psm = worklooad[selPsm.value]; return psm; } function chkEtat(pStr) { var spl44 = document.getElementById("spl44"); if (!isNaN(pStr) && pStr !== "" && pStr <= getWorkload()) { spl44.style.fontSize = "22px"; pStr = pStr / getWorkload(); spl44.innerHTML = pStr.toFixed(2) + "<br>"; return pStr; } else if (isNaN(pStr)) { spl44.style.fontSize = "18px"; spl44.innerHTML = "Enter number." + "<br>"; return 0; } else if (pStr > getWorkload()) { var spl44 = document.getElementById("spl44"); spl44.innerHTML = "inappropriate value." + "<br>"; return 0; } else { document.getElementById("spl44").innerHTML = ""; } } function calcpTime() { var str = document.getElementById("inppn"); var vStr = document.getElementById("inppn").value; var rpvStr = vStr.replace(/,/g, '.'); rpvStr = parseFloat(rpvStr); var cmp = /^\\d{1,2}$/.test(vStr); if (cmp === true) { var nStr = vStr.concat(".0"); document.getElementById("inppn").value = nStr; var fnStr = parseFloat(nStr); return chkEtat(fnStr); } return chkEtat(rpvStr); } function calcSalaries() { calcpTime(); document.getElementById("spl55").innerHTML = getSalary() * calcpTime(); } function clearInps() { document.getElementById("data").reset(); } 

 <form id="data"> <div> <label>Education level: </label> <select id="edLvl"> <option value="" selected disabled hidden>Select</option> <option value="mrWh">Master with pedagogical preparation</option> <option value="mrbchWht">Master without pedagogical preparation</option> <option value="mrbchWht">Bachelor with pedagogical preparation</option> <option value="bchWht">Bachelor without pedagogical preparation</option> </select> </div> <div> <label>Ascension degree: </label> <select id="degrees"> <option value="" selected disabled hidden>Select</option> <option value="intern">intern</option> <option value="contractual">contractual</option> <option value="designated">designated</option> <option value="certificated">certificated</option> </select> </div> <div> <label>Workload: </label> <select id="workload"> <option value="" selected disabled hidden>Select</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> <option value="35">35</option> </select> </div> <div> <label>Workload: </label> <input onchange="calcSalaries()" type=text id="inppn"> <span id="spl44"></span> </div> <div> <label>Salary: </label> <span id="spl55"></span> </div> <button id="clear" onclick="clearInps()">Clear data</button> </form> 

Answer 1

Use .find to identify particular elements in an array:

 var salaries = [ [ "mrWh", ["intern", 2511], ["contractual", 2592], ["designated", 2932], ["certificated", 3411] ], [ "mrbchWht", ["intern", 2121], ["contractual", 2200], ["designated", 2522], ["certificated", 3000] ], [ "bchWht", ["intern", 1868], ["contractual", 1910], ["designated", 2200], ["certificated", 2600] ] ]; document.querySelector('#data').addEventListener('submit', e => e.preventDefault()); function getSalary() { const edLvlVal = document.querySelector('#edLvl').value; const degreeVal = document.querySelector('#degrees').value; const salary = salaries .find(([level]) => level === edLvlVal) .find(([degree]) => degree === degreeVal); console.log('salary ' + salary); } 

 <form id="data"> <div> <label>Education level: </label> <select id="edLvl"> <option value="" selected disabled hidden>Select</option> <option value="mrWh">Master with pedagogical preparation</option> <option value="mrbchWht">Master without pedagogical preparation</option> <option value="mrbchWht">Bachelor with pedagogical preparation</option> <option value="bchWht">Bachelor without pedagogical preparation</option> </select> </div> <div> <label>Ascension degree: </label> <select id="degrees"> <option value="" selected disabled hidden>Select</option> <option value="intern">intern</option> <option value="contractual">contractual</option> <option value="designated">designated</option> <option value="certificated">certificated</option> </select> </div> <div> <label>Workload: </label> <select id="workload"> <option value="" selected disabled hidden>Select</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> <option value="35">35</option> </select> </div> <div> <label>Workload: </label> <input onchange="calcSalaries()" type=text id="inppn"> <span id="spl44"></span> </div> <div> <label>Salary: </label> <span id="spl55"></span> </div> <button onclick="getSalary()">Get Salary</button> <button id="clear" onclick="clearInps()">Clear data</button> </form> 

But your data structure is very difficult to deal with - you should use an object instead, so you can access by string keys, which is much simpler than .find . Use something like this instead:

 const salaries = { mrWh: {intern: 2511, contractual: 2592, designated: 2932, certificated: 3411 }, mrbchWht: { intern: 2121, contractual: 2200, designated: 2522, certificated: 3000 }, bchWht: { intern: 1868, contractual: 1910, designated: 2200, certificated: 2600 } }; const prop1 = 'mrWh'; const prop2 = 'designated'; console.log(salaries[prop1][prop2]); 

Answer 2

I think your main issue is that you're missing .value in a couple of places. For example: var selEdLvl = formData.elements["edLvl"]; should probably be changed to var selEdLvl = formData.elements["edLvl"].value;

Answer 3

If you turn your salaries array into an "associative" one:

var salaries_assoc = salaries
.reduce(function(ac,d,i){
    ac[d[0]]=d.slice(1)
    .reduce(function(ac,d,i){
        ac[d[0]]=d[1];return ac
    },{});
    return ac
},{});
/*"{
    "mrWh": {
        "intern": 2511,
        "contractual": 2592,
        "designated": 2932,
        "certificated": 3411
    },
    "mrbchWht": {
        "intern": 2121,
        "contractual": 2200,
        "designated": 2522,
        "certificated": 3000
    },
    "bchWht": {
        "intern": 1868,
        "contractual": 1910,
        "designated": 2200,
        "certificated": 2600
    }
}"*/

Now you can do this in your event (or in your getSalaries function etc):

var value1 = document.getElementById("edLvl").value,//"mrWh"
    value2 = document.getElementById("degrees").value;//"intern"
salaries_assoc[value1] && salaries_assoc[value1][value2];//2511