CODEWITHSUNDEEP
javascripthtmlangular
CliffC
CliffC

Reputation: 933

ngFor rendering html columns per repeat

I have the following JSON result:

queryResults =[
    {
        name:cliff,
        age:30,
        hobby:golf,
        email;[email protected]
    },
    {
        productname:coke,
        productlife:2,
        price:60,
        popularity:1
    }    
]

as the result is coming dynamicaly i have to loop through they key and key value to get the property name and value using the following code

<md-card  *ngFor='let result of queryResults | keys'>
 <md-card-title-group>
          <md-card-subtitle class="card-details">
              <table class="table">

                    <tr *ngFor='let  cont of result.value | keys'   >
                             <td class="text-bold">{{cont.key}} :</td>
                             <td  > {{cont.value}}</td>
                    </tr>     
              </table>
          </md-card-subtitle>

    </md-card-title-group>

</md-card>

which would produce result in the following format

  name: cliff
  age: 30
  hobby:golf
  email:[email protected]

  productname:coke
  productlife:2
  price:60
  popularity:1

what should i do if i want to render it to the following format?

name: cliff     age:30
hobby:golf      email:[email protected]

productname:coke   productlife:2
price:60           popularity:1

plunker link https://plnkr.co/edit/jaYdwFRTE2Kdwslx7sl0?p=preview

Upvotes: 0

Views: 1316

Answers (2)

CliffC
CliffC

Reputation: 933

found the solution thanks to MarcoS suggestion

<html>
  <head>
    ...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    ...
  </head>
  <body>
    ...
    <md-card *ngFor='let result of queryResults | keys'>
      <md-card-title-group>
        <md-card-subtitle class="card-details">  
          <div *ngFor='let cont of result.value | keys; let i =index'>
           <div [ngClass]="{row:i % 2 == 1}">
            <div class="col-xs-3 text-bold">{{cont.key}} :</div>
            <div class="col-xs-3">{{cont.value}}</div>
           </div>
          </div>
        </md-card-subtitle>
      </md-card-title-group>
    </md-card>
    ...
  </body>
</html>

Upvotes: 1

MarcoS
MarcoS

Reputation: 17711

If your're using an html/css framework (like Bootstrap), you could use it's own grid system...
For example:

<html>
  <head>
    ...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    ...
  </head>
  <body>
    ...
    <md-card *ngFor='let result of queryResults | keys'>
      <md-card-title-group>
        <md-card-subtitle class="card-details">  
          <div *ngFor='let cont of result.value | keys' *ngIf="$index % 2 == 0" class="row">
            <div class="col-xs-3 text-bold">{{cont.key}} :</div>
            <div class="col-xs-3">{{cont.value}}</div>
          </div>
        </md-card-subtitle>
      </md-card-title-group>
    </md-card>
    ...
  </body>
</html>

Upvotes: 2

Related Questions