angular render table ngFor for nested json with dynamic column names

Question

Still learning Angular (version 8). I have the following JSON

{layer1 : [
     {
        id: 'lay1',
        name: 'first layer',
        results:
        [
           { rows: [{ col1: '0', description: 'any'}, {col1: '0b', description: 'meh'}] },
           { rows: [{ col1: '1', description: 'some'}] },
        ]
     }
  ]
, layer2: [
     {
        id: 'lay2',
        name: 'second layer'
        results:
        [
           { rows: [{ col1: '7', description: 'more'}] },
           { rows: [{ col1: '8', description: 'none'}] },
        ]
     }
  ]
}

The result should be a table like this

 <table id='lay1'>
   <tr>
     <td>0 </td>
     <td>any</td>
   </td>
   <tr>
     <td>0b </td>
     <td>meh</td>
   </td>
   <tr>
     <td>1</td>
     <td>some</td>
   </td>
 </table>
 <table id='lay2'>
   <tr>
     <td>7 </td>
     <td>more</td>
   </td>
   <tr>
     <td>8</td>
     <td>none</td>
   </td>
 </table>

note: results rows columns can change (sometimes 2 columns, sometimes 4 columns) and change the names (could be 'col1' but could be 'ident' or any other name). I have tried several options but I'm stuck on this. Any help highly appreciated

nested ngfor didn't work ? can you make a snippet ?

nab
– nab

2020-02-10 22:32:39 +00:00
Commented Feb 10, 2020 at 22:32 — nab
– nab, Commented Feb 10, 2020 at 22:32

Pardeep Jain · Accepted Answer · 2020-02-11 06:56:31Z

1

Try this -

<table *ngFor='let tableItem of data | keyvalue' [id]='tableItem?.value[0]?.id'>
  <tbody *ngFor='let rowsItem of tableItem?.value[0]?.results; let rowIndex = index'>
    <tr *ngFor='let rowItem of rowsItem?.rows; let rowIndex = index'>
      <td *ngFor='let colItem of rowItem | keyvalue; let colIndex = index'>
        {{colItem?.value}}
      </td>
    </tr>
  </tbody>
</table>

Working Example

edited Feb 11, 2020 at 6:56

answered Feb 11, 2020 at 6:42

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BernieSF Over a year ago

that worked like a charm. I made some little adjustments, since my tables are inside tabs. Thanks a lot!

Collectives™ on Stack Overflow

angular render table ngFor for nested json with dynamic column names

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related