JSON to list create

Creates a list from a JSON array

by Greg

HTML

<a id="drawMenu" class="btn btn-default" href="javascript:">Draw Menu</a>
<br>
<a id="clearMenu" class="btn btn-default" href="javascript:">Clear Menu</a>
<br>
<a id="drawList" class="btn btn-default" href="javascript:">Draw List</a>
<br>
<a id="clearList" class="btn btn-default" href="javascript:">Clear List</a>
<br>
<table class="table">
  <tr id="row1">
    <td>

    </td>
  </tr>
  <tr id="row2">
    <td>
      <form>
        <input class="form-control input-lg" id="scan" type="text" name="" value="" />
      </form>
    </td>
  </tr>
  <tr id="row3">
    <td></td>
  </tr>
</table>

CSS

table {
  border: 0px solid black;
  text-align: center;
  color: black;
  margin: 0 auto;
}

#scan {
  border: solid 1px #2c2c2d/*originally #33bbff*/
  ;
  height: 40px
}

ul#menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.menu_li {
  /*background-color: #00b1f0;*/
  background-color: #5e6472;
  color: white;
  /*black;*/
  padding: 5px 5px;
  margin-bottom: 5px;
  border-radius: 6px 6px 6px 6px;
}

.selected {
  /*background-color: #2f3192;*/
  background: linear-gradient(to bottom, #cbd0db, #60656d, #cbd0db);
  color: white;
  font-weight: bold;
  padding: 5px 5px;
  margin-bottom: 5px;
  border-radius: 6px 6px 6px 6px;
}

JavaScript

$('#drawList').off().on('click', function() {
  // ready for you to do stuff
});
$('#clearList').off().on('click', function() {
  // ready for you to do stuff
});

// Sample data for list

var info = {
  "template": "GeneralInfo",
  "session_id": "1",
  "msg": "Scan a barcode",
  "title": "Enquiry",
  "list": [{
    "scan_type": "SKU",
    "scanned": "AGEN000001",
    "sku_code": "SKU:  AGEN000001",
    "batch": "",
    "description": "Auto generated sku 000001",
    "place": "Qty in DC",
    "location": "Location: Multiple",
    "qty": " is 706"
  }]
}

//*******************************************************************
//Code below is from general.js, except the click events
//
$('#drawMenu').off().on('click', function() {
  document.getElementById('row3').firstElementChild.appendChild(makeList(a.list[0]));
  li = $('li');
  liSelected = li.eq(0);
  $('.selected').focus(); // move the focus off a button (escape)
});
$('#clearMenu').off().on('click', function() {
  $('#menu').remove(); // menu list
});

var a = {
  "template": "GeneralList",
  "session_id": "1",
  "title": "Select Role",
  "header": "Select Role",
  "list": [{
    "1": "Inbound",
    "2": "Outbound",
    "3": "Enquiry",
    "4": "Stock Movement",
    "5": "Inventory"
  }]
}

function makeList(array) {
  // Create the list element:
  var list = document.createElement('ul');
  list.setAttribute("id", "menu");

  for (var i in array) {
    var item = document.createElement('li');
    item.appendChild(document.createTextNode(array[i]));
    if (i == 1) {
      item.setAttribute("class", "menu_li selected");
    } else {
      item.setAttribute("class", "menu_li");
    }
    item.setAttribute("tabindex", "-1");
    list.appendChild(item);
  }
  return list;
}

$(window).keydown(function(e) {
  if (e.which === 40 || e.which == 39 || e.which == 56) {
    if (li != "") {
      if (liSelected) {
        liSelected.removeClass('selected');
        next = liSelected.next();
        if (next.length > 0)...