从普通 JS 或 JQuery 中的数组生成消息

Posted 2023-05-08

【中文标题】从普通 JS 或 JQuery 中的数组生成消息

【英文标题】：Generating messages from array in plain JS or JQuery

【发布时间】：2021-07-03 16:31:16

【问题描述】：

我有一个对象数组，我想在我的页面上生成消息，我该怎么做？

["message":"dwd","user":"csac","date":"07.04.2021 20:46",
 "message":"dwd","user":"csac","date":"07.04.2021 20:46",
 "message":"dwd","user":"csac","date":"07.04.2021 20:43",
 "message":"dwd","user":"csac","date":"07.04.2021 20:43",
 "message":"dwd","user":"csac","date":"07.04.2021 20:42",
 "message":"dwd","user":"csac","date":"07.04.2021 20:38",
 "message":"dwd","user":"csac","date":"07.04.2021 20:38"]

我想在我的页面上将每条消息生成到一个 div 中（每个生成到自己的 div 中，用户生成到该 div 内的 div 中，等等）

我试过了：

data_arr = JSON.parse(data);
data_arr.map(function(comment)
                    
)

但我不知道下一步该做什么。 这就是我希望结果的样子：

<div class='post'><div>message</div><div>user</div><div>date</div></div>
<div class='post'><div>message</div><div>user</div><div>date</div></div>
<div class='post'><div>message</div><div>user</div><div>date</div></div>
...

非常感谢您的回答。

【问题讨论】：

我想从这个数组生成帖子，像这样<div class='post'><div>message</div><div>user</div><div>date</div></div> -> 为数组中的每个项目生成这个

“我有一个数组数组”

如果你是这样拥有它的，那么就不再需要 JSON.parse() 了。因为它已经是一个（对象）数组。 JSON.parse() 必须在字符串上调用。

你为什么使用.map()，它返回一个数组？你已经有一个数组。您是否在问如何创建元素、填充它们并注入到 DOM 中？如果是这样，请对该短语进行一些初步研究并尝试一下。

这能回答你的问题吗？ How to loop through an array containing objects and access their properties 具体来说，this answer

【参考方案1】：

您可以使用传统的 for 循环，也可以对消息数组使用 forEach。 这使用 forEach。

它使用 cmets 中讨论的 innerhtml，但它在分离的 div 上执行此操作，因此在完成的 div 元素附加到 DOM 之前不会导致页面重排。

// You've somehow acquired the new messages to be added
// Maybe you had to do a JSON.parse at some point, but now
// you have an Array of Objects
let msgs =
["message":"dwd one",  "user":"csac","date":"07.04.2021 20:46",
 "message":"dwd two",  "user":"csac","date":"07.04.2021 20:46",
 "message":"dwd three","user":"csac","date":"07.04.2021 20:43",
 "message":"dwd four", "user":"csac","date":"07.04.2021 20:43",
 "message":"dwd five", "user":"csac","date":"07.04.2021 20:42",
 "message":"dwd six",  "user":"csac","date":"07.04.2021 20:38",
 "message":"dwd seven","user":"csac","date":"07.04.2021 20:38"];

// We need to add these new posts somewhere.
// They'll go in the "posts" section of the page.
const posts = document.getElementById('posts');
msgs.forEach(m => 
    // Create a new div for the post
    const newpost = document.createElement('div');
    // Set the class to "post" as desired
    newpost.classList.add('post');
    // Set the content of the new post, using string interpolation
    newpost.innerHTML =
      `<div class="message">$m.message</div>
       <div class="author">$m.user</div>
       <div class="date">$m.date</div>`;
    // Append the new post to the "posts" section
    posts.appendChild(newpost);
 );

#posts .post div 
    display: inline-block;

/* This is just so you can see where the pieces lie */
.post div 
    margin-left: 5px;
    padding: 5px;
    border-left: 1px solid green;

<section id="posts">
</section>

这可以更进一步，推迟附加任何内容，直到循环完成。在这种情况下，它甚至可以使用 .map 将原始对象数组转换为 DOM 元素数组，然后在该数组上使用 .forEach 将它们附加到文档。

其实，我们就这样试试吧……

// You've somehow acquired the new messages to be added
// Maybe you had to do a JSON.parse at some point, but now
// you have an Array of Objects
let msgs =
["message":"dwd one",  "user":"csac","date":"07.04.2021 20:46",
 "message":"dwd two",  "user":"csac","date":"07.04.2021 20:46",
 "message":"dwd three","user":"csac","date":"07.04.2021 20:43",
 "message":"dwd four", "user":"csac","date":"07.04.2021 20:43",
 "message":"dwd five", "user":"csac","date":"07.04.2021 20:42",
 "message":"dwd six",  "user":"csac","date":"07.04.2021 20:38",
 "message":"dwd seven","user":"csac","date":"07.04.2021 20:38"];

// We need to add these new posts somewhere.
// They'll go in the "posts" section of the page.
const posts = document.getElementById('posts');
// Transform the message object into a DOM element (a div)
const newPosts =
    msgs.map(m => 
        // Create a new div for the post
        const newpost = document.createElement('div');
        // Set the class to "post" as desired
        newpost.classList.add('post');
        // Set the content of the new post, using string interpolation
        newpost.innerHTML =
          `<div class="message">$m.message</div>
           <div class="author">$m.user</div>
           <div class="date">$m.date</div>`;
        return newpost;
    );
// Now attach all of the new "post" divs
newPosts.forEach(p => 
    posts.appendChild(p);
 );

#posts .post div 
    display: inline-block;

/* This is just so you can see where the pieces lie */
.post div 
    margin-left: 5px;
    padding: 5px;
    border-left: 1px solid green;

<section id="posts">
</section>

【参考方案2】：

在这种情况下，您可以使用forEach。以下是您将如何实现您想要的结果：

<script type="text/javascript">
    
let messages = ["message":"dwd","user":"csac","date":"07.04.2021 20:46","message":"dwd","user":"csac","date":"07.04.2021 20:46","message":"dwd","user":"csac","date":"07.04.2021 20:43","message":"dwd","user":"csac","date":"07.04.2021 20:43","message":"dwd","user":"csac","date":"07.04.2021 20:42","message":"dwd","user":"csac","date":"07.04.2021 20:38","message":"dwd","user":"csac","date":"07.04.2021 20:38"];



messages.forEach(function(comment)
    console.log(comment);
    // format: <div class='post'><div>message</div><div>user</div><div>date</div></div>
    document.documentElement.innerHTML += `<div class='post'><div>$comment["message"]</div><div>$comment["user"]</div><div>$comment["date"]</div></div>`;
);






</script>

【讨论】：

“map 函数让您可以依次操作数组中的每个元素。” .innerhTML。

是的，但例如，这就是我所做的，因为我没有时间进行广泛的造型等等。

好吧，其实你是对的，用 foreach 来代替 :)

您没有正确理解或使用.map()。 .map() 返回一个新数组。当您只想在每次迭代时执行一项任务时，不应该使用它。这就是.forEach() 的用途。

是的，我在上面回复了......我在阅读此评论之前更改了答案