如何使用javascript在HTML中的数组中显示访问的（通过for循环）对象答案

【问题标题】：How to display the accessed (thru for loop) objects in array in HTML using javascript如何使用javascript在HTML中的数组中显示访问的（通过for循环）对象
【发布时间】：2018-10-27 05:14:09
【问题描述】：

我有一个 HTML 表单。来自表单的输入数据将进入我在 JS 中制作的多维数组。然后我将使用 for 循环访问数组中的对象，以便在 HTML div 中显示对象值。 html中只显示[object,object]

var data = [];  
var i, item;

function myForm(event){
    event.preventDefault();
    var name = document.getElementById("name").value; //Getting Values from the form of HTML
    var phone = document.getElementById("phone").value; //Getting Values from the form of HTML
    var bday = document.getElementById("bday").value; //Getting Values from the form of HTML
    var email = document.getElementById("email").value; //Getting Values from the form of HTML
    var pWord = document.getElementById("pWord").value; //Getting Values from the form of HTML
    var age = document.getElementById("bday").value; //Getting Values from the form of HTML
    var ageValue;
    var Bdate = document.getElementById("bday").value; //Getting Values from the form of HTML and calculating the age of the user
    var Bday = +new Date(Bdate);
    ageValue = ~~ ((Date.now() - Bday) / (31557600000));
    var theBday = document.getElementById("age");
    theBday.innerHTML = ageValue;


    var userObject = {
        name: name,
        phone: phone,
        bday: bday,
        email: email,
        pWord: pWord,
        ageValue: ageValue,

    }; //The values i get from my Input in html. The userObject will be in a array data[]
       data.push(userObject);

      for (i=0 ; i <data.length ; i++){
        for (item in data[i]){
            document.getElementById("demo3").innerHTML=(item + data[i][item]);  //I'm trying to display the details from my form but the only thing show up is [object,object]
        }
    }
}

【问题讨论】：

你能发布你的html
@mabhijith95a10

名称：电话号码：生日：电子邮件：密码：
@mabhijith95a10 抱歉，我无法将其作为代码发布，

标签： javascript html arrays object multidimensional-array

【解决方案1】：

<body>
    <div id="navBar">
        <a href="signUp.html">HOME</a>
        <a href="signUp.html">LOG IN</a>
        <a href="signUp.html">SIGN UP</a>
    </div>

    <center><h1>Sign Up Form</h1></center></br></br>

<div id="format">
    <form id="myForm" onsubmit="myForm(event)">
    <b>Name:</b></br>
        <input type="text" name="name" id="name" maxlength="50" required="required" value="1234"></input></br>
    <b>Phone Number:</b></br>
        <input type="phone" name="phone" id="phone" maxlength="20" required="required" value="123"></input></br>
    <b>Birthday:</b></br>
        <input type="date" name="bday" id="bday" required="required" value="2010-05-02"></input></br>
    <b>Email:</b></br>
        <input type="email" name="email" id="email" maxlength="50" required="required" value="asasa@yahoo.com"></input></br>
    <b>Password:</b></br>
        <input type="password" name="pWord" id="pWord" maxlength="50" required="required" value="fgfghff"></input></br>
    <button type="submit" name="submit" id="submit" value="Submit" onsubmit="myData()" >Submit</button>
    <button type="reset" name="reset" id="reset" value="reset">Reset</button>

    </form>
    <div>
            <p id="demo" onsubmit="myData()"></p>

        </div>
    <div id="result" onsubmit="myForm(event)">  
        <center>Result</center>
        Name:<p id="name1"></p>
        Phone Number:<p id="phone1"></p>
        Birthday:<p id="bday1"></p>
        Email:<p id="email1"></p>
        Password:<p id="pWord1"></p>
        Age:<p id="age"></p>    

    </div>
        <div id="sample">           
            <p id="demo3" onsubmit="myForm(event)"></p>
        </div>


</div>



</body>

【讨论】：

@mabhijith95a10 这是我尝试您的代码时的 html 代码，谢谢。但问题是每当我尝试再次提交时显示重复。我希望我可以为另一个用户附加另一个 div，并且输出不会复制第一个输出

【解决方案2】：

上面代码的问题就是这一行

document.getElementById("demo3").innerHTML=(item + data[i][item]);

这是替换 div#demo3 的内容而不是追加，所以请改用这一行

document.getElementById("demo").innerHTML+=(item + data[i][item]);

这是jsfiddle 中的一个工作示例。

我没有遇到[object,object] 的问题。如果您可以发布您的html代码问题可以很容易地识别。

更新

在再次运行循环之前清除div#demo的内容。

document.getElementById("demo").innerHTML = "";

查看此更新的jsfiddle。

【讨论】：

我可以将结果附加到另一个 div 中吗？实际上你的代码可以工作，但是每当我尝试提交另一个用户数据时，输出就会重复