how to display row data with respect of columns

Question

i have `

displayColumns = [{name:Id, value: id}{name:Customer, value: Customer},{name:City, value: City},{name:State, value: State},{name:Type, value: Type}]`

and row data is

 userInfoList =[ {
          "Id": 1,
          "Customer": "Ram",
          "City": "Hyderabad",
          "State" : "Andhra",
          "Type" : "Estimation"
        },
        {
          "Id": 2,
          "Customer": "Ramya",
          "City": "Hyderabad",
          "State" : "Andhra",
          "Type" : "Order"
        },
        {
          "Id": 3,
          "Customer": "Ramakrishna",
          "City": "Hyderabad",
          "State" : "Andhra",
          "Type" : "Sales"
        },
        {
          "Id": 4,
          "Customer": "Kishore",
          "City": "Hyderabad",
          "State" : "Andhra",
          "Type" : "Return"
        },
        {
           "Id": 5,
          "Customer": "Anil",
          "City": "Hyderabad",
          "State" : "Andhra",
          "Type" : "Purchange"
        }
     ]

my print section html for table is

 <table class="table">
    <thead>
   <tr>
   <th class="text-left" *ngFor = "let column of displayColumns">
   {{column.name}}
     </th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let list of userInfoList; let i=index">
    <td *ngFor="let key of list" > 
     {{list[key]}}
  </td>     
   </tr>
   </tbody>                                    
</table>

hear unable to display row data with respect of columns could u please suggest me how to find it .. its for print section requirement. display columns is fine but unable to show row data .

tfa · Answer 1 · 2020-05-05T11:55:32.773

0

Something like this should do it

<table class="table">
    <thead>
   <tr>
   <th>Id</th>
   <th>Customer</th>
   <th>City</th>
   <th>State</th>
   <th>Type</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let item of userInfoList  | keyvalue; let i=index">
     <td ng-repeat="obj in item"> 
        <b>{{item | json}}</b>
     </td>  
   </tr>
  </tbody>    


</table>

edited May 05 '20 at 11:55

answered May 05 '20 at 11:02

tfa

1,643
16
18

hi tfa its written alredy my columns and respect data are dynamically .. thats the cause hear ... may change columns .. – Cherry R May 05 '20 at 11:05
https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor might help – tfa May 05 '20 at 11:55

score 0 · Answer 2 · answered May 05 '20 at 12:14

0

i trid like bellow its working now

<tr *ngFor="let list of userInfoList ; let i=index">
 <td *ngFor="let key of list | keyvalue" >                                                                                {{key.value}}
 </td>
</tr>

answered May 05 '20 at 12:14

Cherry R

89
1
1
7

how to display row data with respect of columns

2 Answers2