List or table an array

Html List or table an array with or without sort

by Harm Zeinstra

HTML

<button onclick="list()">list</button>
-----------
<button onclick="sort()">sort</button>

<br>

<button onclick="table()">table</button>
-----------
<button onclick="removeDub()">remove duplicates</button>
<br>
<button onclick="">-</button>
-----------
<button onclick="reset()">reset</button>
<br>
<input type="radio" name="type[]" value="arr" checked> arr
<br>
<input type="radio" name="type[]" value="obj"> obj
<br>
<input type=checkbox name=asJson checked> asJson

<p id="output"></p>

CSS

button {
  min-width: 150px;
}

JavaScript

var arr = [
'ngMaterial',
  'ngMessages',
  'ui.router',
  'ui.router.state.events',
  'ngSanitize',
  'ngAnimate',
];

var obj = {
  b: 'spam',
  c: 'eggs',
  a: 'hello world',
}

var originalArr = arr.slice();
var originalObj = Object.assign({}, obj);

isArr = function() {
  return document.querySelector("input[type='radio']:checked").value === 'arr';
}
asJson = function() {
  return document.querySelector("input[type='checkbox']:checked") !== null;
}

sort = function() {
  arr.sort();
  var orderedObj = {};
  Object.keys(obj).sort().forEach(function(key) {
    orderedObj[key] = obj[key];
  });
  obj = orderedObj;
  lastOption();
};

removeDub = function() {
  //TODO fix for obj, if it is even possible..
  if (!isArr()) {
    alert('Remove dubs only works for arr for now, can it even for objects?');
    return;
  }

  var newArr = [];
  for (var i = 0; i < arr.length; i++)
    if (!newArr.includes(arr[i])) newArr.push(arr[i]);
  arr = newArr.slice();
  lastOption();
};

reset = function() {
  arr = originalArr.slice();
  obj = Object.assign({}, originalObj);
  lastOption();
};

list = function() {
  lastOption = list;
  var str = "<ul>";
  if (isArr()) {
    for (var i = 0; i < arr.length; i++) {
    if (asJson()) {
          str += "<li>'" + arr[i] + "',</li>";

    } else {
          str += "<li>" + arr[i] + "</li>";

    }
    }
  } else {
    Object.keys(obj).forEach(function(key) {
      str += "<li>" + key + " - " + obj[key] + "</li>";
    });
  }
  str += "</ul>"

  document.getElementById("output").innerHTML = str;
};
table = function() {
  lastOption = table;
  var str = "<table><tbody>";
  if (isArr()) {
    for (var i = 0; i < arr.length; i++) {
      str += "<tr><td>" + arr[i] + "</td></tr>";
    }
  } else {
    Object.keys(obj).forEach(function(key) {
      str += "<tr><td>" + key + "</td><td>" + obj[key] + "</td></tr>";
    });
  }
  str += "</tbody></table>";

  document.getElementById("output").innerHTML = str;
};


list();
var lastOption =...