Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

<style id="jsbin-css">
table, th, td
{
  margin:10px 0;
  border:solid 1px #333;
  padding:2px 4px;
  font:15px Verdana;
}
th {
  font-weight:bold;
}
div, input {
  display: inline-block;
}
</style>
</head>
<body>
  <input type="text" id="myInput" onkeyup="searchByNames()" placeholder="Search for names..">
  <input type="button" onclick="createTableFromJSON()" value="Create Table From JSON">
  <input type="button" onclick="sortTable()" value="Sort By Name">
  <div id="table-area">
  </div>
<script id="jsbin-javascript">
function createTableFromJSON() {
  var userList = [
  {id: 1,
  firstName: "Jonathan",
  lastName: "Mendoza",
  email: "vydryhans@gmail.com",
  gender: "male"},
  {id: 2,
  firstName: "Vladislav",
  lastName: "Vydryhan",
  email: "vydryhans2@gmail.com",
  gender: "male"},
  {id: 3,
  firstName: "Marina",
  lastName: "Kozyk",
  email: "vydryhan3@gmail.com",
  gender: "female"},
  {id: 4,
  firstName: "Natasha",
  lastName: "Ivanova",
  email: "vydryhan4@gmail.com",
  gender: "male"},
  {id: 5,
  firstName: "Jessie",
  lastName: "Lingard",
  email: "vydryhans5@gmail.com",
  gender: "male"},
  {id: 6,
  firstName: "Kylian",
  lastName: "Mbappe",
  email: "vydryhans7@gmail.com",
  gender: "male"},
  {id: 7,
  firstName: "Morgana",
  lastName: "Devil",
  email: "vydryhans7@gmail.com",
  gender: "female"},
  {id: 8,
  firstName: "Cruela",
  lastName: "Mascherano",
  email: "vydryhans8@gmail.com",
  gender: "female"},
  {id: 9,
  firstName: "Lolik",
  lastName: "Bolik",
  email: "vydryhans9@gmail.com",
  gender: "male"},
  {id: 10,
  firstName: "Andrew",
  lastName: "Pardew",
  email: "vydryhans10@gmail.com",
  gender: "male"},
  {id: 11,
  firstName: "Marte",
  lastName: "Olsbu",
  email: "vydryhan11s@gmail.com",
  gender: "female"},
  {id: 12,
  firstName: "Magdalena",
  lastName: "Neuner",
  email: "vydryhans13@gmail.com",
  gender: "female"},
  {id: 13,
  firstName: "Gabriela",
  lastName: "Koukalova",
  email: "vydryhans13@gmail.com",
  gender: "female"},
  {id: 14,
  firstName: "Arsen",
  lastName: "Wenger",
  email: "vydryhans14@gmail.com",
  gender: "male"},
  {id: 15,
  firstName: "Thiery",
  lastName: "Henry",
  email: "vydryhans15@gmail.com",
  gender: "male"},
]

var tableHeaders = ["fullName", "email", "gender"]

  var fullName, tableCell, th;
  var table = document.createElement("table");
  table.id = 'myTable';

  var tr = table.insertRow(-1);
  tableHeaders.map( function(header) {
    th = document.createElement("th");      // TABLE HEADER.
    th.innerHTML = header;
    tr.appendChild(th);
  });

  userList.map( function(user) {
    var tr = table.insertRow(-1);

    tableCell = tr.insertCell(-1);
    fullName = user.firstName + ' ' + user.lastName;
    tableCell.innerHTML = fullName;

    tableCell = tr.insertCell(-1);
    tableCell.innerHTML = user.email;

    tableCell = tr.insertCell(-1);
    tableCell.innerHTML = user.gender;
  });

  var divContainer = document.getElementById("table-area");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);

}

