Tengo los siguientes datos JSON, pero me gustaría implementar la página HTML de modo que muestre el padre como encabezado y todos los hijos bajo el mismo padre bajo el contenido y luego seguir con el segundo padre como encabezado y todos los hijos debajo el segundo padre bajo el contenido. ¿Cómo sería capaz de hacerlo? Un ejemplo sería como el siguiente.
Muestra 1
Producto 1 - Producto de prueba 1
Producto 2 - Producto de prueba 2
Muestra 2
Producto 1 - Producto de prueba 1
"sampleList": [ { "parent": "Sample 1", "children": [ { "product": "Product 1", "name": "Test Product 1" } ] }, { "parent": "Sample 1", "children": [ { "product": "Product 2", "name": "Test Product 2" } ] }, { "parent": "Sample 2", "children": [ { "product": "Product 1", "name": "Test Product 1" } ] } ]La estructura de datos JSON proporcionada contiene claves duplicadas, lo que no es lo ideal. Además, los padres con el mismo valor tienen hijos almacenados en ubicaciones separadas. Si el formato pudiera mejorarse de modo que cada padre e hijo sean elementos separados en la lista, se puede realizar fácilmente de forma iterativa usando un ngFor, que le permite iterar a través de los datos. Proporcionar la clave JSON mostrará los elementos secundarios necesarios. He incluido un ejemplo a continuación. https://angular.io/api/common/NgForOf
Datos reformateados:
sampleList": [ { "parent": "Sample 1", "children": [ { "product": "Product 1", "name": "Test Product 1", }, { "product": "Product 1", "name": "Test Product 1", }], }, { "parent": "Sample 2", "children": [ { "product": "Product 1", "name": "Test Product 1", }] } ] <li *ngFor="let item of sampleList; index as I;"> <h3> {{item.parent}} </h3> <li *ngFor="let item2 of sampleList[I].children;"> <div> {{item2.product}} - {{item2.name}}</div> </li> </li>Array.reduce() para realizar el grupo por parent y concatenar.parent e children . let grouped = this.sampleList.reduce((groups, current) => { groups[current.parent] = groups[current.parent] || []; groups[current.parent].push(...current.children); return groups; }, Object.create(null)); this.groupedSampleList = Object.keys(grouped).map((key) => ({ parent: key, children: grouped[key], })); Si usa es2017 , puede trabajar con Object.entries() como:
this.groupedSampleList = Object.entries(grouped).map((value) => ({ parent: value[0], children: value[1], })); <div *ngFor="let parent of groupedSampleList"> <strong>{{ parent.parent }}</strong> <div *ngFor="let child of parent.children"> {{ child.product }} - {{ child.name }} </div> </div>