How to iterate table loop without hard coded in angular 2

Question

I am new to Angular2 and I have json data something like this which I need to iterate in my table. every key value is different so do I need to interpolate every key value or something can do smarter way. what if I have hundreds of rows.

    [
              {
        "medg01morl": "908,25",
        "medg01morh": "910,25",
        "medg01mitl": "905,00",
        "medg01mith": "907,00",
        "medg01abentl": "888,75",
        "medg01abenth": "890,75",
        "medg01vortagl": "889,50",
        "medg01vortagh": "891,50",
        "medd01morl": "936,25",
        "medd01morh": "938,25",
        "medd01mitl": "933,00",
        "medd01mith": "935,00",
        "medd01abentl": "916,75",
        "medd01abenth": "918,75",
        "medd01vortagl": "914,50",
        "medd01vortagh": "916,50",
              }
            ]

aramed:Array<Object>;

    <table *ngFor="let med of aramed">
                <tr style="color: #3B6593">
                    <th><strong>Quality</strong></th>
                    <th><strong>19:00</strong></th>
                    <th><strong>13:00</strong></th>
                    <th><strong>07:00</strong></th>
                    <th><strong>19:00</strong></th>
                </tr>
                <tr>
                    <td style="color: orange"><strong>Super95</strong></td>
                    <td> {{med.medg01morl}} / {{med.medg01morh}} </td>
                    <td> {{med.medg01mitl}} / {{med.medg01mith}} </td>
                    <td> {{med.medg01abentl}} / {{med.medg01abenth}} </td>
                    <td> {{med.medg01vortagl}} / {{med.medg01vortagh}} </td>
                </tr>
                   <tr>
                    <td style="color: orange"><strong>Eurobob</strong></td>
                    <td> {{med.medd01morl}} / {{med.medd01morh}} </td>
                    <td> {{med.medd01mitl}} / {{med.medd01mith}} </td>
                    <td> {{med.medd01abentl}} / {{med.medd01abenth}} </td>
                    <td> {{med.medd01vortagl}} / {{med.medd01vortagh}} </td>
                </tr>
            </table>

You can use pipe for filter the value – Vignesh May 17 '17 at 07:18 — Vignesh, May 17 '17 at 07:18

score 0 · Answer 1 · answered May 17 '17 at 07:46

myArr = [
  'super95': {
    "medg01morl": "908,25",
    "medg01morh": "910,25",
    "medg01mitl": "905,00",
    "medg01mith": "907,00",
    "medg01abentl": "888,75",
    "medg01abenth": "890,75",
    "medg01vortagl": "889,50",
    "medg01vortagh": "891,50",
    "medd01morl": "936,25",
    "medd01morh": "938,25",
    "medd01mitl": "933,00",
    "medd01mith": "935,00",
    "medd01abentl": "916,75",
    "medd01abenth": "918,75",
    "medd01vortagl": "914,50",
    "medd01vortagh": "916,50",
  },
  {},
  {},
  ...
]

<table>
  <tr style="color: #3B6593">
    <th><strong>Quality</strong></th>
    <th><strong>19:00</strong></th>
    <th><strong>13:00</strong></th>
    <th><strong>07:00</strong></th>
    <th><strong>19:00</strong></th>
  </tr>
  <tr *ngFor="let key of keys(myArr)">
    <td style="color: orange"><strong>{{key}}</strong></td>
    <td *ngFor="let key of keys(myArr[key]); let ndx === index;">
      <ng-container *ngIf="ndx % 2 === 0">
        {{myArr[key][key]}} / {{myArr[key][keys[ndx + 1]]}}
      </ng-container>
    </td>
  </tr>
</table>

How to iterate table loop without hard coded in angular 2

1 Answers1