title: How to store list of database items in HTML?
body: <p>I'm working on a project using Django framework. I'm displaying to user table with data. Next to each row there is an "Edit" button. When user clicks this button, in one of cells of the row select box appears with usernames. Currently to feed this HTML select element with options, I store all usernames in data attribute of div element and when user clicks this "Edit" button, I get the list from this data attribute to create options. It seems to me that it isn't the proper solution. Are there any better solutions to store usernames in a page so I can get them when needed?
  Current code:</p>
  
  <pre><code>&lt;div id="usernames" data-usernames="{{users |safe}}" class="hidden"&gt;&lt;/div&gt;
  (...)
  
  var divWithUsernames = document.getElementById("usernames");
  var usernames = (divWithUsernames.getAttribute("data-usernames").replace(/&amp;(l|g|quo)t;/g, function (a, b) {
      return {
          l: '&lt;',
          g: '&gt;',
          quo: '"'
      }[b];
  }));
  for (var i = 0; i &lt; usernames.length; i++) {
      var val = usernames[i];
      var option = $("&lt;option /&gt;", {value: val, text: val});
      option.appendTo($select);
  }
  </code></pre>