显示存储的数组对象以在 Javascript 至 HTML 中列出

Question

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

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 循环中做错了什么，但我不知道具体在哪里。请帮忙。我是 javascript 的新人。非常感谢。

Answer 1

person 是一个数组。使用 for of。那就直接用x吧。

for in 用于对象。如果你在数组上使用它，你只会得到索引。

Answer 2

尝试使用 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>

Answer 3

您需要将 for-loop 更改为使用 for-of 而不是 for-in。您需要值而不是键

for(let x of person)

然后代替 person[x]，您已经有了所需的对象，因此请按以下方式使用

.append("name: " + x.name + " , " + "age : " + x.age

Answer 4

正确的方法是使用 innerHTML 方法：

for (let x in person) {
    document.getElementById("rFormat").innerHTML += person[0] + "<br>";
}

我不确定你的为什么不起作用。

显示存储的数组对象以在 Javascript 至 HTML 中列出

Display stored Array Objects to List in Javascript to HTML

html

javascript

arrays

object

display