Как я могу добавить контейнер div из массива с помощью для l oop (в JavaScript)

Question

Как я могу добавить контейнер div из массива с помощью для l oop (в JavaScript)

Это то, что я пробовал:

setInterval(function(){
  $.get("/get_room?room=" + roomCode).then((res) => {
    var li = document.createElement("li");
    $(".messages_container")[0].innerHTML = "";
      for(let i=0;i<=res.room.msgs.length;i++){
        li.innerHTML = res.room.msgs[i];
        $(".messages_container")[0].appendChild(li)
      }
  });
}, 2000);

Answer 1

У вас есть две проблемы:

• Элемент li должен создаваться отдельно (без повторного использования одной и той же переменной) в каждой итерации.
• Ваш для l oop должен выполнить итерацию правильное количество итераций.

См. демонстрацию:

const res = {
  "room": {
    "room": "happyfone",
    "msgs": ["New Room Created.", "mymessage"]
  }
};

$(".messages_container")[0].innerHTML = "";
for (let i = 0; i < res.room.msgs.length; i++) {
  var li = document.createElement("li");
  li.innerHTML = res.room.msgs[i];
  $(".messages_container")[0].appendChild(li)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="messages_container"></div>

Answer 2

Вам нужно создать и добавить li внутри l oop - в противном случае вы создаете только один li intead из одного на сообщение. и потому что для l oop индексировано 0 - вам нужно ограничить l oop, чтобы быть меньше, чем длина. Это потому, что длина всегда будет на 1 больше, чем индекс итерации.

Также вы должны иметь возможность очистить html контейнера, используя также jQuery - $ (". Messages_container" ) [0]. html ('').

setInterval(function(){
  $.get("/get_room?room=" + roomCode).then((res) => {
    $(".messages_container")[0].innerHTML = "";
      for(let i=0; i< res.room.msgs.length; i++){ // note the removal of "="
        var li = document.createElement("li"); // moved the li creation to here
        li.innerHTML = res.room.msgs[i];
        $(".messages_container")[0].appendChild(li)
      }
  });
}, 2000);