How to display an object of objects in angular?

Question

So, there is an object, inside which there are some other objects, and inside them there are more objects. Please, tell me how to output key values. I suppose *ngFor won't help

const data = {
    first_data: {
      id: "1",
      name: "First",
      type: "Administration",
      sections: {
        main_section: {
            id: "main_section",
            name: "Main Section",
            sub_sections: {
                sub_first: {
                    id: "12",
                    name:  "Subsection_name",
                    questions: {
                      first_question: {
                        id: "44",
                        name: "Answer"
                      },
                      second_question: {
                        id: "33",
                        name: "True"
                      }
                    }
                  }
                }
              }
            }
          }
        }

Quite a horrible format :-). You could use a keyvalue pipe in an ngFor I guess? — MikeOne
– MikeOne, Commented Jul 14, 2021 at 13:12

pzaenger · Accepted Answer · 2021-07-14 13:28:19Z

3

Use ngFor combined with KeyValuePipe:

Transforms Object or Map into an array of key value pairs.
<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

However, I guess you need some kind of custom pipe to transform your data. I found this thread including this answer - maybe worth a try.

edited Jul 14, 2021 at 13:28

answered Jul 14, 2021 at 13:13

pzaenger

12.1k3 gold badges48 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

How to display an object of objects in angular?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related