Angular 6, Iterate over a deeply nested object within angular template

Question

I have an object from a service like below

  let obj = [
    0: {
      key1: 'val',
      key2: 'val',
      key3: [{
        key1: 'val',
        key2: 'val',
        key3: []; 
      }]
    }
    1: {
      key1: 'val',
      key2: 'val',
      key3: [{
        key1: 'val',
        key2: 'val',
        key3: []; 
      }]
    }
  ]

the index can be more than 2 arrays, it an be upto 10 or more. I need to iterate over the index and the keys/value of their objects.

The outcome should be key1: val key2: val

and once I hit key3 the output should be key1: val key2: val

I've tried getting the keys for the obj using Object.keys(obj), but that only returns 0 and 1. How can I get the keys of the inner objects, and render keys/values inside of my angular template?

 <div *ngFor="let key of obj">
    {{key +': '+ obj[key]}}
 <div>

doesn't work. the additional issue with the template above is it doesn't take into account the deeply nested object and its key/value pair.

Any help here would be appreciated. If anything is confusing please ask for clarification.

Do you need to keep level of deepnes, or just want to iterate over all keys? — Piotr Lewandowski
– Piotr Lewandowski, Commented Jun 4, 2018 at 17:47
I need to iterate over all keys, and if one of the keys has an array or object as values, i need to iterate of that as well. My other option is to extract the deeper obj (since i'm using typescript) and maybe have an if/else check that skips the deeper obj in outer iteration and in a separate div iterate over the deeper obj. However, that requires some manuel work which I want to aviod. I;d like to keep everything dynamic and render the json object that comes back. Hope that was clear. — Generaldeep
– Generaldeep, Commented Jun 4, 2018 at 18:27

Gurvinder Guraya · Accepted Answer · 2018-06-05 11:12:39Z

0

I have created a example on how you can handle this

https://stackblitz.com/edit/angular-aczh2w?file=src%2Fapp%2Fhello.html

Is this what are you looking for ?

answered Jun 5, 2018 at 11:12

Gurvinder Guraya

6694 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Angular 6, Iterate over a deeply nested object within angular template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related