时间戳

首页 > 解决方案 > 如何将数组的内容显示为列表？

javascript - 如何将数组的内容显示为列表？

问题描述

我想将数组的内容输出为列表：

价值

价值

价值

但是，它目前正在输出这样的数组：

价值，价值，价值

我可以更改什么以将数组内容显示为垂直列表？

对于上下文，这是显示一个数组，该数组通过基于与服务器的连接/断开连接添加/删除项目来更新。因此，当用户连接时，他们的名字被添加到阵列中，当他们断开连接时，阵列被擦除并且所有连接的客户端将他们的用户名发送回阵列，更新它。下面的代码只是显示了这些更改。

HTML：

<section class="membersList">
  <div class="dispUser"></div>
</section>

CSS：

.membersList {
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    background: #ACD8F0;
    width: 150px;
    border: 1px solid #000000;
    overflow: auto;
    float: right;
}

JavaScript：

socket.on('theitems', function (data) {
      $('.dispUser').html('<p>' + data + '</p>');
      console.log(data);
    });

如果我替换.html为.append，它会将其显示为列表，但会在数组发生更改时显示它们，而不是整体替换它，这正是我想要的。

标签： javascripthtmlarrayssocket.io

解决方案

您的代码的问题是您试图直接打印一个数组，该数组被转换为一个字符串，因此您得到了您所看到的结果。

您可以通过遍历数组并为其中的每个项目插入一个段落来获得所需的结果。这是一个例子：

const data = [5,6,7,8,9];
const list  = document.getElementById('list');
 
window.onload = () => {
  list.innerHTML = data.map(i => `<li>${i}</li>`).join('');
};
 
<ul id="list"></ul>

推荐阅读