Using ngFor directive to iterate through nested objects in Angular

Question

Using ngFor directive to iterate through nested objects in Angular

Receiving data from the server:

{
  "12312412": {
    "id": "12312412",
    "something": {
      "54332": {
        "id": "54332",
        "nextNode": {
          "65474": {
            "id": "65474",
            "data": "any"
          },
          "235235": {
            "id": "235235",
            "data": "any"
          },
          "543524": {
            "id": "543524",
            "data": "any"
          }
        }
      }
    }
  },
  "23242434": {
    "id": "23242434",
    "something": {
      "3234234": {
        "id": "3234234",
        "nextNode": {
          "645636": {
            "id": "645636",
            "data": "any"
          },
          "1543534": {
            "id": "1543534",
            "data": "any"
          },
          "12312412": {
            "id": "12312412",
            "data": "any"
          }
        }
      }
    }
  }
}

Now, looking to loop through nested objects using ngfor in Angular 9. Wondering if creating multiple loops and converting it into an array would optimize performance. Any suggestions for a more efficient solution? Thank you.

javascript json angular typescript ecmascript-6

Answer 1

Answer №1

If you want to achieve your goal, consider creating a recursive component and utilizing the keyvalue pipe. Below is an example of how a component can be structured to handle this:

import { Component, Input, OnInit } from "@angular/core";

@Component({
  selector: "app-key-value-display",
  styleUrls: ["./key-value-display.component.css"],
  template: `
    <div>
      <div
        *ngFor="let item of (obj | keyvalue)"
        [style.margin-left.px]="margin"
      >
        {{ item.key }} :
        <span *ngIf="isPrimitive(item.value); else complex"></span>
        <ng-template #complex>
          <app-key-value-display
            [obj]="item.value"
            [margin]="margin + 4"
          ></app-key-value-display>
        </ng-template>
      </div>
    </div>
  `
})
export class KeyValueDisplayComponent implements OnInit {
  @Input() obj: any;
  @Input() margin = 0;
  constructor() {}

  ngOnInit() {}

  isPrimitive(obj: any) {
    return typeof obj !== "object";
  }
}

Check out Stackblitz for more information.

Answer 2

If you want to achieve your goal, consider creating a recursive component and utilizing the keyvalue pipe. Below is an example of how a component can be structured to handle this:

import { Component, Input, OnInit } from "@angular/core";

@Component({
  selector: "app-key-value-display",
  styleUrls: ["./key-value-display.component.css"],
  template: `
    <div>
      <div
        *ngFor="let item of (obj | keyvalue)"
        [style.margin-left.px]="margin"
      >
        {{ item.key }} :
        <span *ngIf="isPrimitive(item.value); else complex"></span>
        <ng-template #complex>
          <app-key-value-display
            [obj]="item.value"
            [margin]="margin + 4"
          ></app-key-value-display>
        </ng-template>
      </div>
    </div>
  `
})
export class KeyValueDisplayComponent implements OnInit {
  @Input() obj: any;
  @Input() margin = 0;
  constructor() {}

  ngOnInit() {}

  isPrimitive(obj: any) {
    return typeof obj !== "object";
  }
}

Check out Stackblitz for more information.

Using ngFor directive to iterate through nested objects in Angular

Answer №1

Similar questions

Using Ajax on a WordPress webpage

The Joi validate() function will return a Promise instead of a value when used within an asynchronous function

Customize Your Lightbox Fields with DHXScheduler

The ng-repeat function is failing to show any data on the HTML view, instead only displaying a row for each property present

Creating an HTML table from dynamic JSON data - A comprehensive guide

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

Select box failing to display default value

Any ideas on how to format a date for jQuery Datepicker?

Find the value of a JavaScript string variable using an alternative name

Instructions for transferring an object containing data from a subscribed subscription

Error in Material UI when using the select component

Simulating a mobile device screen size using an embedded iframe

What is the best way to perform a redirect in Node.js and Express.js following a user's successful login

displaying a PDF file in Safari

Guide on accessing and displaying data table values in console.log using Vue.js and vuetify

Tips for sending and retrieving parameters using the POST technique

Import statements cannot be used outside of a module when working with a private npm package in cucumber.js

Acquiring a collection of objects retrieved from a set of URLs using rxjs and typescript

Issue: Using the command 'typings search' successfully locates a package, however, when attempting to install it using 'typings install', the process fails

The world of coding comes alive with Quartz Composer JavaScript