Guide to displaying a nested object in Angular 7

Question

Guide to displaying a nested object in Angular 7

Within my object data, I have a nested structure-

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

I assigned this to the items object. Next, I attempted displaying it in my HTML component like so-

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

However, the output appears as-

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

Could someone kindly advise on how to properly display this nested object? Appreciate any assistance!

angular typescript object angular7

Answer 1

Answer №1

Instead of using ngFor, which is typically meant for arrays (which you don't have), consider revising your data structure. If it needs to remain an object, simply access the specific property like this: data.def.id, no need for ngFor.

Here's another example to retrieve the firstname:

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

Answer 2

Instead of using ngFor, which is typically meant for arrays (which you don't have), consider revising your data structure. If it needs to remain an object, simply access the specific property like this: data.def.id, no need for ngFor.

Here's another example to retrieve the firstname:

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

Answer 3

Answer №2

When dealing with objects, using *ngFor may not work exactly like it does with arrays. A possible workaround is to create a recursive function in your TypeScript file:

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

In your HTML file, you can then use this function like so:

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

This will display the following content on your page:

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

Answer 4

When dealing with objects, using *ngFor may not work exactly like it does with arrays. A possible workaround is to create a recursive function in your TypeScript file:

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

In your HTML file, you can then use this function like so:

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

This will display the following content on your page:

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

Guide to displaying a nested object in Angular 7

Answer №1

Answer №2

Similar questions

What are the steps to transpile NextJS to es5?

What causes a standard React component with a default render prop to not pass PropTypes validation successfully?

Using dual index variables in Angular 4's ngFor loop for iterating through arrays

How to style a parent div with a background class in Angular 6

Ensure that you only run `npm publish` in the Angular monorepo if there

Issue: The CSS loader did not provide a valid string output in Angular version 12.1.1

Issue with updating view in React Native/Javascript after an asynchronous fetch operation. Execution order may be invalid

Is there a way to customize the language used for the months and days on the DatePicker

Boost the Gen 2 User Directory

What is the best way to incorporate a cancel button in an Angular application?

Utilizing span elements to display error messages

Redux dealing with collections of objects and searching through deeply nested objects

Incorporate TypeScript into your React projects for improved type

What is causing JavaScript to pass the parameter name instead of the element?

Can a string be used to reference a type in Typescript?

Mixing pipe operators with Angular Observables in an array

Converting any object into a List of integers: Step by step guide

Encountering an issue in app.module.ts with Angular 6 when trying to pass an array of injectables to providers resulting in the error message: "Property 'length' of undefined cannot be read"

Utilize Redux in conjunction with TypeScript to seamlessly incorporate a logout feature

Pause for a few moments until assigning a new value to the observable