试图从 Javascript 中的 output 中删除 JSON.stringfy 格式

Question

我试图用 javascript 到 output 获取一个没有 JSON.stringify 的数组的 html 代码。 我没有进行任何输入验证或其他任何操作，只是在 html 页面中尝试使用 arrays 并尝试在此数组中的 output 对象。 我找到了一个适用于我的代码的 JSON-stringify 示例，但我想获得没有 JSON 格式的 output。 例如这样的：

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

此代码如下所示：

 let users = []; // example {id:1592304983049, Firstname: 'John', Lastname: 'Doe 'Email: john.doe@test.com} 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 class="formBox"> <label for="firstname">Firstname</label> <input type="text" id="firstname" placeholder="Firstname" /> </div> <div class="formBox"> <label for="lastname">Lastname</label> <input type="text" id="lastname" placeholder="Lastname" /> </div> <div class="formBox"> <label for="email">Email</label> <input type="text" id="email" placeholder="Email" /> </div> <div class="formBox"> <button id="btn">Click to Add</button> </div> <div id="msg"> <pre></pre> </div> </form> </body> </html>

我对这段代码完全错误的方法还是只是调整 textContent 行的问题？

亲切的问候。

Answer 1

这可能是调整作业的问题：

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

Answer 2

循环遍历数组和属性。 将它们全部连接成所需格式的字符串，并将其分配给文本内容。

 let users = []; // example {id:1592304983049, Firstname: 'John', Lastname: 'Doe 'Email: john.doe@test.com} 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 class="formBox"> <label for="firstname">Firstname</label> <input type="text" id="firstname" placeholder="Firstname" /> </div> <div class="formBox"> <label for="lastname">Lastname</label> <input type="text" id="lastname" placeholder="Lastname" /> </div> <div class="formBox"> <label for="email">Email</label> <input type="text" id="email" placeholder="Email" /> </div> <div class="formBox"> <button id="btn">Click to Add</button> </div> <div id="msg"> <pre></pre> </div> </form> </body> </html>

试图从 Javascript 中的 output 中删除 JSON.stringfy 格式

问题描述

2 个解决方案

解决方案1
2 2022-01-03 17:59:56

解决方案2
0 2022-01-03 18:02:06

试图从 Javascript 中的 output 中删除 JSON.stringfy 格式

问题描述

2 个解决方案

解决方案1 2 2022-01-03 17:59:56

解决方案2 0 2022-01-03 18:02:06

解决方案1
2 2022-01-03 17:59:56

解决方案2
0 2022-01-03 18:02:06