How to iterate object keys using ngFor

Question

I want to iterate  object object  using  ngFor in Angular 2  The problem is the object is not array of object but object of object which contains further objects         data          id   834       first name    GS        last name    Shahid        phone    03215110224        role   null       email    test example com        picture        lt -- I want to get thumb  url but not able to fetch that          url   null         thumb              url   null                     address    Nishtar Colony        city id   2       provider    email        uid    test example com          I know we can use pipe to iterate the object but how we can iterate further from object to object means data- picture- thum url

User · Accepted Answer

Angular 6 0 0  https   github com angular angular blob master CHANGELOG md 610-2018-07-25  introduced a KeyValuePipe  See also https   angular io api common KeyValuePipe    Component     selector   keyvalue-pipe     template    lt span gt       lt p gt Object lt  p gt       lt div  ngFor  let item of object   keyvalue  gt          item key     item value        lt  div gt       lt p gt Map lt  p gt       lt div  ngFor  let item of map   keyvalue  gt          item key     item value        lt  div gt     lt  span gt      export class KeyValuePipeComponent     object    key  number   string     2   foo   1   bar      map   new Map   2   foo     1   bar           original  You can use a pipe   Pipe   name   keys    pure  false    export class KeysPipe implements PipeTransform       transform value  any  args  any     null   any           return Object keys value    map key   gt  value key                 lt div  ngFor  let key of objs   keys  gt    See also How to iterate object keys using  ngFor

User · Answer

Angular now has a type of iterate Object for exactly this scenario  called a Set  It fit my needs when I found this question searching  You create the set   add  to it like you d  push  to an array  and drop it in an ngFor just like an array  No pipes or anything   this myObjList   new Set           this myObjList add obj           lt ul gt      lt li  ngFor  let object of myObjList  gt         object       lt  li gt   lt  ul gt

User · Answer

I think the most elegant way to do that is to use the javascript Object keys like this  I had first implemented a pipe for that but for me  it just complicated my work unnecessary    in the Component pass Object to template   Object   Object    then in the template    lt div  ngFor  let key of Object keys objs   gt     my key    key      my object   objs key    json    lt  -- hier I could use ngFor again with Object keys objs key   -- gt   lt  div gt    If you have a lot of subobjects you should create a component that will print the object for you  By printing the values and keys as you want and on an subobject calling itselfe  recursively   Hier you can find an stackblitz demo for both methods

User · Answer

i would do this    lt li  ngFor  let item of data   click   onclick item   gt   item picture url   lt  li gt

User · Answer

If you are using a map   operator on your response you could maybe chain a toArray   operator to it   then you  should be able to iterate through newly created array   at least that worked for me

User · Answer

1 Create a custom pipe to get keys    import   Pipe  PipeTransform   from   angular core     Pipe     name   keys     export class KeysPipe implements PipeTransform      transform value  any  args   any   any       return Object keys value                 In angular template file  you can use  ngFor and iterate over your object object       lt div class   test   ngFor  let key of Obj   keys  gt        key         Obj key  property   lt div gt

User · Answer

I know this question is already answered but I have one solution for this same    You can also use Object keys   inside of  ngFor to get required result   I have created a demo on stackblitz  I hope this will help guide to you others   CODE SNIPPET     HTML Code    lt div  ngFor  let key of Object keys myObj   gt     lt p gt Key- gt    key   and value is - gt    myObj key    lt  p gt   lt  div gt        ts file code   Object   Object   myObj          id   834       first name    GS        last name    Shahid        phone    1234567890        role   null       email    test example com        picture              url   null           thumb                  url   null                       address    XYZ Colony        city id   2       provider    email        uid    test example com

User · Answer

You have to create custom pipe   import   Injectable  Pipe   from   angular core    Pipe      name   keyobject      Injectable   export class Keyobject    transform value  args string    any       let keys           for  let key in value            keys push  key  key  value  value key               return keys       And then use it in your  ngFor   ngFor  let item of data   keyobject

[angular] How to iterate object keys using *ngFor

Examples related to angular

Examples related to ionic2