javascript - 将存储的数组对象显示在 Javascript 中列表到 HTML

Question

我正在尝试使用 Javascript 在 HTML 中显示我放入对象中的存储详细信息的列表。 应该是这样的

name: Tester1 , age: 1
name: Tester2 , age: 2
name: Tester3 , age: 3

我使用for in循环来显示所有输入的对象，但它发生了

Actual:
name: Tester1 , age: 1name: Tester1 , age: 1name: Tester2 , age: 2name: Tester1 , age: 1name: Tester2 , age: 2name: Tester3 , age: 3

这是 Jascript 的代码

var person = [];
function profile(e) {
    //to stop form from resubmitting
    e.preventDefault(); 

    var pProfile = {
        name: document.getElementById('name').value,
        age: document.getElementById('age').value
    }
    person.push(pProfile);
    //used to convert result to string
    var myJSON = JSON.stringify(person);

    document.forms[0].reset();

    //display in Final Obejct div 
    document.getElementById("fObject").innerHTML = myJSON;

    //display converted objects to
    for (let x in person){
         document.getElementById("rFormat").append("name: " + person[x].name + " , " + "age : " + person[x].age + "<br>");
         console.log(person[x]);
    }
}

这是 HTML 的

    <div id="part1">
        <h3>Part 1</h2>
        <form id="profile" onsubmit="profile(event)" action="#">
            Name: <input type="text" id ="name">
            Age: <input type="text" id ="age">
            <input type="Submit" value="Add">           
        </form>

        <h4>Final Object</h4>
        <div id="fObject"></div>

        <h4>Readable Format</h4>
        <div id="rFormat"></div>
    </div>

很确定我在 for in 循环中做错了什么，但我不知 Prop 体在哪里。 请帮忙。我是 JavaScript 新手。非常感谢。

Answer 1

尝试使用 insertAdjacentHTML() 或 innerHTML 代替 append()。您也不需要循环(因为您在每次点击中更新 HTML)，您可以简单地填充数组中的最后一项:

var person = [{name: "Tester1",age: 1 },{name: "Tester2",age: 2 },{name: "Tester3",age: 3 }];
var person = [];
function profile(e) {
  //to stop form from resubmitting
  e.preventDefault(); 

  var pProfile = {
      name: document.getElementById('name').value,
      age: document.getElementById('age').value
  }
  person.push(pProfile);
  //used to convert result to string
  var myJSON = JSON.stringify(person);

  document.forms[0].reset();

  //display in Final Obejct div 
  document.getElementById("fObject").innerHTML = myJSON;

  //display converted objects to
  var p = person[person.length-1]; //last item in the array
  document.getElementById("rFormat").innerHTML += "name: " + p.name + ", " + "age : " + p.age + "<br>";
}

<div id="part1">
  <h3>Part 1</h2>
  <form id="profile" onsubmit="profile(event)" action="#">
      Name: <input type="text" id ="name">
      Age: <input type="text" id ="age">
      <input type="Submit" value="Add">           
  </form>

  <h4>Final Object</h4>
  <div id="fObject"></div>

  <h4>Readable Format</h4>
  <div id="rFormat"></div>
</div>