Create table with Javascript array and object

Question

I have one array and one object:

labels = ['ID','Name']; 
object = {
    ["id": "1", 'name': "richard"],
    ["id": "2", 'name': "santos"]
};

and I have to create a table like this:

<table>
<thead>
    <tr>
        <td>ID</td>
        <td>Name</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Richard</td>
        <td>Santos</td>
    </tr>
</tbody>

The problem is that:
The "object" variable sometimes could have different key names so I have to create this table dynamically with other objects, I'm trying to do this all day but no success, can anyone help me? I'm new to Javascript. obs: the label and the object vars always have the same size.

Some kind of objects.

var labels = ['ID','NOME'];
var object = {
    ["id": "1", 'nome': "richard"],
    ["id": "2", 'nome': "adriana"]
};

var labels = ['ID','NAME', 'PLATE'];
var object = {
    ["id": "1", 'nome': "jetta",  'plate': "DFG-1222"],
    ["id": "2", 'nome': "fusion", 'plate': "DFF-3342"]
};

Answer 1

Two issues at first:

1. Is that Name or Nome? Please fix your typo (I know Nome is French, so if it's not typo, I suggest you introduce an i18n solution).
2. Also please mind your syntax errors (some have given suggested edits that you could consider).

After that, here's my approach for programmatically create tables based on input data:

function buildTable(labels, objects, container) {
  var table = document.createElement('table');
  var thead = document.createElement('thead');
  var tbody = document.createElement('tbody');

  var theadTr = document.createElement('tr');
  for (var i = 0; i < labels.length; i++) {
    var theadTh = document.createElement('th');
    theadTh.innerHTML = labels[i];
    theadTr.appendChild(theadTh);
  }
  thead.appendChild(theadTr);
  table.appendChild(thead);

  for (j = 0; j < objects.length; j++) {
    var tbodyTr = document.createElement('tr');
    for (k = 0; k < labels.length; k++) {
      var tbodyTd = document.createElement('td');
      tbodyTd.innerHTML = objects[j][labels[k].toLowerCase()];
      tbodyTr.appendChild(tbodyTd);
    }
    tbody.appendChild(tbodyTr);
  }
  table.appendChild(tbody);

  container.appendChild(table);
}

var labels1 = ['ID', 'Name']; 
var objects1 = [
  {"id": "1", 'name': "richard"},
  {"id": "2", 'name': "santos"}
];

var labels2 = ['ID', 'NOME'];
var objects2 = [
  {"id": "1", 'nome': "richard"},
  {"id": "2", 'nome': "adriana"}
];

var labels3 = ['ID', 'NAME', 'PLATE'];
var objects3 = [
  {"id": "1", 'name': "jetta",  'plate': "DFG-1222"},
  {"id": "2", 'name': "fusion", 'plate': "DFF-3342"}
];

buildTable(labels1, objects1, document.getElementById('a'));
buildTable(labels2, objects2, document.getElementById('b'));
buildTable(labels3, objects3, document.getElementById('c'));

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}

<div id="a"><p>Table 1</p></div>
<div id="b"><p>Table 2</p></div>
<div id="c"><p>Table 3</p></div>

Answer 2

This is a working procedure from our project. It has three parameters:

htmlTable(selector, data_array [, column_names]);

column_names parameter is optional: if you omit it the function creates column names from first row (if it exists).

It creates HTML tags directly into the DOM, but it can be rewritten to generate HTML as a string if you need . See the working snippet below:

var labels = ['id','name']; 
var object = [{"id":"1",'name': "richard"},{"id":"2",'name': "santos"}];
htmlTable("#res0",object, labels);

var labels = ['id','nome']; 
var object = [{"id":"1",'nome': "richard"},{"id":"2",'nome': "adriana"}];
htmlTable("#res1",object, labels);

var labels = ['id','name', 'plate']; 
var object = [{"id":"1",'name': "jetta",'plate': "DFG-1222"},
              {"id":"2",'name': "fusion",'plate': "DFF-3342"}];
htmlTable("#res2",object, labels);

// Without labels array
var data3 = [{a:1,c:2},{a:3,c:3}];
htmlTable("#res3",data3);

function htmlTable(selector, data, columns) {
	var sel = document.querySelector(selector);
	if(!sel) {
		throw new Error('Selected HTML element is not found');
	};	

	if((!columns) || columns.length == 0) {
        columns = Object.keys(data[0]);
	}

	var tbe = document.createElement('table');
	var thead = document.createElement('thead');
	tbe.appendChild(thead);

  var tre = document.createElement('tr');
  for(var i=0;i<columns.length;i++){
    var the = document.createElement('th');
    the.textContent = columns[i];
    tre.appendChild(the);
  }
  thead.appendChild(tre);

	var tbody = document.createElement('tbody');
	tbe.appendChild(tbody);
	for(var j=0;j<data.length;j++){
		var tre = document.createElement('tr');
		for(var i=0;i<columns.length;i++){
			var the = document.createElement('td');
			the.textContent = data[j][columns[i]];
			tre.appendChild(the);
		}
		tbody.appendChild(tre);
	};
	emptyDOMChildren(sel);
	sel.appendChild(tbe);
};

// Utility function to fast delete all children of element if it is not empty
// Can be replaced with simple but relatively "slower" container.innerHTML = "";
function emptyDOMChildren (container){
  var len = container.childNodes.length;
  while (len--) {
    container.removeChild(container.lastChild);
  };
};

<div id="res0"></div>
<div id="res1"></div>
<div id="res2"></div>
<div id="res3"></div>