Display Factory Functions

I created a factory function but I can not seem to get it working to display as an HTML element.
Source Code:

const teacherGenerate = (t_fname, t_lname, t_email, t_phone, t_username, t_password,
     t_computing, t_math_, t_physics, t_chemistry, t_id) => {
    return { 
        t_fname: t_fname,
        t_lname: t_lname,
        t_email: t_email,
        t_phone: t_phone,
        t_username: t_username,
        t_password: t_password,
        t_computing: t_computing,
        t_math_: t_math_,
        t_physics: t_physics,
        t_chemistry: t_chemistry,
        t_idL: t_id
      } 
    };

    const teacher = teacherGenerate('Γιάννης', 'Διονυσίου', 'john_dionisiou@gmail.com',
    6985692312, 'johndionisiou', 'letmein123', true, false, false, false, 1);

    document.getElementById("demo").innerHTML = teacher;

    console.log(teacher);

How can I display the data in a HTML format?

  • Thanks in advance

Well that depends how you want to display it.

firstly textContent > innerHTML for non-html strings atleast, security issues and some other reasons.

Anyways if you want to show teacher as an actual object, you can just use JSON.stringify(teacher) to turn it into a string

Example:

document.getElementByd("demo").textContent = JSON.stringify(teacher);

JSON.stringify(teacher) by itself transforms it into a string but a very messy one, literally one line.

to fix this you can apply arguments => JSON.stringify(teacher, null, 6)

but this will only display it nicely if id: demo is either a <pre> or <textarea> element, mainly because of whitespace insensitivity, there are ways to make other elements behave like pre and textarea but I forgot how tbh, it has something to do with css.

Anyways another way to go about it is by looping over the object and either making a new element or modifying one like this:

const entries = Object.entries(teacher);
const el = document.getElementById("demo");

for(const [key, value] of entries) {
    const p = document.createElement("p");
    const br = document.createElement("br");
    p.textContent = key + ": " + value;
    el.append(p, br);
}

Arguable which one is best practice but yea.

Also for your object you can shorten it by

{ propertyName: propertyName } => { propertyName }