function searchByNames() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;

  while (switching) {

    switching = false;
    rows = table.getElementsByTagName("tr");

    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;

      x = rows[i].getElementsByTagName("td")[0];
      y = rows[i + 1].getElementsByTagName("td")[0];

      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {

        shouldSwitch= true;
        break;
      }
    }
    if (shouldSwitch) {

      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
</script>


<script id="jsbin-source-css" type="text/css">table, th, td
{
  margin:10px 0;
  border:solid 1px #333;
  padding:2px 4px;
  font:15px Verdana;
}
th {
  font-weight:bold;
}
div, input {
  display: inline-block;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">
function createTableFromJSON() {
  var userList = [
  {id: 1,
  firstName: "Jonathan",
  lastName: "Mendoza",
  email: "vydryhans@gmail.com",
  gender: "male"},
  {id: 2,
  firstName: "Vladislav",
  lastName: "Vydryhan",
  email: "vydryhans2@gmail.com",
  gender: "male"},
  {id: 3,
  firstName: "Marina",
  lastName: "Kozyk",
  email: "vydryhan3@gmail.com",
  gender: "female"},
  {id: 4,
  firstName: "Natasha",
  lastName: "Ivanova",
  email: "vydryhan4@gmail.com",
  gender: "male"},
  {id: 5,
  firstName: "Jessie",
  lastName: "Lingard",
  email: "vydryhans5@gmail.com",
  gender: "male"},
  {id: 6,
  firstName: "Kylian",
  lastName: "Mbappe",
  email: "vydryhans7@gmail.com",
  gender: "male"},
  {id: 7,
  firstName: "Morgana",
  lastName: "Devil",
  email: "vydryhans7@gmail.com",
  gender: "female"},
  {id: 8,
  firstName: "Cruela",
  lastName: "Mascherano",
  email: "vydryhans8@gmail.com",
  gender: "female"},
  {id: 9,
  firstName: "Lolik",
  lastName: "Bolik",
  email: "vydryhans9@gmail.com",
  gender: "male"},
  {id: 10,
  firstName: "Andrew",
  lastName: "Pardew",
  email: "vydryhans10@gmail.com",
  gender: "male"},
  {id: 11,
  firstName: "Marte",
  lastName: "Olsbu",
  email: "vydryhan11s@gmail.com",
  gender: "female"},
  {id: 12,
  firstName: "Magdalena",
  lastName: "Neuner",
  email: "vydryhans13@gmail.com",
  gender: "female"},
  {id: 13,
  firstName: "Gabriela",
  lastName: "Koukalova",
  email: "vydryhans13@gmail.com",
  gender: "female"},
  {id: 14,
  firstName: "Arsen",
  lastName: "Wenger",
  email: "vydryhans14@gmail.com",
  gender: "male"},
  {id: 15,
  firstName: "Thiery",
  lastName: "Henry",
  email: "vydryhans15@gmail.com",
  gender: "male"},
]

var tableHeaders = ["fullName", "email", "gender"]

  var fullName, tableCell, th;
  var table = document.createElement("table");
  table.id = 'myTable';

  var tr = table.insertRow(-1);
  tableHeaders.map( function(header) {
    th = document.createElement("th");      // TABLE HEADER.
    th.innerHTML = header;
    tr.appendChild(th);
  });

  userList.map( function(user) {
    var tr = table.insertRow(-1);

    tableCell = tr.insertCell(-1);
    fullName = user.firstName + ' ' + user.lastName;
    tableCell.innerHTML = fullName;

    tableCell = tr.insertCell(-1);
    tableCell.innerHTML = user.email;

    tableCell = tr.insertCell(-1);
    tableCell.innerHTML = user.gender;
  });

  var divContainer = document.getElementById("table-area");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);

}

function searchByNames() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;

  while (switching) {

    switching = false;
    rows = table.getElementsByTagName("tr");

    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;

      x = rows[i].getElementsByTagName("td")[0];
      y = rows[i + 1].getElementsByTagName("td")[0];

      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {

        shouldSwitch= true;
        break;
      }
    }
    if (shouldSwitch) {

      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}</script></body>
</html>