Tengo un objeto de matrices que se ve así
const books = { __typename: '', items: [ { id:'' store: 1 type: 'ROMAN' name: 'blalala' } { id:'' store: 1 type: 'BIOGRAPHY' name: 'blalala' } { store: 1 id:'' type: 'ROMAN' name: 'blalala' } { id:'' store: 2 type: 'ROMAN' name: 'blalala' } ]Lo que necesito es tener un mat select que contenga solo los libros de tipo romano en cada tienda asi
<mat-select formControlName="booksForm"> <mat-optgroup *ngFor="let store of stores" [label]="books.store" [disabled]="store.disabled"> <mat-option *ngFor="let romanBook of books" [value]="books.items.name"> {{ romanBook.name }} </mat-option> </mat-optgroup> </mat-select>No sé cómo recorrer los datos para obtener solo las tiendas que contienen libros de tipo ROMAN y luego recorrer los libros romanos en esa tienda específica para mostrarlos como mat-option, ¿alguna idea o ayuda?
Simplemente itere sobre sus artículos y agréguelos a una nueva matriz con objetos correspondientes a sus tiendas
const books = { __typename: '', items: [ { id:'', store: 1, type: 'ROMAN', name: 'blalala' }, { id:'', store: 1, type: 'BIOGRAPHY', name: 'blalala' }, { store: 1, id:'', type: 'ROMAN', name: 'blalala' }, { id:'', store: 2, type: 'ROMAN', name: 'blalala' } ] } let stores = [] for (let i = 0; i < books.items.length; i++) { if (books.items[i].type === 'ROMAN') { const index = stores.findIndex(elem => elem.id === books.items[i].store) if (index != -1) { stores[index].books.push(books.items[i]) }else{ stores.push({id:books.items[i].store,books:[books.items[i]]}) } } } console.log(stores) Puede eliminar if (books.items[i].type === 'ROMAN') si desea tener todos sus libros sin importar su tipo, y luego en la plantilla html verifique si es ROMAN o cualquier otra cosa con un *ngIf