Exploring the utilization of the For loop concept in a nested schema

Stored JSON schema format in buttonSchema after receiving it as a response

{
    "Name": "Test",

    "layoutSections": [
        {
            "layoutColumns": [
                {
                    "layoutItems": [
                        {

                            "name": "test",

                        },]
                 },]
           },]
}

HTML File for reading JSON schema

<div *ngFor="let Schema of buttonSchema?.layoutsections">
     <div *ngFor="let Schema1 of Schema?.layoutcolumns"> 
    <div *ngFor="let Schema2 of Schema1?.layoutItems">

    </div> 
    </div> 
    </div>

Typescript File

buttonSchema: any;
 ngOnInit() {
    this.buttonSchema = this.authenticationService.buttonSchema;

**const s1 = this.buttonSchema.layoutsections; 
const s2 = s1.layoutcolumns;  
 const s3 = s2.layoutItems;**

}

Implementation of logic in Typescript to achieve what is done in HTML.

Answer №1

Iterating through the button schema layout sections, columns, and items to retrieve each item.
for (let sectionIndex = 0; sectionIndex < buttonSchema.layoutsections.length; sectionIndex++) {
  for (let colIndex = 0; colIndex < buttonSchema.layoutsections[sectionIndex].layoutcolumns.length; colIndex++) {
    for (let itemIndex = 0; itemIndex < buttonSchema.layoutsections[sectionIndex].layoutcolumns[colIndex].layoutitems.length; itemIndex++) {
      const item = buttonSchema.layoutsections[sectionIndex].layoutcolumns[colIndex].layoutitems[itemIndex];
    }
  }
}

Answer №2

give this a shot

<div *ngFor="let Data of buttonData.layoutsections">
     <div *ngFor="let Data1 of Data"> 
    <div *ngFor="let Data2 of Data1">

    </div> 
    </div> 
    </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

Issue with defining controllers in AngularJS 1.3.0 using TypeScript

Our application utilizes the "controller as" syntax for AngularJS: <div class="workspace-header" ng-controller="LoginController as loginCtl"> The LoginController is defined as a TypeScript class like so: class LoginController { // variables he ...

Binding objects and properties from Angular2/Typescript to a template

Disclaimer: Seeking insight on the correct approach or any additional information _____________________________________________________________________ ANGULAR1 When working with angular1, we had the option to define our objects in the following ma ...

Iterate and combine a list of HTTP observables using Typescript

I have a collection of properties that need to be included in a larger mergeMap operation. this.customFeedsService.postNewSocialMediaFeed(this.newFeed) .mergeMap( newFeed => this.customFeedsService.postFeedProperties( newFeed.Id, this.feedP ...

What is the method for inserting an object into a jsonArray in TypeScript?

I am trying to add an object to existing JSON data in TypeScript. I am new to TypeScript and have created an array variable called jsonArrayObject, which contains a boolean[] type. This jsonArrayObject holds a contactModel object with properties like fname ...

The callback function `(err: any, data: any) => void` does not share any properties with the type `RequestInit`

Inspired by the tutorial at , I am working on a time-based visualization. I am currently using version "d3": "^5.4.0". Here is the code snippet: d3.json('http://127.0.0.1:5000', function (err, data) { if (err) throw err; // Cre ...

The parameter type 'typeof LogoAvatar' cannot be assigned to the argument type 'ComponentType<LogoProps & Partial<WithTheme>'

Why is the argument of type typeof LogoAvatar not assignable to a parameter of type ComponentType<LogoProps & Partial<WithTheme>? Here is the code snippet: import * as React from "react"; import { withStyles } from "@material-ui/core/style ...

Transmit data from a child component to a Vue JS page through props, and trigger the @blur/@focus function to access the prop from the parent component

Seeking guidance on working with props in Vue JS. As a newcomer to Vue, I hope that my question is clear. I've included my code snippet below, but it isn't functioning correctly due to missing Vue files. In my attempt to use a prop created in t ...

Can PassportLocalDocument and PaginateModel coexist within the same framework?

I am new to TypeScript and NestJS, looking to implement a pagination feature for all models in my application. Currently using NestJS with Mongoose for the API project. Here is an example of the user schema: export const UserSchema = new mongoose.Schema( ...

Increase the timestamp in Typescript by one hour

Is there a way to extend a timestamp by 1 hour? For instance, 1574620200000 (Including Microseconds) This is my date in timestamp format. How can I add a value to the timestamp to increase the time by an additional hour? ...

Looking for assistance in crafting a test case for the .subscribe method in Angular

In the ngOnInit lifecycle hook, I am subscribing to a stream of data that contains a name object. If the name is not empty, I am updating the value of this.name with the received Name object. Can someone assist me in creating test cases to ensure code cov ...

Something went wrong with geolocation: ERROR TypeError: Unable to assign value to property 'lat' of null

Issue with Retrieving User's Location In my Angular project, I am trying to access the user's current location and store the longitude and latitude values in two properties named lng and lat. However, I am facing a persistent issue where I keep ...

Setting an optional property to null is not permitted

In my model class, I have defined an optional property as follows: export class Workflow { constructor( public id: number, public started: Date, public documentId: number, public document: Document, public status: WorkflowStatus, ...

Is there a way to bypass the "Error: Another application is currently displaying over Chrome" message using Javascript or Typescript?

Can the "Another app is displaying over chrome error" be bypassed using JavaScript or TypeScript? Error Message: https://i.stack.imgur.com/iSEuk.png ...

Exploring the potential of React with Typescript: Learn how to maximize

Having some difficulties working with Amplitude in a React and Typescript environment. Anyone else experiencing this? What is the proper way to import Amplitude and initialize it correctly? When attempting to use import amp from 'amplitude-js'; ...

Is it necessary to establish a new connection each time I make a request to IndexedDB?

Currently, I am working on a basic Angular project and I have the requirement to save some data in IndexedDB. In my service, there is an initialization of private db: IDBDatabase; within the constructor: However, I face an issue where this initialized DB ...

What is the reason behind TypeScript not stating "When comparing a string to a null value, the condition will always return 'false'?"

When comparing a string to a number, an error and warning are generated. But why is there no warning when comparing a string to null/undefined? In this case, the type 'smth' is still narrowed to never without any warning displayed. The strictNul ...

Is it possible to enable tooltips to function through the innerHTML method?

Currently, I am utilizing the innerHTML attribute to modify the inner HTML of a tag. In this instance, it involves the <td></td> tag, but it could be applied to any tag: <td *matCellDef="let order" mat-cell [innerHTML]="order. ...

Passing integers as props in Svelte components

Just starting out with Svelte and I'm trying to figure out how to pass a number value as a prop. Here's the code I have so far: <script lang="ts"> import Infobox from "./Infobox.svelte"; </script> <Infobox cl ...

Jest test encounters import error when attempting to import pure ESM module in TypeScript project

Hello, I am currently facing an issue while trying to utilize the file-type module, which is pure ESM, in a TypeScript project with Jest. Despite following the ESM guidelines outlined here, I continue to encounter a SyntaxError: Cannot use import statement ...

Upon updating AngularFire, an error is thrown stating: "FirebaseError: Expected type 'Ea', but instead received a custom Ta object."

I have recently upgraded to AngularFire 7.4.1 and Angular 14.2.4, along with RxFire 6.0.3. After updating Angular from version 12 to 15, I encountered the following error with AngularFire: ERROR FirebaseError: Expected type 'Ea', but it was: a c ...