Displaying a list in Angular view using various object properties

A JSON object has been provided to me with the following structure:

header: {
        first: {
            title: {
                name: "Test
            }
        },
        second: {
            title: {
                name: "Test 2"
            },
            desc: {
                name: "Description"
            }
        }
    }

I am looking to display it in a view similar to this: https://i.sstatic.net/2gQS0.png

How can I achieve this dynamic display in the view considering that the keys may vary each time, such as header or main? I want to create a customizable design like JSONEditor but with my own style. I attempted using ngIf, but it proved to be quite challenging. Any suggestions or assistance would be greatly appreciated.

jsonangulartypescriptobject

Answer №1

If you want to loop through objects in Angular, consider using the KeyValuePipe along with ngFor.

<!-- Sample usage of app-your-node component -->
<div *ngFor="let item of object | keyvalue">
  {{ title }}
  <app-your-leaf *ngIf="yourLogicThatThisIsALeaf(item); else node" 
                 [title]="item.key" [object]="item.value"><app-your-leaf>
  <ng-template #node>
    <app-your-node [title]="item.key" [object]="item.value"></app-your-node>
  </ng-template>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify whether the JSON array is devoid of any elements within the Vuex store

If my array of objects contains data, I want to display a button. In my Vuex store, I have defined an array like this: state: { document: [] }, I am adding data to this array from other components and I have confirmed that the data is being added cor ...

javascriptjsonvue.jsvuejs2vuex

Tips for dynamically updating the name of a JSONObject

I'm working on a project that involves collecting user details through a series of dialogs. The goal is to capture these details and convert them into JSON format. Users have the option to enter details for multiple people, each of which should be con ...

androidarraysjson

Getting the most out of Kendo Charts for Angular: Avoid cutting off the Line Chart by setting a maximum value

Whenever I specify a maximum value in a line chart, the point that corresponds to that value ends up being cutoff. I attempted to add a margin, but unfortunately, the margin is being applied outside of the chart area. I have thoroughly reviewed the API do ...

angularkendo-ui-angular2

Issue: Error message - Unhandled promise rejection: NodeInjector error - ControlContainer not found

I'm having trouble validating a form and encountering an error. I tried implementing the suggestions provided in the following threads without success: Getting error suddenly in Angular Error: NodeInjector: NOT_FOUND [ControlContainer] Using forms i ...

javascriptangularforms

What could be the cause of a JSON string only returning the final object when evaluated?

Does anyone have insight into why only the last object in my json string is returned when I use the eval function? ...

javascriptjson

Tips for populating a dropdown list with data from the backend and selecting the desired value using Angular

I am currently working on an Angular 8 application that utilizes Material design. My goal is to populate a dropdown list with data retrieved from the backend. The API call code snippet is as follows: returnQrCodes$ : Observable<QRCodeDefinitionSelect ...

javascriptangularangular-materialobservable

You must include the formControlName within a parent formGroup directive

Upon creating a model-driven form, an error is encountered: Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class). ...

angularangular2-templateangular2-formsangular2-directives

What is the best way to establish communication with the root component in Angular?

I have implemented a modal in the root component that can be triggered from anywhere. However, I am facing a dilemma on how the bottom component can communicate with the top component without excessive use of callback functions. Root Component <contai ...

angulartypescript

Why doesn't the Angular router events Observable have an unsubscribe method available?

Within my Angular component's ngOnInit lifecycle method, I am subscribing to the Router events like this: this.router.events.subscribe( event => { if (event instanceof NavigationEnd) this.clearMessages(); } ); Typically, when dealing with ...

angularrxjs

Exploring the world of TypeScript type mappings

I'm currently working on enhancing a function with type annotations. This particular function takes an array of typed objects as parameters and returns a mapped array of a different type: const createAnimals = <T extends AnimalFactory<any>[]& ...

typescriptgenericstype-inference

Submitting a Form in Angular using POST method

I am in need of sending data to an external page, specifically a payment gateway page, and then redirecting to that page. If I were not using Angular, I would typically create a form with the destination page specified in the "action" attribute and set th ...

angularform-submit

Next.JS-13 detects faulty middleware in App routing

Here is the code snippet from the middleware file: import { NextResponse } from "next/server"; import type { NextRequest } from "next/server"; // This function can be marked as `async` if using `await` inside export function middleware ...

typescriptmongodbnext.js13

Discovering the functionality of es6 object.assign and find methods within a typescript file

Currently, I am in the process of transitioning from Java Script to TypeScript for my project. However, I am facing limitations as I am unable to utilize object.assign() and find methods. ...

reactjstypescriptecmascript-6

Exploring table iteration in Angular 7

I am looking to create a table with one property per cell, but I want each row to contain 4 cells before moving on to the next row... This is what I want: <table> <tr> <td> <mat-checkbox>1</mat-checkbox& ...

javascriptangulartypescriptloopsangular-template

Introducing the Eventbridge Pipeline enhancer: a tool that assigns a personalized MessageGroupID to each message without

My setup involves an SQS queue that is connected to a FIFO queue through an eventbridge pipe. The pipe extracts a value from the payload and assigns it to the MessageGroupID using a JSONpath expression. import { SqsTarget } from '@aws-cdk/aws-pipes-ta ...

typescriptamazon-sqsaws-cdkfifoaws-event-bridge

Angular 4 is displaying an error message indicating that the expression has been modified after being initially verified

I've been utilizing Angular Material within my Angular 4 application. There seems to be an issue when attempting to utilize the MatSnackBar in the ngAfterViewInit(). The error I encounter is as follows: ExpressionChangedAfterItHasBeenCheckedError: ...

javascriptangularangular-material2

Converting a class into a cohesive JSON string within ASP.NET MVC

I have the following class: [Serializable] public class ApiRequestStatus :IEquatable<ApiRequestStatus> { public static readonly ApiRequestStatus Failure = new ApiRequestStatus("Failure"); public st ...

javascriptasp.netjsonasp.net-mvc-3serialization

Leveraging Json data in Angular components through parsing

I am currently developing an angular application where I need to retrieve and process data from JSON in two different steps. To start, I have a JSON structure that is alphabetically sorted as follows: { "1": "Andy", "2": &qu ...

javascriptnode.jsangulartypescriptangular8

only the final object is visible in the Json array once it has been constructed

When calling a restful service to retrieve documents in the database as a JSON String, there are two loops foaList and otaList. Using just one loop results in the correct JSON response: The following code successfully retrieves the desired response: def ...

jsongroovy

Python: Limit the argument's value

Is there a way to limit the sex argument's value to just male or female in this code? class SoftwareEngineer: def __init__(self, name, age, sex, level, salary): sexes=['male','female'] if sex in sexes: ...

pythonobjectinstanceinit