Trying to remove JSON.stringfy format from output in Javascript-CodePudding

I trying to get a html-code with javascript to output an array without JSON.stringify. I haven't put in any input validations or anything else, just playing around with arrays and trying to output objects in this array in the html page. I found an example with JSON-stringify which works with my code, but I would like to get the output without JSON-format. For example something like this:

id: 1641231847264,
firstname: asgags
lastname: aasggd
email: sdashga

This code looks like this:

let users = [];
// example {id:1592304983049, Firstname: 'John', Lastname: 'Doe 'Email: [email protected]}
const addUser = (ev) => {
  ev.preventDefault(); //to stop the form submitting
  let user = {
    id: Date.now(),
    firstname: document.getElementById('firstname').value,
    lastname: document.getElementById('lastname').value,
    email: document.getElementById('email').value
  }
  users.push(user);
  document.forms[0].reset(); // to clear the form for the next entries
  //document.querySelector('form').reset();

  //for display purposes only
  console.warn('added', {
    users
  });
  let pre = document.querySelector('#msg pre');
  pre.textContent = '\n'   JSON.stringify(users, '\t', 2);

  //saving to localStorage
  //localStorage.setItem('MyUserList', JSON.stringify(users) );
}
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('btn').addEventListener('click', addUser);
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Putting User Input into JS Objects</title>
  <style>
    .formBox {
      padding: 0.5rem 2rem;
    }
  </style>
</head>

<body>
  <form>
    <div >
      <label for="firstname">Firstname</label>
      <input type="text" id="firstname" placeholder="Firstname" />
    </div>
    <div >
      <label for="lastname">Lastname</label>
      <input type="text" id="lastname" placeholder="Lastname" />
    </div>
    <div >
      <label for="email">Email</label>
      <input type="text" id="email" placeholder="Email" />
    </div>
    <div >
      <button id="btn">Click to Add</button>
    </div>
    <div id="msg">
      <pre></pre>
    </div>
  </form>
</body>

</html>

Have I totally wrong approach for this code or is it just a matter of tweaking the textContent line?

Kind Regards.

CodePudding user response：

It could be a matter of tweaking the assignment:

pre.textContent = users.map(user => 
    Object.entries(user).map(([key, value]) =>
        `${key}: ${value}`
    ).join("\n")
).join("\n--------\n");

CodePudding user response：

Loop through the array and properties. Concatenate them all into a string in the format you want, and assign that to the text content.

let users = [];
// example {id:1592304983049, Firstname: 'John', Lastname: 'Doe 'Email: [email protected]}
const addUser = (ev) => {
  ev.preventDefault(); //to stop the form submitting
  let user = {
    id: Date.now(),
    firstname: document.getElementById('firstname').value,
    lastname: document.getElementById('lastname').value,
    email: document.getElementById('email').value
  }
  users.push(user);
  document.forms[0].reset(); // to clear the form for the next entries
  //document.querySelector('form').reset();

  //for display purposes only
  console.warn('added', {
    users
  });
  let pre = document.querySelector('#msg pre');
  let msg = users.map(user => 
    Object.entries(user).map(([key, value]) => `${key}: ${value}`).join('\n')
  ).join('\n\n');
  pre.textContent = '\n'   msg;

  //saving to localStorage
  //localStorage.setItem('MyUserList', JSON.stringify(users) );
}
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('btn').addEventListener('click', addUser);
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Putting User Input into JS Objects</title>
  <style>
    .formBox {
      padding: 0.5rem 2rem;
    }
  </style>
</head>

<body>
  <form>
    <div >
      <label for="firstname">Firstname</label>
      <input type="text" id="firstname" placeholder="Firstname" />
    </div>
    <div >
      <label for="lastname">Lastname</label>
      <input type="text" id="lastname" placeholder="Lastname" />
    </div>
    <div >
      <label for="email">Email</label>
      <input type="text" id="email" placeholder="Email" />
    </div>
    <div >
      <button id="btn">Click to Add</button>
    </div>
    <div id="msg">
      <pre></pre>
    </div>
  </form>
</body>

</html>