Pushing user input to Localstorage array

Question

i am trying to figure out a function that can push "Employee" skills into my localStorage via user input and then output a table with the data or update the existing table. I have a working table. Does anyone have an idea where to go from here? :)

i am also fully aware that localStorage isn't the best option.. But this is for a school project and we are not working with databases yet!

class Employee {
// vi bruger en constructor funktion for at lave en opskrift på objekter af en bestemt type.
//this metoden benyttes til at referere til det tilhørende objekt
constructor(name, gender, department, yy, email) {
    this.name = name;
    this.gender = gender;
    this.department = department;
    this.email = email;
    this.skills = [];
}
addNewSkill(skill){
    this.skills.push(skill);
}}

//Employee Database "Localstorage"
if(localStorage.getItem("Employee") == null) {
    var employeeList = [];
    employeeList.push (new Employee("Simon", "Male", "HR", 1999, "SM1@cbs.dk"));
    employeeList.push (new Employee("Mads", "Male","IT", 1999,  "MS@cbs.dk"));
    employeeList.push (new Employee("Jessica", "Female", "Sales",1998, "JT@cbs.dk"));
    employeeList.push (new Employee("Benjamin", "Male","IT", 1997, "BN@cbs.dk"));

    var employeeListString = JSON.stringify(employeeList);
    localStorage.setItem("Employee", employeeListString);
    document.querySelector("#employees").appendChild(buildTable(employeeList));
} else {
    var employeeList = JSON.parse(localStorage.getItem("Employee"));
}

//Function creates table for employeeList
function buildTable(data) {
    let table = document.createElement("table");

        // Create table head and body
        table.appendChild(document.createElement("thead"));
        table.appendChild(document.createElement("tbody"));

        let fields = Object.keys(data[0]);
        let headRow = document.createElement("tr");
        fields.forEach(function (field) {
            let headCell = document.createElement("th");
            headCell.textContent = field;
            headRow.appendChild(headCell);
        });
        table.querySelector("thead").appendChild(headRow);
        data.forEach(function (object) {
            let row = document.createElement("tr");
            fields.forEach(function (field) {
                let cell = document.createElement("td");
                cell.textContent = object[field];
                if (typeof object[field] == "number") {
                    cell.style.textAlign = "left";
                }
                row.appendChild(cell);
            });
            table.querySelector("tbody").appendChild(row);
        });
        return table;

    }

document.querySelector("#employees").appendChild(buildTable(employeeList));

Answer 1

The main problem you are facing at is:

Storing data to local Storage will only store data. Employee is a class and addNewSkill is a method of this class, so that information will be lost when storing the data.

The second problem you have is, you have no unique IDs for the employee. So how to know if you add a skill for a given employee how to update that skill to exactly that employee? There might be better ways, I've used the index you get from the stored json array. Not the best solution, but it works.

There might also be better ways to map the data back to the Employee class. But I guess this should help you to proceed from where you got stuck:

<div id="employees"></div>


<script>

    class Employee {
        constructor(name, gender, department, email, skills) {
            this.name = name;
            this.gender = gender;
            this.department = department;
            this.email = email;
            this.skills = [];
        }

        addNewSkill(jsonOrderedIndex, skill) {
            this.skills.push(skill);
            this.persistEmployeeDataToLocalStorage(jsonOrderedIndex);
        }

        persistEmployeeDataToLocalStorage(jsonOrderedIndex) {
            let employeeListArray = JSON.parse(localStorage.getItem("Employee"));
            employeeListArray[jsonOrderedIndex] = this;
            var employeeListString = JSON.stringify(employeeListArray);
            localStorage.setItem("Employee", employeeListString);
            console.log(employeeListArray, jsonOrderedIndex, this,localStorage.getItem("Employee"));
        }
    }

    function buildTable(employees) {
        let table = document.createElement("table");
        table.appendChild(document.createElement("thead"));
        table.appendChild(document.createElement("tbody"));

        employees.forEach(function (employee, exmployeeIndex) {
            let row = document.createElement("tr");
            let dummy = new Employee(employee.name, employee.gender, employee.department, employee.email, employee.skills);
            let fields = Object.keys(dummy);
            if(0 === exmployeeIndex) { // first time in iteration, create table head here
                let headRow = document.createElement("tr");
                fields.forEach(function (field) {
                    let headCell = document.createElement("th");
                    headCell.textContent = field;
                    headRow.appendChild(headCell);
                });
                table.querySelector("thead").appendChild(headRow);
            }

            fields.forEach(function (field, fieldIndex) {
                let cell = document.createElement("td");
                cell.textContent = employee[field];

                if(fieldIndex == fields.length -1) { // check for last occurence of fields
                    let inputField = document.createElement('input');
                    inputField.type = "text";
                    cell.appendChild(inputField);

                    let saveSkillz = document.createElement('button');
                    saveSkillz.innerHTML = "save";
                    cell.appendChild(saveSkillz);

                    saveSkillz.addEventListener(
                        'click', 
                        function(){
                            dummy.addNewSkill(
                                exmployeeIndex, // this is the index defined from exmployees.forEach...index
                                this.closest('td').querySelector('input').value
                            )
                        }
                    );
                }

                row.appendChild(cell);
            });

            table.querySelector("tbody").appendChild(row);
        });
        return table;

    }


//Employee Database "Localstorage"
if(localStorage.getItem("Employee") == null) {
    var employeeList = [];
    employeeList.push (new Employee("Simon", "Male", "HR", 1999, "SM1@cbs.dk"));
    employeeList.push (new Employee("Mads", "Male","IT", 1999,  "MS@cbs.dk"));
    employeeList.push (new Employee("Jessica", "Female", "Sales",1998, "JT@cbs.dk"));
    employeeList.push (new Employee("Benjamin", "Male","IT", 1997, "BN@cbs.dk"));

    var employeeListString = JSON.stringify(employeeList);
    localStorage.setItem("Employee", employeeListString);
    document.querySelector("#employees").appendChild(buildTable(employeeList));
} else {
    var employeeList = JSON.parse(localStorage.getItem("Employee"));
}


document.querySelector("#employees").appendChild(buildTable(employeeList));

</script>