Defining a JSON file interface in Angular to populate a dropdown box with dependencies

I've embarked on an exciting project to develop a cascading dropdown box filter, and it's proving to be quite challenging.

I'm taking it step by step to ensure clarity. I have obtained a JSON file containing the data required to populate dependent dropdown boxes.

{"data":
{"events":
{"type":"cart_update",
    "properties":
        [{"property":"product_id","type":"string"},
        {"property":"variant_id","type":"string"},
        {"property":"category_level_1","type":"string"},
        {"property":"category_level_2","type":"string"},
        {"property":"category_level_3","type":"string"},
        {"property":"product_list","type":"string"},
        {"property":"action","type":"string"}]},
{"type":"view_item",
    "properties":
        [{"property":"product_id","type":"string"},
        {"property":"variant_id","type":"string"},
        {"property":"category_level_1","type":"string"},
        {"property":"category_level_2","type":"string"},
        {"property":"category_level_3","type":"string"}]}]},"success":true}

To aid in navigating my JSON file effectively, I've created interfaces. Let me know if this is correct:

export interface DataInterface {
  events: Array<EventInterface>;
  success: boolean;
}
export interface EventInterface {
  type: string;
  properties: Array<PropsInterface>;
}

export interface PropsInterface{
  property: string;
  type:string;
}

@Injectable({
  providedIn: 'root'
})

export class DataService {

  constructor(private http: HttpClient) { }
     
  getData() {
    return this.http.get('./assets/data.json')   
  }
  }

The next challenge I face is how to populate dropdown boxes with the various event[type] and properties[property], as well as creating dependencies between them. Any suggestions?

angulartypescript

Answer №1

take a look at the edits made below

**export interface ResponseInterface {
  information: DataInterface;
}**
export interface DataInterface {
  eventsList: EventInterface[];
  successStatus: boolean;
}
export interface EventInterface {
  categoryType: string;
  details: PropsInterface[];
}

export interface PropsInterface{
  attribute: string;
  dataType:string;
}

@Injectable({
  providedIn: 'root'
})

export class DataService {
  // extracting relevant data from http request
  attributes: PropsInterface[] = this.getData().pipe(pluck("information", "eventsList", "details"));
  constructor(private http: HttpClient) { }
     
  getData() {
    return this.http.get***<ResponseInterface>***('./assets/data.json')   
  }
  }

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

Encountering a Typescript error while attempting to iterate through Enum keys for generating JSX components

I'm really struggling with this problem. Here's a simple enum I have: export enum depositTypes { ACH = 42, Wire = 36, Check = 3, Credit = 2, } I'm trying to create option tags for a select element, like so: Object.keys(depositTyp ...

javascriptreactjstypescriptenumsmapping

How to dynamically add an HTML element following a specific div class in Typescript and Angular

Is there a way to dynamically insert a component into a div after a specific element with a designated class name using TypeScript? <div class ="{{order.orderId}}"> <div class="enter-here"></div> <other html elements here> < ...

htmlangulartypescript

Incorporating marker tags to different sections of text within a contenteditable div

The main objective of this feature is to enable users to select placeholders within message templates (variable names enclosed in %). Inspired by Dribbble The API provides strings in the following format: "Hello %First_Name% %Middle_Name% %Last_Name% ...

javascripthtmlcssangular

Exploring the versatility of Angular by creating various flex layouts with Angular Material cards

I'm struggling to implement the design shown below using cards and a flex layout in a responsive way. I've tried working on it using StackBlitz but haven't been able to get it right - the margin and layout get messed up on different screens. ...

cssangularflexboxangular-material

What is the best way to change a timestamp into a date format using Angular?

