Tips for designing an interface for object and array of objects in Angular 8 with type script

I am working on designing an interface for handling Objects, objects, and arrays of objects.

Here is a sample of the interface:

export interface ErateColumn {
  categories:{
    [key:string]:column[]
  }
}

interface column {
  label:string
  value:string
}

For instance, consider this sample API response:

{
"categories": {
    "Basic Information": [
        { label: "Applicant Type", value: "ApplicantType" },
        { label: "Organization Name", value: "OrganizationName" },
    ],
    "FRN Lineitem": [
        { label: "Monthly_Cost", value: "Monthly_Cost" },
        ],
    "FRN status": [
        { label: "Purpose Type", value: "PurposeType" },

    ]
}
}

https://i.sstatic.net/tqESh.png

angulartypescript

Answer №1

what you have included in the method 

this._erateColumn.next(columnList)
appears to be just columnList. However, it seems that columnList is expected to be a single object of type ErateColumn, whereas your BehaviorSubject is expecting an array of ErateColumns. You need to either change 
this._erateColumn.next(columnList)
to accept ErateColumn or provide an array for it to work properly.

UPDATE

Based on the new screenshot provided, it indicates that the property categories is missing. You can make it optional by modifying it as follows:

export interface ErateColumn {
  categories?:{
    [key:string]:column[]
  }
}

interface column {
  label:string
  value:string
}

Alternatively, you can provide the missing categories.

Answer №2

If you're looking for a helpful approach, this might be it

To easily convert your JSON into TypeScript's classes or interfaces, consider using the online tool json2ts. Alternatively, if you're working with Visual Studio Code, you can install the extension QuickType - Paste JSON as Code

Important: Make sure your JSON is valid to avoid any errors during conversion

Answer №3

Hopefully this information proves useful...

definition of User:
   name: string;
   phone: string;

user object: const user ==> Object

list of users: const usersList ===> Array of Objects

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

How does Typescript handle dependency injection compared to the JSDoc typedef module import for defining types?

Currently, I am facing an issue with defining dependency injection in Typescript. In my experience with JSDoc, I have used typedef import('./classModule.js').default myClass. To illustrate, let's consider multiple classes stored in their o ...

typescripttypesdependency-injectionjsdoc

The Swiper Slider export called 'Navigation' is not available

Currently, I am working on a project utilizing the Quasar Framework and aiming to integrate the swiper slider. After successfully installing it using the npm command, I verified its version as <a href="/cdn-cgi/l/email-protection" class="__cf_email__" d ...

typescriptvue.jssliderquasar-framework

Error: The NgTools_InternalApi_NG_2 member is not exported in compiler-cli/src/ngtools_api

Currently, my ng serve command is not working and showing the following error message: ERROR in node_modules/@angular/compiler-cli/index.d.ts(20,10): error TS2305: Module '"./node_modules/@angular/compiler-cli/src/ngtools_api"' has no expor ...

angularcompiler-errors

Problem with Invoking method of parent component from child component in Angular 4

Despite having all my event emitters set up correctly, there's one that seems to be causing issues. child.ts: @Component({ ... outputs: ['fileUploaded'] }) export class childComponent implements OnInit { ... fileUploaded ...

angulartypescriptdata-bindingeventemitter

The concept of nesting partial types in Typescript

Struggling to type partial objects from GraphQL queries, especially with an object that looks like this... // TypeScript types interface Foo { bar: Bar } interface Bar { a: number, b: number } // GraphQL query foo { bar { a // 'b&a ...

typescripttypesgraphql

Unused Typescript Library index.d.ts within a Typescript project

Sorry in advance for any confusion, but I'll try my best to explain the issue at hand. Please bear with me. I've developed a library that is then installed via npm into a typescript Vue project. However, despite having an index.d.ts file include ...

typescript

What could be the reason why my Angular component is experiencing input issues?

