access key and value of object using ngFor

Question

I am a bit confused about how to get the key and value of an object in angular2 while using  ngFor for iterating over the object  I know in angular 1 x there is a syntax like   ng-repeat   key  value  in demo    but I don t know how to do the same in angular2  I have tried something similar  without success        lt ul gt         lt li  ngFor   key of demo  gt   key   lt  li gt       lt  ul gt       demo              key1      key11   value11      key12   value12              key2      key21   value21      key22   value22               Here is a plnkr with my attempt  http   plnkr co edit mIj619FncOpfdwrR0KeG p preview  How can I get key1 and key2 dynamically using  ngFor  After searching extensively  I found the idea of using pipes but I don t know how to go about it  Is there any inbuilt pipe for doing the same in angular2

User · Answer

change demo type to array or iterate over your object and push to another array

public details =[];   
Object.keys(demo).forEach(key => {
      this.details.push({"key":key,"value":demo[key]);
    });

and from html:

<div *ngFor="obj of details">
  <p>{{obj.key}}</p>
  <p>{{obj.value}}</p>
  <p></p>
</div>

User · Answer

Have Object keys accessible in the template and use it in  ngFor    Component     selector   app-myview     template    lt div  ngFor  let key of objectKeys items   gt   key           items key    lt  div gt       export class MyComponent     objectKeys   Object keys    items     keyOne   value 1   keyTwo   value 2   keyThree   value 3       constructor

User · Answer

I think Object keys is the best solution to this problem  For anyone that comes across this answer and is trying to find out why Object keys is giving them   0    1   instead of   key1    key2    a cautionary tale - beware the difference between  of  and  in    I was already using Object keys  something similar to this    interface demo       key  string      value  string     createDemo mydemo  any   Array lt demo gt        const tempdemo  Array lt demo gt                Caution  use  of  and not  in      for  const key of Object keys mydemo             tempdemo push                key  key  value  mydemo key                         return tempdemo      However  instead of   for  const key OF Object keys mydemo       I had inadvertently wrote  for  const key IN Object keys mydemo       which  worked  perfectly fine without any error and returned     key   0   value  undefined    key   1   value  undefined     That cost me about 2 hours googling and cursing     slaps forehead

User · Answer

Elaboration of  Thierry s answer with example  There is no inbuilt pipe or method to get key and value from the  ngFor loop  so we have to create custom pipe for the same  as thierry said here is the answer with code     The pipe class implements the PipeTransform interface s transform method that takes an input value and an optional array of parameter strings and returns the transformed value     The transform method is essential to a pipe  The PipeTransform interface defines that method and guides both tooling and the compiler  It is optional  Angular looks for and executes the transform method regardless  for more info regards pipe refer here import  Component  Pipe  PipeTransform  from  angular2 core   import  CORE DIRECTIVES  NgClass  FORM DIRECTIVES  Control  ControlGroup  FormBuilder  Validators  from  angular2 common     Component       selector   my-app       templateUrl   mytemplate html       directives   CORE DIRECTIVES  FORM DIRECTIVES       pipes   KeysPipe     export class AppComponent       demo          key1    ANGULAR 2        key2    Pardeep        key3    Jain            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         and HTML part is   lt ul gt     lt li  ngFor   key of demo   keys  gt     Key    key key    value    key value      lt  li gt   lt  ul gt   Working Plnkr http   plnkr co edit 50LlK0k6OnMnkc2kNHM2 p preview update to RC as suggested by user6123723 thanks  in comment here is  update   lt ul gt     lt li  ngFor  let key of demo   keys  gt     Key    key key    value    key value      lt  li gt   lt  ul gt

User · Answer

You have to do it like this for now  i know not very efficient as you don t want to convert the object you receive from firebase       this af database list   data     this base64Email  subscribe years   gt            years forEach year   gt                 var localYears                    Object keys year  forEach month   gt                    localYears push year month                                year months   localYears                       this years   years

User · Answer

Update  In 6 1 0-beta 1 KeyValuePipe was introduced https   github com angular angular pull 24319     lt div  ngFor  let item of   b   1   a   1    keyvalue  gt       item key    -    item value     lt  div gt    Plunker Example  Previous version  Another approach is to create NgForIn directive that will be used like      lt div  ngFor  let key in obj  gt      lt b gt    key    lt  b gt      obj key      lt  div gt    Plunker Example  ngforin directive ts     Directive     selector    ngFor  ngForIn      export class NgForIn lt T gt  extends NgForOf lt T gt  implements OnChanges       Input   ngForIn  any     ngOnChanges changes  NgForInChanges   void       if  changes ngForIn          this ngForOf   Object keys this ngForIn  as Array lt any gt          const change   changes ngForIn        const currentValue   Object keys change currentValue         const previousValue   change previousValue   Object keys change previousValue    undefined        changes ngForOf    new SimpleChange previousValue  currentValue  change firstChange          super ngOnChanges changes

User · Answer

As in latest release of Angular  v6 1 0    Angular Team has added new built in pipe for the same named as keyvalue pipe to help you iterate through objects  maps  and arrays  in the common module of angular package  For example -  lt div  ngFor  quot let item of testObject   keyvalue quot  gt      Key   lt b gt   item key   lt  b gt  and Value   lt b gt   item value   lt  b gt   lt  div gt   Working Forked Example check it out here for more useful information -  https   github com angular angular blob master CHANGELOG md features-3 https   github com angular angular commit 2b49bf7  If you are using Angular v5 or below or you want to achieve using pipe follow this answer  access key and value of object using ngfor

User · Answer

From Angular 6 1 you can use the keyvalue pipe    lt div  ngFor  let item of testObject   keyvalue  gt      Key   lt b gt   item key   lt  b gt  and Value   lt b gt   item value   lt  b gt   lt  div gt    But it has the inconvenient that sorts the resulting list by the key value  If you need something neutral    Pipe   name   keyValueUnsorted   pure  false     export class KeyValuePipe implements PipeTransform     transform input  any   any       let keys           for  let key in input          if  input hasOwnProperty key             keys push   key  key  value  input key                       return keys          Don t forget to specify the pure false pipe attribute  In this case  the pipe is invoked on each change-detection cycle  even if the input reference has not changed  so is the case when you add properties to an object

User · Answer

you can get dynamic object s key with by trying this  myObj  key

User · Answer

Marton had an important objection to the accepted answer on the grounds that the pipe creates a new collection on each change detection  I would instead create an HtmlService which provides a range of utility functions which the view can use as follows    Component     selector   app-myview     template    lt div  ngFor  let i of html keys items   gt   i           items i    lt  div gt      export class MyComponent     items    keyOne   value 1   keyTwo   value 2   keyThree   value 3      constructor private html  HtmlService        Injectable   export class HtmlService     keys object            return Object keys object                other useful methods not available inside html  like isObject    isArray    findInArray    and others

User · Answer

Thanks for the pipe but i had to make some changes before i could use it in angular 2 RC5  Changed the Pipe import line and also added type of any to the keys array initialization    import  Pipe  PipeTransform  from   angular core      Pipe  name   keys     export class KeysPipe implements PipeTransform    transform value       let keys any          for  let key in value          keys push   key  key  value  value key                 return keys

User · Answer

There s a real nice library that does this among other nice pipes  It s called ngx-pipes    For example  keys pipe returns keys for an object  and values pipe returns values for an object   keys pipe   lt div  ngFor  let key of  foo  1  bar  2    keys  gt   key   lt  div gt    lt  -- Output   foo  and  bar -- gt    values pipe   lt div  ngFor  let value of  foo  1  bar  2    values  gt   value   lt  div gt   lt  -- Output  1 and 2 -- gt    No need to create your own custom pipe

User · Answer

If you re already using Lodash  you can do this simple approach which includes both key and value    lt ul gt     lt li  ngFor  let key of   keys demo   gt   key      demo key    lt  li gt   lt  ul gt    In the typescript file  include   import   as   from  lodash     and in the exported component  include      any

User · Answer

Here is the simple solution  You can use typescript iterators for this  import  Component  from  angular2 core   declare var Symbol   Component       selector   my-app       template   lt div gt       lt h4 gt Iterating an Object using Typescript Symbol lt  h4 gt  lt br gt  Object is    lt p gt   obj   json   lt  p gt   lt  div gt                               lt br gt  Iterated object params are   lt div  ngFor   o of obj  gt    o    lt  div gt        export class AppComponent     public obj  any          type1     A1    A2    A3   A4         type2     B1         type3     C1         type4     D1   D2           constructor         this obj Symbol iterator          gt              let i  0             return               next       gt                  i                  return                     done  i  gt  4 true false                    value  this obj  type  i                                                              http   plnkr co edit GpmX8g p info

User · Answer

Use index    lt div  ngFor  let value of Objects  index as key  gt    Usage     key   - gt    value

User · Answer

You could create a custom pipe to return the list of key for each element  Something like that   import   PipeTransform  Pipe   from   angular core     Pipe  name   keys    export class KeysPipe implements PipeTransform     transform value  args string      any       let keys           for  let key in value          keys push key             return keys          and use it like that    lt tr  ngFor  let c of content  gt                lt td  ngFor  let key of c   keys  gt   key      c key    lt  td gt   lt  tr gt    Edit  You could also return an entry containing both key and value    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          and use it like that    lt span  ngFor  let entry of content   keys  gt               Key    entry key    value    entry value    lt  span gt

User · Answer

Thought of adding an answer for Angular 8  For looping you can do   lt ng-container  ngFor  quot let item of BATCH FILE HEADERS   keyvalue  keepOriginalOrder quot  gt      lt th nxHeaderCell gt    upload bulk headings   item key  translate   lt  th gt   lt  ng-container gt   Also if you need the above array to keep the original order then declare this inside your class  public keepOriginalOrder    a  b    gt  a key

User · Answer

None of the answers here worked for me out of the box  here is what worked for me   Create pipes keys ts with contents   import   Pipe  PipeTransform   from   angular core     Pipe  name   keys    export class KeysPipe implements PipeTransform       transform value any  args string     any           let keys any                 for  let key in value                keys push  key  key  value  value key                       return keys            Add to app module ts  Your main module    import   KeysPipe   from    pipes keys     and then add to your module declarations array something like this    NgModule       declarations            KeysPipe          export class AppModule      Then in your view template you can use something like this    lt option  ngFor  let entry of  myData   keys   value     entry key     gt    entry value    lt  option gt    Here is a good reference I found if you want to read more

[angular] access key and value of object using *ngFor

Examples related to angular

Examples related to typescript

Examples related to object