Question

我是编程的新手，并尝试从头开始创建一个博客，不仅仅是我的编码技能，而且这个博客将记录我的学习过程。

我没有将每个新帖子硬编码到index.html页面，而是想创建一种管理页面，其中包含两个input字段type="text"，一个用于帖子标题和其他的帖子内容。我的提交按钮将从这些字段中获取用户输入并将它们存储在一个对象中，该对象是我的makePost构造函数，反过来，每个对象将存储在一个名为posts的数组中。

然后我想遍历数组并打印每个对象的每个帖子的各个属性......每个属性都是title，date，content。到目前为止，我能够创建一个具有这三个属性的对象并将其存储在我的数组的零索引（array[0]）中，但是当我使用for-loop打印出对象以遍历我的数组时，它会打印出来整个对象...我想我需要在for-loop中访问每个属性？

此外，我意识到在这个代码块中我正在打印到控制台，但我只是这样做以确保某些工作正常。在代码的最后，我在控制台中发布了它的打印内容。现在我只需要分解该对象中的每个属性并将它们打印在各自的HTML标记中。

在我决定发布之前，我一直在寻找几天，而且我找不到任何特定于我正在尝试使用JavaScript做的事情。预先感谢您的帮助。

到目前为止，这是我的代码：

document.getElementById('button').onclick = function() {
  var title = document.getElementById('title').value;
  var content = document.getElementById('content').value;
  var posts = [];
  var makePost = function(title, content) {
    return {
      title: title,
      date: Date(),
      content: content
    }
  }
  posts.unshift(makePost(title, content));
  for (var i = 0; i < posts.length; i++) {
    var myPost = posts[i];
    console.log(myPost);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
form {
  position: relative;
  top: 20px;
  left: 20px;
  margin-bottom: 50px;
}
h3 {
  margin: 10px;
}
#title {
  margin: 10px;
}
#date {
  margin: 10px;
}
#content {
  margin: 10px;
}

<h3>Type the content that you would like to show in the post section of the blog</h3>
<form class="form" action="index.html" method="post">
  Title:<input id="title" type="text" name="name" value="" placeholder="Type title here"><br />
  <!-- Date:<input id="date" type="text" name="name" value="" placeholder="Type date here"><br /> -->
  Content:<input id="content" type="text" name="name" value="" placeholder="Type content here">
  <input id="button" type="button" name="name" value="Submit">
</form>
<h2 id="displaytitle">This is the title of the post</h2>
<h2 id="displaydate">This is the date of the post</h2>
<h2 id="displaycontent">This is the content of the post</h2>

以下是打印到控制台的内容：

Object {title: "This is my title", date: "Fri Feb 19 2016 09:54:37 GMT-0800 (PST)", content: "This is my content"}

Answer 1

for (var i = 0; i < posts.length; i++) {
    var myPost = posts[i];
    for(var key in myPost) {
          console.log(myPost[key]);
     }
  }

Answer 2

<form method="POST"action="process.php">
NAMN:<br>
<input type="text" size="60" maxlength="60" name="Namn" value=""><br> 
ADRESS:<br> 
<input type="text" size="60" maxlength="60" name="ADRESS" value=""><br> 
POSTADRESS:<br> 
<input type="text" size="60" maxlength="60" name="POSTADRESS" value=""><br>
E-POST:<br> 
<input type="text" size="60" maxlength="60" name="EPOST" value=""><br> 
TELEFON:<br> 
<input type="text" size="60" maxlength="60" name="TELEFON" value=""><br> 
MOBILTELEFON:<br> 
<input type="text" size="60" maxlength="60" name="M_TELEFON" value=""><br> 
PERSONUMMER:<br> 
<input type="text" size="60" maxlength="60" name="PERSONNUMMER" value=""><br>
VÄLJ SVART FÄRG HÄR: <br> 
<input type="text" size="60" maxlength="60" name="FARG" value=""><br>
VÄLJ SVART/RÖD FÄRG:<br> 
<input type="text" size="60" maxlength="60" name="R_FARG" value=""><br>
VÄLJ SVART/BEIGE FÄRG:<br> 
<input type="text" size="60" maxlength="60" name="B_FARG" value=""><br> 
VÄLJ SVART/TURKOS FÄRG:<br> 
<input type="text" size="60" maxlength="60" name="T_FARG" value=""><br> 
VÄLJ ANNAN FÄRG NEDAN 14 arbetsdagars leveranstid:<br> 
<input type="text" size="60" maxlength="60" name="A_FARG" value=""><br> 
     <br>

MEDDELANDE:<br> 
<textarea name="MEDDELANDE" cols="60" rows="6">
</textarea><br> 
<input type="submit" value="SKICKA!" id="btn"> 
<input type="reset" value="RADERA!"> 

</form>

Answer 3

要遍历数组并打印出众所周知的属性，请使用以下命令：

posts.forEach(function(post) {
    console.log("Title: " + post.title);
    console.log("\tDate: " + post.date);
    console.log("\tContent: " + post.content);
}

当该对象本身存储在JavaScript中的数组索引中时，如何打印对象的每个单独属性？

3 个答案: