Array objektów z kluczami w nagłówkach kolumn, a efekt do <table></table>

Witam.

var oObj = {
	name:'',
	kolor:'',
	type:'',
	length:'',
	price:'',
	};

var aArr = [{}];
for(let key in oObj) {
	aArr[0][key];
	};

var aObjekty = [];
aObjekty[0] ={name:'car',color:'red',price:'1000$',type:'cabrio',};
aObjekty[1] ={name:'boat',price:'7000$',type:'sail',};
aObjekty[2] ={name:'bike',color:'green',price:'500$',};
aObjekty[3] ={name:'toy',color:'yellow',price:'10$',type:'doll',};

for(let i in aObjekty) {
	Object.keys(aObjekty[i]).forEach(key => {
		if(i==0) {aArr[0][key]=aObjekty[0][key];}
		else {
			if(aArr.length==i) {aArr.push({[key]:aObjekty[i][key]});}
			else{aArr[i][key]=aObjekty[i][key];}
			}
		});
	}
console.table(aArr);

Wymęczyłem coś takiego. Efekt, który daje consola.table chcę uzyskać na stronie w "table". Chodzi o to, że obiekty w tablicy nie posiadają wszystkich kluczy. Ten brak kluczy musi być odwzorowany w pustym </td> i oczywiście "table header" z kluczami.
Drugi problem to czy można uprościć te moje wypociny. Np. wzorzec kluczy jest w oObj. Czy można uzyskać wszystkie niepowtarzalne klucze bezpośrednio z aObjekty? Oraz może pozbyć się tego:

var aArr = [{}];
for(let key in oObj) {
	aArr[0][key];
	};

Pozdrawiam
Radosław Głębicki

A to w ogóle musi być trzymane w obiektach?
Zrobiłabym jsona, albo tablicę z danymi:

tablica = [
  ["car1",     "red",   1000,   "cabrio"],
  ["car2",     "green",   "",   "hubabuba"]
];

var aObjekty = [];

for(let i in aObjekty) {

for.. in jest po iterowaniu po kluczach. Do iteracji po tablicy lepiej użyć zwykłej pętli for:

for(let i = 0; i < aObjekty.length; i++) {

albo metody .forEach:

aObjekty.forEach(obj => {
....
});

Swoją drogą zmieniłbym nazewnictwo. Co ma znaczyć to a na początku? I dlaczego zmienna jest po czesku?

Object.keys(aObjekty[i]).forEach(key => {

A to możesz skrócić używając właśnie pętli for... in:

for (let key in aObjekty[i]) {

Natomiast:

if(i==0) {aArr[0][key]=aObjekty[0][key];}

Nie rozumiem, co ma robić ta linijka. Jeśli i równa się zero, to przypisz do pierwszego elementu tablicy aArr wartość, która znajduje się w pierwszym obiekcie... nie, coś pokręciłem. Ten kod i kilka linijek niżej są tak nieczytelne (brak enterów, brak spacji, drabinka ifów, nic nie mówiące nazwy zmiennych aArr i aObjekty), że myślę, że lepiej będzie, jak powiesz, co chcesz osiągnąć. Ale przypuszczalnie chodzi o jakiegoś rodzaju kopiowanie jednego obiektu do drugiego? Tylko, że jeśli dajesz specjalne warunki dla pierwszego i ostatniego klucza, to przypuszczalnie ten kod powinieneś wywalić przed i za pętlę, a nie wrzucać do środka.

Ok. Męczyłem dalej i wymęczyłem.

let sList='';
sList+='<table border="on"><thead><tr>';
for(let headerKey in oObj) {
	sList+='<th>'+headerKey+'</th>';
	}
sList+='</tr></thead><tbody>';
	for(let i in aObjekty) {
		sList+='<tr>';
		for(let key in oObj) {
			if(aObjekty[i][key]==undefined) {sList+='<td></td>';}
			else{sList+='<td>'+aObjekty[i][key]+'</td>';}
			}
		sList+='</tr>';
		}
sList+='</tbody></table>';

document.getElementById('body').innerHTML=sList;

Chyba temat zamknięty. Jakby ktoś, coś więcej w kwestii optymalizacja (ładniej, mądrzej, zwięźlej) to poproszę o rady.

Pozdrawim
Radosław Głębicki

bardziej elegancko byłoby zamiast tworzyć bezpośrednio HTML, to używać document.createElement, żeby tworzyć prawdziwe obiekty
Bo teraz wystarczy, że w aObjekty[i][key] masz z jakichś powodów HTMLa (albo coś co może zostać zinterpretowane jako HTML), np.

{name:'boat',price:'7000$',type:'</td>',};

i już ci się rozwali przypuszczalnie cały layout na stronie. Plus wystarczy, że gdzieś zrobisz literówkę albo zły warunek w tym dodawaniu stringów i też będziesz potem szukać, gdzie jest bug.

Więc lepiej budować elementy DOM bezpośrednio (i używać innerText albo textContent do ustawiania tekstu w środku elementów).

        sList+='<tr>';
        for(let key in oObj) {
            if(aObjekty[i][key]==undefined) {sList+='<td></td>';}
            else{sList+='<td>'+aObjekty[i][key]+'</td>';}
            }
        sList+='</tr>';

I zamiast formatować w taki dziki sposób jak wyżej (gdzie jak rozumiem robisz wcięcia wg tego, gdzie otwierasz/zamykasz element HTML, mimo, że w logice JSowej tam nie powinno być wcięć), mógłbyś zrobić sobie funkcje, które będą robić i zwracać poszczególne elementy. Wtedy struktura logiczna będzie zamknięta w funkcjach.