Q:

How to create a HTML table using JSON data with JavaScript

I am currently working on a website that imports JSON data and populates a table within HTML.
I am having trouble iterating through the arrays to show all of the data in the table. Currently, only some of the JSON data appears in the table while the other data is just shown as text outside the table.  
I have tried using the keys from the JSON data as table headers but I only require a select few headers.

var table =
  { "Employees": 
    [ { "Started"   : "2016"
      , "Department": "Engineering"
      , "Employee": 
        [ { "id": "a101", "firstname": "Alan",  "surname": "Arkin"  } 
        , { "id": "a102", "firstname": "Geoff", "surname": "keegan" } 
        ] 
      } 
    , { "Started"   : "2016"
      , "Department": "R&D"
      , "Employee": 
        [ { "id": "a103", "firstname": "Michele", "surname": "Jones" } 
        , { "id": "a104", "firstname": "Peter",   "surname": "Smith" } 
        ] 
      } 
    ] 
  } 

var Employees = table.Employees


// This code iterates through the colorArray and writes html code to put the color information in a table.
var colorInfo = "<table>";
colorInfo += "<tr><th>Started</th><th>Department</th><th>ID</th><th>Name</th></tr>";
for (var i = 0; i < Employees.length; i++) {
    var started = Employees[i].Started;
    var Department = Employees[i].Department;
    var EmployeeArray = Employees[i].Employee;

    for (var j = 0; j < EmployeeArray.length; j++) {

        var Emp = EmployeeArray[j]
        var id = Emp.id
        var names = Emp.firstname + " " + Emp.surname

        colorInfo += "<tr><td>" + started + "</td><td>" + Department + "</td><td>" + id + "</td><td>" + names + "</td></tr>";

    }
    // Close the table element.
    colorInfo += "</table>";

    // Add the new html code to the div element with id = 'id01'.
    document.getElementById("id01").innerHTML = colorInfo;
}
body  { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
Table { border-collapse: collapse; }
td    { border: 1px solid grey; padding: 2px 10px; }
th { background-color: turquoise;}
<div id="id01">...</div>

I expect that all of the data should appear in the table here.

A:

Do not use the .innerHTML method, it is the best way to have problems. There are many ways to create DOM in javascript, which in addition simplifies the interpreter, close automatically each tags on the right place and gives faster code execution. 
.innerHTML is a devil ! (and prefer .textContent for simple text contents)
example:

const table =
  { "Employees": 
    [ { "Started"   : "2016"
      , "Department": "Engineering"
      , "Employee": 
        [ { "id": "a101", "firstname": "Alan",  "surname": "Arkin"  } 
        , { "id": "a102", "firstname": "Geoff", "surname": "keegan" } 
        ] 
      } 
    , { "Started"   : "2016"
      , "Department": "R&D"
      , "Employee": 
        [ { "id": "a103", "firstname": "Michele", "surname": "Jones" } 
        , { "id": "a104", "firstname": "Peter",   "surname": "Smith" } 
        ] 
      } 
    ] 
  } 

let MyTable = document
                .querySelector('#id01')
                .appendChild(document.createElement('table'))

for (let StartDep of table.Employees)
  {
  for (let Employee of StartDep.Employee )
    {
    let nRow = MyTable.insertRow(-1)
      , rCell  = 0
    nRow.insertCell(rCell++).textContent = StartDep.Started
    nRow.insertCell(rCell++).textContent = StartDep.Department
    nRow.insertCell(rCell++).textContent = Employee.id
    nRow.insertCell(rCell++).textContent = `${Employee.firstname} ${Employee.surname}`
    }
  }

let Rowhead = MyTable.createTHead().insertRow(-1)

'Started,Department,ID,Name'.split(',')
  .forEach((T,i)=>Rowhead.insertCell(i).textContent=T)
body  { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
Table { border-collapse: collapse; }
td    { border: 1px solid grey; padding: 2px 10px; }
thead { background-color: turquoise;}
<div id="id01"></div>

