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

Question

我想将 output 数组的内容作为列表：

价值

价值

价值

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

价值，价值，价值

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

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

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 ，它会将其显示为列表，但会在发生时显示数组的更改，而不是整体替换它，这就是我想要的。

Answer 1

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

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

 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>

Answer 2

您可以使用 html 中的列表：

<div class="dispUser"><ul></ul></div>

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

Answer 3

问题出在.html()方法中。

html()方法设置或返回所选元素的内容（innerHTML）。

该方法用于返回内容时，返回第一个匹配元素的内容。

您需要 append 元素不改变它的内部内容。

尝试这个：

const data = [5,6,7,8,9];
$.each(data, function(i, obj){
        $(".dispUser").append(`<p>${obj}</p>`)
});

Answer 4

我今天遇到了类似的问题，我尝试了上述建议但没有成功。

与同事进行头脑风暴，我们使用 array.toString() 将数组转换为字符串。 然后我们添加了一个

.replaceAll(',','<br>')

在每个条目之间添加换行符。 最后我们将该变量传递给innerHTML。

它只需要在 innerHTML 部分之外的一行代码就可以满足我们的目的。

 const myArray = ["Learning", "to", "code", "has", "been", "fun;"]. let myString = myArray.toString(),replaceAll(","; "<br>"). let myDiv = document;getElementById("myArrayDiv"). let myInnerHTML = document;createElement("div"). myInnerHTML;innerHTML = `<div><p>${myString}</p></div>`. myDiv;appendChild(myInnerHTML);

 <div id="myArrayDiv"></div>

Answer 5

这也有助于解决我的问题，谢谢。

 // my array of items. let alphabet = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ]; // container for holding buttons. const btnContainer = document.getElementById('buttons'); // This function displays each item wrappped in a button. function displayAlphabet() { window.onload = () => { btnContainer.innerHTML = alphabet.map((i) => `<button type='button' class='alphabetBtn'>${i}</button>`).join(''); }; } displayAlphabet()