Binding a dynamic object to Html using Angular2

Question

this.procFilterResults: any[];    
this.procservices.GetProcData(this.selectedServer, this.selectedProjectName,
                              this.selectedProc, this.procInput,_inputs ) 
  .subscribe(res => {                
            this.procFilterResults = JSON.parse(res);
            this.Keys=Object.keys(this.procFilterResults[0]);                
            console.log(this.procFilterResults);
         },
        error => this.errorMessage = <any>error);

 <table class="table table-bordered">
        <thead>
          <th *ngFor="let key of Keys">
             {{key}}
          </th>
        </thead>
    <tbody>
      <tr *ngFor= 'let res of procFilterResults'>

      </tr>
    </tbody>
 </table>

Based on my inputs I am getting the new object for every request. And I want to bind the result to the table. Is there any way that with out deserializing the object can I bind to HTML table.?

Pankaj Parkar · Accepted Answer · 2017-08-17 14:50:47Z

1

You could create a consider reformat dynamic object in two dimensional format. I haven't tested below code please give a try once.

// Add this inside subscribe
this.Keys = (this.procFilterResults.length || []) && 
             Object.keys(this.procFilterResults[0]);
this.results = this.procFilterResults.map(
  element => {
   let obj = [];
   this.Keys.forEach(key => obj.push({key: key, value: element[key]}))
   return obj;
  }
)

Html

<table class="table table-bordered">
    <thead>
       <th *ngFor="let key of Keys">
          {{key}}
       </th>
    </thead>
    <tbody>
      <tr *ngFor='let res of results'>
         <td *ngFor="let item of res">
            {{item.value}}
         </td>
      </tr>
    </tbody>
</table>

I had intentionally had a key inside result array, so that in future you can easily perform searching, filtering, sorting kind of functionality easily.

edited Aug 17, 2017 at 14:50

answered Aug 16, 2017 at 21:33

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

venu Over a year ago

Unhandled Promise rejection: Template parse errors: Can't bind to 'ngForIn' since it isn't a known property of 'td'. (" <tr *ngFor= "let res of results"> {{res}} <td [ERROR ->]*ngFor="let item in res"> {{item.value}} </td> "): ProcComponent@83:22 Property binding ngForIn not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <tr *ngFor= "let res of results">

Pankaj Parkar Over a year ago

@kevin check updated answer, I had mistake in last code

venu Over a year ago

may I know, what change did u made..?Thank you, Pankaj.

Pankaj Parkar Over a year ago

@kevin there was syntactical mistake, changed *ngFor="let item in res" to *ngFor="let item of res", inshort in => of

Collectives™ on Stack Overflow

Binding a dynamic object to Html using Angular2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related