Dynamically create a html list that update

Question

I'm trying to dynamically create a html list that update when new information arrives. Here is my code :

setlast();
function setlast() {
  last = [
  "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"]
  };

  setInterval(function() {

  last[0] = Math.random();
  last[1] = Math.random();
  last[2] = Math.random();
  last[3] = Math.random();
  last[4] = Math.random();

}, 2000);

createHtml();

function createHtml() {
  setTimeout(function(){
    ul = document.createElement("ul");
    document.body.appendChild(ul);
    ul.setAttribute("id", "lyl");

    for(w=0; w<5; w++) {
      li = document.createElement("li");
      ul.appendChild(li);
    }
    updateT();

  },3500);
}

function updateT() {
  setInterval(function() {
  li.innerHTML = last[w];
    },2000);
}

    
    #listwrapper {
        margin-top: 2%;
        width : 100%;
    }            
    li {
        display : inline;
        float : left;
        padding : 10px;
    }

Doing like above, I get undefined.

If I do it like below, the code works but each li do not update every time Math.random generates a new number.:

setlast();
function setlast() {
  last = [
  "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"]
};

setInterval(function() {
  last[0] = Math.random();
  last[1] = Math.random();
  last[2] = Math.random();
  last[3] = Math.random();
  last[4] = Math.random();
}, 2000)


createHtml();

function createHtml() {
  setTimeout(function(){
   ul = document.createElement("ul");
    document.body.appendChild(ul);
    ul.setAttribute("id", "lyl");

    for(w=0; w<5; w++) {

    li = document.createElement("li");

     ul.appendChild(li);
     li.innerHTML = last[w];

     }
  },3500)
}

#listwrapper {
    margin-top: 2%;
    width : 100%;
}
li {
    display : inline;
    float : left;
    padding : 10px;
}

So my question is: how can I get the list to display and update every time a new number is generated ?

Thanks a lot.

score 0 · Answer 1 · answered May 21 '18 at 12:59

Here is a working example using only pur javascript :

/**
* Update The HTML
*
* @param {Array} last - ensure the array exist by passing it as an argument
*/
function updateHtml(last) {
  const ul = document.querySelector('#toUpdate');
  // Empty existing li node
  ul.innerHTML = ''
  for (let i = 0; i < last.length; i++) {
    // create and append li elements
    const li = document.createElement('li')
    li.innerHTML = last[i]
    ul.appendChild(li);
  }
}


setInterval(function() {
  // call with random stuff
  updateHtml([
    Math.random(),
    Math.random(),
    Math.random(),
    Math.random(),
    Math.random()
  ])
}, 2000)

// first call with strings
updateHtml([
  "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"
]);

#listwrapper {
  margin-top: 2%;
  width: 100%;
}

li {
  display: inline;
  float: left;
  padding: 10px;
}

<div id="main">
  <ul id="toUpdate">

  </ul>
</div>

There is many things to say about DOM Update but most of all what I've done is to exctract the update function to specialize it so updateHtml manipulate the DOM according to the 'last' argument.

Please note that this is a one way data binding. You can do more by using more complex structures and patterns like Observable.

Hope that help

If my snippet was useful please upvote my answer and mark it as solution. Thank you and have fun with javascript :) — sarlam, May 21 '18 at 14:00

score 0 · Accepted Answer · answered May 21 '18 at 13:11

setlast();
function setlast() {
  last = [
  "xyyxx", "yxyxx", "xxxxy", "yyxxy", "yxyxy"]
  };

  setInterval(function() {

  last[0] = Math.random();
  last[1] = Math.random();
  last[2] = Math.random();
  last[3] = Math.random();
  last[4] = Math.random();

}, 2000);

createHtml();

function createHtml() {
  setTimeout(function(){
    ul = document.createElement("ul");
    document.body.appendChild(ul);
    ul.setAttribute("id", "lyl");

    for(w=0; w<5; w++) {
      li = document.createElement("li");
      ul.appendChild(li);
    }
    updateT();

  },3500);
}

function updateT() {
  setInterval(function() {
     list = ul.childNodes;
     for (var i = 0; i < list.length; i++) {
        list[i].innerHTML = last[i];  
     }
  },2000);
}

    
    #listwrapper {
        margin-top: 2%;
        width : 100%;
    }            
    li {
        display : inline;
        float : left;
        padding : 10px;
    }

This works. Notes:

Create variables without keywords let or var makes them global which is a bad thing. Variables should be accessible only where its supposed to. See this post.
The above code will fail if the number of elements in the last list is less then the number of li elements appended to ul.

Dynamically create a html list that update

2 Answers2