I am struggling to convert a timestamp to the date format 'dd/MM/YYYY' but keep getting a different date format in the output. I am using syncfusion spreadsheet for this task. export-electronic.component.ts updatedata(){ this.dataApi.get ...

angulartypescript

Managing business logic in an observable callback in Angular with TypeScript - what's the best approach?

Attempting to fetch data and perform a task upon success using an Angular HttpClient call has led me to the following scenario: return this.http.post('api/my-route', model).subscribe( data => ( this.data = data; ...

javascriptangulartypescriptobservableangular-httpclient

How can I make ngFor update after an object has been modified?

I'm currently working on a function that updates an object property after an item is dropped in a drag and drop scenario. However, it seems like either my function is incorrect or there might be something else that needs to be done because the display ...

angular

I want to know the most effective way to showcase particular information on a separate page using Angular

Recently, I've been working with a mock json file that contains a list of products to be displayed on a Product page. My goal is to select a specific product, such as 'Product 1', and have only that product's information displayed on th ...

jsonangulartypescript

Step-by-step guide to designing a leaflet map using Angular Formly

I am faced with a challenge to incorporate a leaflet map into an angular form using formly, and being new to this formly framework is making it difficult for me. Previously, I was able to integrate the map with regular HTML in angular as shown below: map ...

angularleafletangular-formlyangular-leaflet-directive

Sharing boolean values between Angular components is not working as expected

I'm working on a simple use case but seem to be missing something. In this scenario, I have two components: componentA and componentB. I am trying to pass a boolean value from componentB to componentA using an eventEmitter in order to show/hide a spe ...

angulareventemitter

Running the `npm start` command in Angular tends to be quite time-consuming

When I use Visual Studio Code to run Angular projects, my laptop seems to take a longer time when running the server through npm start compared to others. Could this delay be related to my PC specifications, or is there something I can do to improve it? ...

javascripttypescriptnpmvisual-studio-codenpm-start

Issue with manipulating element styles using jQuery in Angular2

My method of assigning IDs to elements dynamically using *ngFor looks like this: <div *ngFor="let section of questionsBySubCat" class="col-md-12"> <div class="subcat-container"> <h4 class="sub-cat">{{ section?.subcategory }}& ...

javascriptjqueryangulartypescript

TypeScript is unable to recognize files with the extension *.vue

Can someone assist me with an issue I'm facing in Vue where it's not detecting my Single File Components? Error message: ERROR in ./src/App.vue (./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Ap ...

javascripttypescriptwebpackvue.js

What is the process of unloading pages in Angular 2?

In the process of developing an Angular 2 application consisting of approximately 200 pages, we have considered various loading strategies such as lazy loading, eager loading, and pre-loading. A question that arises is whether a page that has been lazily ...

angular

Different ways to showcase a value from the CSS file on the console using console.log

In this guide, you can learn how to create a custom directive in Angular by following this tutorial: Custom Directive Tutorial. The directive should function as intended. Still, I want to see the color value set in the CSS file displayed on the console us ...

javascriptnode.jsangulartypescript

You won't find the command you seek within the confines of "tsc."

Whenever I type tsc into the terminal (regardless of location), I am met with the following message: $ npx tsc --version This is not the tsc command you are looking for In order to access the TypeScript compiler, tsc, from the command li ...

typescriptnpmtsc

When you type a letter in the middle of a string, the cursor is automatically moved back to the end - Material UI

I designed a ChipInput feature that switches to a string when focused and transforms into a Chip component when blurred, with chips separated by commas. Everything seems to be functioning properly except for one issue I am encountering. Whenever I type in ...

reactjstypescriptmaterial-uitextfield

Fade-in and fade-out animations in Angular triggered by a click event

I developed a fade-in, fade-out animation for a div element. My goal is to achieve the following: Upon initial page load, there is a div element that displays some numbers. On the right and left sides of the div, there are two buttons. When a user cl ...

angularangular-animations

Allow only numerical values through an ion-input in Ionic 4, preventing the input of letters and special characters

I am currently developing an application in Ionic 4 that requires users to enter only integer numbers (0-9). I need to prevent any other characters such as alphabets, dots, or plus signs from being entered. However, the methods I have tried so far have not ...

typescriptionic-frameworkangular7ionic4

How can you avoid inspecting webpack internal code when debugging in Visual Studio Code with React Typescript or NextJS?

While debugging NextJS Typescript, the Visual Studio Code debugger seems to be stepping into webpack-internal generated source files. The launch.json file in Visual Studio code is configured as: { "version": "0.2.0", "configura ...

reactjstypescriptvisual-studio-codenext.jsvscode-debugger