Как динамически отображать массив разных объектов длины в таблице?

Question

У меня есть массив объектов со всеми значениями быть различны:

[ 
    {"val"::val,"xxx":"zzz","eee":"fff"}, 
    {"val":val}, 
    {val"::val,"xxx":"zzz","eee":"fff","val":val,"xxx":"zzz","eee":"fff"} 
] 

Существуют различные значения с различными именами свойств. Я пытаюсь динамически отображать их в таблице html.

Пункт должен состоять в том, чтобы иметь таблицу без заголовков, где длина строки может отличаться от предыдущей и показывать только указанные значения.

В предыдущем примере результатом будет таблица с: 3 ряда.

The first row having 3 cell 
val | zzz | fff 

second row 1 cell 
val | 

Third row 6 cell 
val | zzz | fff | val | zzz | fff 

Как я могу генерировать такую ​​таблицу, зная, что я не буду знать ключ любого значения и нужно будет отображать только значение и что без th. Я также не могу предсказать длину документа.

Answer 1

Объект не должен иметь дубликатов имен свойств. :: Недопустимый синтаксис. Вы можете Array.prototype.forEach(), Object.keys() добавить <tr> и <td> элементов в <table> элемент.

var arr = [{ 
 
    "val": "val", 
 
    "xxx": "zzz", 
 
    "eee": "fff" 
 
}, { 
 
    "val": "val" 
 
}, { 
 
    "val": "val", 
 
    "xxx": "zzz", 
 
    "eee": "fff", 
 
    "val1": "val", 
 
    "xxx1": "zzz", 
 
    "eee1": "fff" 
 
}]; 
 

 
var table = document.querySelector("table"); 
 

 
arr.forEach(function(value, key) { 
 
    var tr = table.insertRow(); 
 
    var keys = Object.keys(value); 
 
    keys.forEach(function(prop, key) { 
 
    var td = tr.insertCell(); 
 
    td.innerHTML = value[prop] + (key < keys.length - 1 ? " | " : ""); 
 
    tr.appendChild(td); 
 
    }); 
 
});

<table> 
 
    <tbody></tbody> 
 
</table>