Как отобразить содержимое массива в виде списка?

Question

Я бы хотел вывести содержимое массива в виде списка:

значение

значение

значение

Однако в настоящее время он выводит такой массив:

значение, значение, значение

Что я могу изменить для отображения содержимого массива в виде вертикального списка?

Для контекста это отображение массива, который обновляется путем добавления / удаления элементов на основе подключений / отключений к серверу. Итак, когда пользователь подключается, его имя добавляется в массив, когда он отключается, массив стирается, и все подключенные клиенты отправляют свое имя пользователя обратно в массив, обновляя его. Приведенный ниже код просто отображает эти изменения.

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().

Метод html() устанавливает или возвращает содержимое (внутреннее HTML) выбранных элементов.

Когда этот метод используется для возврата содержимого, он возвращает содержимое ПЕРВОГО совпадающего элемента.

Вам нужно добавить элемент, не изменяя его внутреннее содержимое.

Попробуйте следующее:

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

Answer 3

Вы можете использовать список в html:

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

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