Предполагая, что у вас есть действительный массив JSON (тот, который вы опубликовали, недействителен) Вы можете сделать это очень простым способом, используя Angular.
Вы можете легко архивировать это, используя подчеркивание в вашем угловом приложении.
как использовать библиотеку underscore.js в угловом 2
groupedSeriesNames = []
groupedSeries = []
categories = Category: {
document1a: {
name : "reptiles"
animalsubcollection: {
Document1b: {
name: "snake"
color: "white"
}
Document2b: {
name: "lizard"
color: "black"
}
document2a: {
name : "mammals"
animalsubcollection: {
Document1b: {
name: "monkey"
color: "brown"
}
Document2b: {
name: "cat"
color: "white"
}
.
.
.
Примерлучшей структуры данных:
{
type: "reptiles",
name: "snake",
color: "white"
},
{
type: "reptiles",
name: "snake",
color: "white"
},
{
type: "mammals",
name: "snake",
color: "white"
}
}
ИЛИ
{
name: "reptiles",
animalsubcollection: {
Document1b: {
name: "snake",
color: "white"
}
}
},
{
name: "mammals",
animalsubcollection: {
Document1b: {
name: "leion",
color: "white"
}
}
},
{
name: "mammals",
animalsubcollection: {
Document1b: {
name: "papa",
color: "white"
}
}
}
this.groupedTypes = _.groupBy(this.categories, category=>category.name);
this.groupedSeriesNames = Object.keys(this.groupedSeries)
Certificate.serie станет их ключом, вы можете изменить сертификат.serie на любое другое свойство, такое как iden или что вам нужно
ваш html
<ul class="cert-result">
<li *ngFor="let key of groupedSeriesNames">
<table *ngFor="let category of groupedSeries[key]">
<tr>
<th>Name</th>
<th>Color</th>
</tr>
<tr>
<td>{{category.color}}</td>
<td>{{category.name}}</td>
</tr>
</table>
</li>
</ul>
Код без подчеркивания (при условии, что json правильно структурирован)
function formatedCerts() {
return categories.reduce((prev, now) => {
if (!prev[now.name]) {
prev[now.name] = [];
}
prev[now.name].push(now);
return prev;
}, {});
}