Блог

 const crud =  ["Create", "Update"]
const whatCRUD = ["Company", "Person", "Hobby"];
var choice = document.getElementById("selectCRUD");
var what1 = document.getElementById("createSel");
var input2 = document.getElementById("input2")
var btnCU = document.getElementById("btnCU");
const url = "https://dueinator.dk/CA2/api/";


choice.innerHTML = choicesToHTML(crud);
what1.innerHTML = choicesToHTML(whatCRUD);
what1.addEventListener("change", createInputFields);
setInputField2();
btnCU = addEventListener("click",postMethod);

function choicesToHTML(choices) {
    return choices.map(choice => "<option value=""   choice   "">"   choice   "</option>");
}

function setInputField2() {
    input2.innerHTML = createInputFields();
}

function createInputFields() {
    var selectedCRUD = what1.value;
    console.log(selectedCRUD);
    var inputs = "";
    switch (selectedCRUD) {   
        case "Company":
            inputs  = "<input id="cName" type="text" placeholder="Company name..">";
            inputs  = "<input id="cDesc" type="text" placeholder="Company description..">";
            inputs  = "<input id="cCVR" type="number" value="70000601">";
            inputs  = "<input id="cNumOfEmp" type="number" placeholder="Amount of employees..">";
            inputs  = "<input id="cMarketValue" type="number" placeholder="Market value..">";
            inputs  = "<input id="cEmail" type="text" placeholder="Email">";
            inputs  = "<input id="cPhone" type="number" placeholder="Phone number">";
            inputs  = "<input id="cAddress" type="text" placeholder="Address">";
            return inputs;
        case "Person":
            inputs  = "P<input id="pFName" type="text"> <br>";
            inputs  = "<input id="pLName" type="text"> <br>";
            inputs  = "<input id="pHobby" type="text"> <br>";
            inputs  = "<input id="pEmail" type="text"> <br>";
            inputs  = "<input id="pPhone" type="number"> <br>";
            inputs  = "<input id="pAdress" type="text"> <br>";
            return inputs;
        case "Hobby":             
            inputs  = "H<input id="hName" type="text" placeholder="Write the name here..">";
            inputs  = "<input id="hDesc" type="text"> placeholder="Write the desc here.."";
            return inputs;
        default:
            alert("Something went wrong, please try again or reload page (F5)");
            return "<input type="text" disabled="disabled">";
    }
}

function postMethod() {
    var data = createData;
    fetch(url   what1.value, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json; charset=utf-8' },
        body: JSON.stringify(data) // body data type must match "Content-Type" header
    }).then((res) => res.json()).then((data) => {
        console.log('data from post', data);        
        alert("Entity has been updated");
    }).catch(error => console.log(error));
}

function createData() {
    var selectedEntity = what1.value;
    switch(selectedEntity) {
        case "Hobby":
            var hName = document.getElementById("hName");
            var hDesc = document.getElementById("hDesc");
            var hData = {hName, hDesc}
            return hData;
        case "Company":
            var cName = document.getElementById("cName");
            var cDesc = document.getElementById("cDesc");
            var cCVR = document.getElementById("cCVR");
            var cNumOfEmp = document.getElementById("cNumOfEmp");
            var cMarketValue = document.getElementById("cMarketValue");
            var cEmail = document.getElementById("cEmail");
            var cPhone = document.getElementById("cPhone");
            var cAddress = document.getElementById("cAddress");
            var cData = {cName, cDesc, cCVR, cNumOfEmp, cMarketValue, cEmail, cPhone, cAddress};
            return cData;
        case "Person":
            var pFName = document.getElementById("pFName");
            var pLName = document.getElementById("pLName");
            var pHobby = document.getElementById("pHobby");
            var pEmail = document.getElementById("pEmail");
            var pPhone = document.getElementById("pPhone");
            var pAddress = document.getElementById("pAddress");
            var pData = {pFName, pLName, pHobby, pEmail, pPhone, pAddress}
            return pData;
    }
}  

 <!DOCTYPE html>
<html>

  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link href="style.css" rel="stylesheet" />
  </head>

  <body>

    <h6>C(R)UD</h6>
  
    <label>Choose what you wanna do</label>
    <select id="selectCRUD" class="mdb-select md-form"></select>
    <labal>Choose what you want to mod</labal>
    <select id="createSel" class="mdb-select md-form"></select>
    <button id="btnCU" type="button">Create/Update entity</button>
    <span id="input2"></span>

    <script src="bundle.js"></script>
  </body>

</html>