How to print a nested object in Angular 7?

Question

I have a nested object data-

    "data": {
        "serial": "123",
        "def": {
            "id": "456",
            "data": {
                "firstname": "abc",
                },
            "method": "post",
        },
        "ghi": {
            "id": "456",
            "data": {
                "amount": "3500.0",
                    },
            "method": "post",
            },
        "jkl": "done"

    }

I stored it in items object.Then, I tried printing it in my HTML component using-

<div *ngFor="let item of items | keyvalue">
        <div>
            <div>{{item.key}}:{{item.value}}</div>
        </div>
</div>

But the output comes as-

serial: 123
def: [object Object]
ghi:  [object Object]
jkl: done

How can I print this nested object? Thanks in advance !

Andrew Howard · Accepted Answer · 2021-03-30 08:09:49Z

1

You’re using ngFor which is mainly used for arrays, which you don’t have. I suggest you revise your data or if it does need to stay as an object then simply do: data.def.id for example - no ngFor required.

Another example to get the firstname:

{{data?.def?.data?.firstname}}

edited Mar 30, 2021 at 8:09

answered Mar 29, 2021 at 20:43

Andrew Howard

3,0927 gold badges41 silver badges72 bronze badges

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

6 Comments

Joris Molnar Over a year ago

Just saying "refactor your data" is not an answer in my opinion. It's possible the data comes from some system that Atul doesn't control. There are most certainly ways to achieve what @Atul wants. Whether those are easier or harder is another question.

Atulya Over a year ago

@AndrewJuniorHoward Actually,the data is a response to an API call.So,it can't be modified.

Andrew Howard Over a year ago

@Atul ok but you've totally missed the second part of my answer . I've stated that you can navigate an object simply by going down the nodes. The accepted answer whilst valid, is overblown. There is no need to use ngFor.

Andrew Howard Over a year ago

@JorisMolnar I gave 2 answers actually. Both satisfy each outcome

Atulya Over a year ago

@AndrewJuniorHoward yeah,it worked without having to use *ngFor.But if the data is huge.It becomes hectic to display it manually. Your solution works fine ,if I wanted to access a particular .Thanks for your help :)

|

EspressoCode · Accepted Answer · 2021-03-29 22:21:34Z

I think for an object you may not be able to use *ngFor like the way you use it for arrays. My solution is to use a recursive function like this in your ts file:

  expand(data: any): string[] {
    let stringArr = [];
    for (const prop in data) {
      data[prop] instanceof Object
        ? (stringArr = stringArr.concat([`${prop}: `]).concat(this.expand(data[prop])))
        : stringArr.push(`${prop}: ${data[prop]}`);
    }
    return stringArr;
  }

and then in your HTML file:

<div *ngFor = " let item of expand(data)">
    {{ item }}
</div>

then it will show this on your page:

serial: 123
def:
id: 456
data:
firstname: abc
method: post
ghi:
id: 456
data:
amount: 3500.0
method: post
jkl: done

Collectives™ on Stack Overflow

How to print a nested object in Angular 7?

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related