Implementing binding of JSON API responses to dropdown menus in Angular 4

In my current Angular 4 application, I am faced with the challenge of populating a dropdown menu with data from an API response.

Specifically, I am struggling to retrieve the necessary information for each section from the API.

The API provides data on Categories, Groups, and Sub-groups, where each Group includes two sub-groups.

To demonstrate my issue, I have created a StackBlitz file which you can access here:

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-y6iknh?file=app%2Fapp.component.ts

While I am able to receive the API response, I am unsure how to map the values to the dropdown options correctly.

If anyone could provide guidance on how to tackle this problem, it would be greatly appreciated.

angulartypescript

Answer №1

To bind data with a variable, you can parse it into json() and then access the data in your view like this:

 ngOnInit() {
    this.CartdataService.get_New_Products().subscribe(
      data => {
        this.dropdownData = data.json();
                  console.log(data.json());
      });


<div class="col-sm-12" style="margin-top: 20px !important" *ngFor='let data of dropdownData; let i=index'>
    <div class="col-sm-12 opt1">
        <div class="row">
            <h5>
                <a class="col-sm-12 font-weight-normal">
          {{data?.CAMD_ENTITY_DESC}}
        </a> 
            </h5>
            <i class="fa fa-angle-down ind" data-toggle="collapse" [attr.href]="'#collapseExample' + data?.CAMD_ENTITY_DESC"></i>
        </div>
    </div>
    <div class="col-sm-12 collapse opt1" [id]="'collapseExample' + data?.CAMD_ENTITY_DESC"
  *ngFor='let group of data?.group; let j=index'>
        <div class="row">
            <h6>
                <p class="dropdown-item col-sm-10">{{group?.CAMD_PRGRP_DESC}} </p>
            </h6>
            <i class="fa fa-angle-down ind arrow" data-toggle="collapse" [attr.href]="'#innerCollapse' + group?.CAMD_PRGRP_DESC"></i>
        </div>
    <div class="collapse col-sm-12" [id]="'innerCollapse' + group?.CAMD_PRGRP_DESC">
        <div class="row" *ngFor='let subgroup of group?.subgroup; let i=index'>
            <h6>
                <a class="dropdown-item opt">{{subgroup?.CAMD_PRSGRP_DESC}}</a>
            </h6>
        </div>
    </div>
    </div>
</div>

You can check out a working example here:

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

Dockerized Angular CLI app experiencing issues with hot reload functionality

My existing angular cli application has been dockerized with the following setup: Dockerfile at root level: # Create a new image from the base nodejs 7 image. FROM node:7 # Create the target directory in the imahge RUN mkdir -p /usr/src/app # Set the cr ...

angulardockerangular-cli

Searching for the correct navigation menu path using Angular 5's query functionality

Struggling to retrieve the Angular path query from the navigation menu. Every attempt I make with the code below results in undefined or null: this.route.paramMap.subscribe(params => this.Name = params.get('name') ); Here ...

angular

"Enhance your web development with TypeScript and react-select

I find myself in a peculiar predicament. Currently, I am immersing myself in learning TypeScript and here is a brief overview of what transpired so far: const [selectedBankCode , setSelectedBankCode] = useState<string | undefined>(); const [selecte ...

reactjstypescriptreact-select

Choosing everything with ngrx/entity results in not selecting anything

Issue with Selector I am facing an issue with my selector in the component. Despite making the call, the component does not update with books from the FakeApiService. The actions and effects seem to be functioning correctly. The problem seems to be relat ...

angulartypescriptngrxngrx-entity

Change the content inside a div depending on the value of a button

I am currently exploring how to change the content of a div based on button values, utilizing angular2+. Below is my implementation in HTML and js export class TestComponent implements OnInit { title:string = "provas"; constructor() { } popula ...

javascriptangular

What is the best way to assign JSON data to a Class variable within Angular?

In my code, I have a class called Projects export class Projects { project_id: number; project_name: string; category_id: number; project_type: string; start_date: Date; completion_date: Date; working_status: string; project_info: string; area: string; add ...

javascriptangulartypescriptangular8

Leveraging non-ionic-native Cordova plugin

I'm currently working on integrating the [This]https://github.com/louisbl/cordova-plugin-locationservices plugin into my Ionic 4 app. Since it's a non-Ionic-native plugin, what is the proper way to call its functions within my TypeScript code? ...

angulartypescriptcordovaionic-frameworkionic4

Configuring child routes in Angular 8 for optimal navigation efficiency

I am working on an Angular 8 app where I have created two modules: testModule and SimulatorModule The simulator module has a routing file, but the testModule does not. I am trying to load all the components in the Simulator module as children of the Tes ...

angularroutesangular-load-children

Error message in Angular 2 Routing: Unable to locate main outlet for loading 'AppComponent'

I am currently working on developing an Angular application and have created a login component. Upon successful login, the user should be directed to the dashboard page. I have built a dashboard component for this purpose. To handle navigation in Angular ...

angularangular2-routing

Using Express to serve both the Angular application and its API

Currently, I have set up an Express app with the following routing configuration: app.use(express.static(path.join(__dirname, '../angular-app/dist'))); app.use('/', express.Router().get('/', function(req, res, next) { ...

angularexpressmod-rewriteapache2reverse-proxy

Sending an array of functions to the onClick event of a button

Having difficulty with TypeScript/JavaScript Currently working with an array of functions like this private listeners: ((name: string) => void)[] = []; Successfully adding functions to the array within another function. Now looking to trigger those ...

javascriptarraystypescript

Ways to receive a reply from EventEmitter

From the child component, I made a call to a certain method. Here is the code in the child component: @Output() parentEvent = new EventEmitter<any>(); click1() { //calling the specified method from the child this.parentEvent.emit(myObj1); ...

angulartypescripteventemitter

Splitting Ngrx actions for individual items into multiple actions

I'm currently attempting to create an Ngrx effect that can retrieve posts from several users instead of just one. I have successfully implemented an effect that loads posts from a single user, and now I want to split the LoadUsersPosts effect into ind ...

angulartypescriptngrxngrx-effects

Implementing Autocomplete feature in Reactjs with Ant Design Library

In my React application, I created an autocomplete feature with a list of options for the user to select from. Example in Action: Click here to see the demo List of available options: const options = [ { label: "hello", value: "1" ...

javascriptreactjstypescriptautocompleteantd

The data that has been retrieved is not currently displayed within the Vue table

I'm currently exploring js/vue and I'm attempting to retrieve data from an API. There's a field where the value is used to fetch data from the API based on that keyword. When I check the console log, I can see that the data is being received ...

javascriptarraystypescriptvue.jsdatatable

Encountering a JSON error in Ionic 3 due to a circular structure conversion

Hello everyone, I am a beginner in Angular 2+ and Ionic 3. I am currently attempting to submit a login form from my Ionic 3 app to my ASP.NET Web API application for token-based authentication. However, I keep encountering the following error: converting c ...

jsonangularasp.net-web-apiionic-frameworkionic3

Is hard coding permissions in the frontend considered an effective approach?

I'm in the process of creating an inventory management system that allows admin users to adjust permissions for other employees. Some permissions rely on others to function properly, and I need to display different names for certain permissions on the ...

javascripthtmlangularuser-permissions

The various types of Angular 2 FormBuilders

As I delved into learning Angular 2, I initially came across ngModel, and later discovered FormGroup/FormBuilder which seemed more suitable for handling complex forms. However, one downside that caught my attention was that by using FormBuilder, we sacrifi ...

angulartypescriptangular2-formbuilder

Expanding the Mui Typescript breakpoints within a TypeScript environment

Encountering a typescript error when attempting to utilize custom names for breakpoint values: Type '{ mobile: number; tablet: number; desktop: number;}' is not compatible with type '{ xs: number; sm: number; md: number; lg: number; xl: numb ...

typescriptmaterial-ui

Attempting to execute "npm install" on the organization's system is resulting in the following error message

Working on an Angular project that was cloned from Git. Encountered an error while installing npm dependencies: npm ERR! code ECONNREFUSED npm ERR! errno ECONNREFUSED npm ERR! FetchError: request to https://registry.npmjs.org/@angular%2fmaterial fail ...

node.jsangularnpm