Unable to iterate *ngFor loop with array of column in table

Question

I have table like this which i want to iterate

Heating                    Diesel            Benzin         Fracht
43.10                      87.15             108.00                       
43.35                      87.40             108.25                           
43.80                      87.80             108.60         2394.00             

-----                      -----             -----           ----

Here is json data which i want to insert into my table and here first object is one column, second object is second column like that i need to insert 4 columns. i don't understand how to iterate this with *ngFor loop. please excuse if any thing wrong in my question.

[
      {
        "s4": "43,10",
        "s5": "43,35",
        "s6": "43,80",
        "s7": "43,90",
        "s8": "44,10",
        "s15": "64,25",
        "s9": "44,55",
        "s10": "43,20",
        "s11": "43,90",
        "s16": "54,00"
      },
      {
        "s4": "87,15",
        "s5": "87,40",
        "s6": "87,80",
        "s7": "87,90",
        "s8": "88,05",
        "s15": "121,05",
        "s9": "88,60",
        "s10": "87,30",
        "s11": "88,00",
        "s16": "80,90"
      },
      {
        "s4": "108,00",
        "s5": "108,25",
        "s6": "108,60",
        "s7": "108,70",
        "s8": "108,85",
        "s15": "119,65",
        "s9": "109,30",
        "s10": "108,50",
        "s11": "109,00",
        "s16": "92,25"
      },
      {
        "s4": "",
        "s5": "",
        "s6": "2394,02",
        "s7": "12,29",
        "s8": "2395,46",
        "s15": "",
        "s9": "2386,92",
        "s10": "22:05",
        "s11": "",
        "s16": ""
      }
    ] 

 <table *ngIf="indexdata">
      <tr style="color: #3B6593" >
        <th><strong>Heizöl</strong></th>
        <th><strong>Diesel</strong></th>
        <th><strong>Benzin</strong></th>
        <th><strong>Facht</strong></th>
      </tr>
      <tr *ngFor="let index of indexdata;let i=index">
         <td>{{index.s4}}</td>
         <td>{{index.s5}}</td>
         <td>{{index.s6}}</td>
         -----
         -----
      </tr>
      </table>

Ramesh Rajendran · Accepted Answer · 2017-05-23 08:30:07Z

1

Your code should be

 <table *ngIf="indexdata">
        <tr style="color: #3B6593">
            <th><strong>Heizöl</strong></th>
            <th><strong>Diesel</strong></th>
            <th><strong>Benzin</strong></th>
            <th><strong>Facht</strong></th>
        </tr>
        <tr>
            <td *ngFor="let indexvalue of indexdata">
                <table>
                    <tr *ngFor="let indexobj of indexvalue | keys">
                        <td>
                            {{indexobj.value}}
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

You could create a custom pipe to return the list of key for each element. Something like this:

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

edited May 23, 2017 at 8:30

answered May 23, 2017 at 7:31

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

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

1 Comment

U rock Over a year ago

Thank you bro it works. i wrote this before hard coded. now its fine.

Collectives™ on Stack Overflow

Unable to iterate *ngFor loop with array of column in table

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