I have created table from the below mentioned JSON which works fine. I have certain condition that needs to be handled. the function which i used is also mentioned here.I also attached output image for the same.Help for the same is highly appreciated… Thanks in advance Conditions :
- if email row is empty need to remove that particular row.
- Let’s say value2 has one value in email, in that case it should be displayed.
rows = []; generateTable() { if (!this.data) { return; } this.rows.push([ { text: this.data.e_o_name, rowspan: 0 } ]); let maxRowSpan = 0; this.data.matching_details.forEach((detail, i) => { const elemRowSpan = Math.max(detail.matching_attributes.length, 1); maxRowSpan += elemRowSpan; if (i > 0) { this.rows.push([]) } this.rows[this.rows.length - 1].push({ text: detail.me_value, rowspan: elemRowSpan }); detail.matching_attributes.forEach((attr, j) => { if (j > 0) { this.rows.push([]) } const mail = attr.me_list[0]; this.rows[this.rows.length - 1].push( { text: attr.me_name, rowspan: 1 }, { text: mail.me_email_list.map(({ me_value }) => me_value).join(', '), rowspan: 1 }, { text: mail.me_percent, rowspan: 1 } ); }) }); this.rows[0][0].rowspan = maxRowSpan; } ``` #Josn : # ``` { "e_id":"1234", "e_o_name":"Contact_info", "matching_details":[ { "me_value":"value1", "matching_attributes":[ { "me_id":"1234", "me_name":"28 sai", "me_list":[ { "me_type":"Email ID", "me_email_list":[ { "me_value":"a@gmail" }, { "me_value":"b@gmail" } ], "me_percent":"100" } ] }, { "me_id":"5678", "me_name":"29 meena", "me_list":[ { "me_type":"Email ID", "me_email_list":[ { "me_value":"c@gmail.com" }, { "me_value":",d@gmail.com" } ], "me_percent":"100" } ] } ] }, { "me_value":"value2", "matching_attributes":[ { "me_id":"1234", "me_name":"rimzim", "me_list":[ { "me_type":"Email ID", "me_email_list":[ { "me_value":"p@gmail" }, { "me_value":"q@gmail" } ], "me_percent":"100" } ] }, { "me_id":"5678", "me_name":"ranu", "me_list":[ { "me_type":"Email ID", "me_email_list":[ { "me_value":"t@gmail.com" }, { "me_value":",u@gmail.com" } ], "me_percent":"100" } ] } ] } ] }
Advertisement
Answer
Seems like you want to put in column (attr) level validations, so in the html while looping through it you will need to implement the checks
https://stackblitz.com/edit/angular-zm1ap1?file=src/app/app.component.html
<table> <tbody> <tr> <th>contact</th> <th>ty</th> <th>ed</th> <th>mail</th> <th>percent</th> </tr> <tr *ngFor="let row of rows"> <!-- check if row is empty or could add additional check such row[3].text (email) is true --> <ng-container *ngIf='row && row.length > 0'> <td [attr.rowspan]='row[0].rowspan'>{{row[0].text}}</td> <td *ngIf='row.length > 1' [attr.rowspan]='row[1].rowspan'>{{row[1].text}}</td> <td *ngIf='row.length > 2' [attr.rowspan]='row[2].rowspan'>{{row[2].text}}</td> <td *ngIf='row.length > 3' [attr.rowspan]='row[3].rowspan'>{{row[3].text}}</td> <td *ngIf='row.length > 4' [attr.rowspan]='row[4].rowspan'>{{row[4].text}}</td> </ng-container> </tr> </tbody> </table>