将存储的数组对象显示为 Javascript 到 HTML 中的列表答案

【问题标题】：Display stored Array Objects to List in Javascript to HTML将存储的数组对象显示为 Javascript 到 HTML 中的列表
【发布时间】：2020-06-02 11:26:42
【问题描述】：

我正在尝试以 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 新手。非常感谢。

【问题讨论】：

标签： javascript html arrays object display

【解决方案1】：

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

for(let x of person)

然后你已经有了你需要的对象，而不是person[x]，所以如下使用

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

person 是一个数组。使用for of。然后直接用x。

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

【讨论】：