I am facing an issue with my angular class: @Component({ selector: 'main-title', styleUrls: ['main_title.scss'], template: ` <ng-template> <div class="main-title"> <h2 [ngClass]="{&apo ...

angular

Generating a Heat Map with Angular 4

I have been trying to create a heat chart similar to the one shown in the image below. Despite searching through various blogs and using Google extensively, I have not been able to find what I am looking for. https://i.sstatic.net/Uz3TX.png I have explo ...

angularchartshighchartsheatmap

A guide to effectively unit testing StripeJs within the Karma testing framework for Angular 8

I'm currently facing a challenge in unit testing a payment component that relies on StripeJS. In my 'ng-app.js' file, I import it as follows: stripe: /*@ngInject*/ function ($ocLazyLoad) { return $ocLazyLoad.load({ ...

angularkarma-jasminekarma-runner

Unable to assign unique identifiers to elements within a user interface framework

I am having difficulty assigning an id to components. Scenario 1: - Trying to assign an id to an HTML component. <h1 id="demo-h1">Demo Heading</h1> Assigning id to HTML component Scenario 2: - Attempting to assign an id to a componen ...

htmlangularangularjs

Grid layout with Tailwind

I'm facing a challenge in my Angular project where I need to create a grid layout with 2 rows and 6 columns using Tailwind CSS. The actors array that I am iterating through contains 25 actors. My objective is to show the first 12 actors in 2 rows, fo ...

cssangularcss-gridtailwind-css

Angular 15 RouterOutlet: The Ultimate Routing Solution

I'm encountering an issue while trying to run my Angular project. X [ERROR] NG8001: 'router-outlet' is not recognized: If 'router-outlet' is an Angular component, please ensure it is included in this module. If 'router-outle ...

angulartypescript

What is the process for creating a standard component in React Native?

Creating a generic component is my goal, but I am unsure of how to proceed. Any advice? Model: export interface ISelectOptionsRLV<T, C> { data: T[]; onPress: (option: C[]) => void; } GenericComponentList: import { StyleSheet, Text, View, Fla ...

reactjstypescriptreact-nativeexpo

What is the significance of using 'keyof typeof' in TypeScript?

Can you please explain the concept of keyof typeof in TypeScript? For example: enum ColorsEnum { white = '#ffffff', black = '#000000', } type Colors = keyof typeof ColorsEnum; The above code is essentially equivalent to: type ...

typescripttypeofunion-typeskeyof

Utilizing a library module within an Angular framework

I have a unique angular library structure that consists of percomponent modules. For example, there are two components (A and B), each in its own module. Now, I want to use component A within component B by following this code snippet: // in B module impo ...

angular

Dynamic Route Matching in NextJS Middleware

Currently, I am in the process of developing a website that incorporates subdomains. Each subdomain is linked to a file-based page using middleware. Take a look at how the subdomains are being mapped to specific pages: app.com corresponds to /home app.com ...

javascripttypescriptnext.js

Divide a given number of elements within an array of arrays

Presented below is an array: [ { "id": "34285952", "labs": [ { "id": "13399-17", "location": "Gambia", "edge": ["5062-4058-8562-294 ...

javascriptarraystypescript

Typescript: Omitting mandatory fields from a type

Can anyone help me with defining the type ExcludeAllRequiredProps<T> in the code below to exclude all required properties? Any assistance would be greatly appreciated. Thank you. type A = { a: number, b: number, c?: number, d?: number } typ ...

typescripttypestypescript-typingstypescript-types

Ways to retrieve the following angular.callbacks.counter within angular2

In order to use the Yelp API, a signature is required. This signature needs to be generated by passing all the parameters for the URL that will be used. Simply put, when querying the API using jsonp, the key was to first generate the next JSONP callback I ...

angular

Guide to setting up a universal error handling system compatible with forkJoin in Angular 6

I recently implemented error handling in my app following the guidelines from the official Angular 6 tutorial in rest.service.ts ... return this.http.get(url).pipe(catchError(this.handleError)); } private handleError(error: HttpErrorResponse) ...

angularrxjs6