Ways to fill the option selections using the service

I am currently working on an Angular application where I need to populate dropdown lists from backend data.

.component.ts

public getMemberCodes() {
    let baseUrl = `/endpoindAPI`;
    this._restfulService
      .restfulGetData(baseUrl)
      .subscribe(
        (actionLookupData: ActionLookupData) => {
          if (actionLookupData) {
            this.option1Codes = actionLookupData.Option1Codes;
               this.option2Codes = actionLookupData.Option2Codes;
               this.option3Codes = actionLookupData.Option3Codes;
          
 }
        },
        (err) => {
          console.error(err);
        }
      );
  }

I need to extract Category values from the response like Option1Codes and Option2Codes to populate the dropdown lists with these values.

The structure of the response is as follows:

Option1Codes: [{Category: "Category1", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}] Option2Codes: [{Category: "Category2", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}]

My goal is to display only the Category values in the dropdown lists based on the backend data.

.component.html

 <select    class="form-control"  required>
<option>
//code 
</option>
</select>
javascriptangulartypescriptdropdown

Answer №1

If you want to iterate through a list in Angular, you can utilize the ngFor directive:

<select *ngFor="let optionCode of OptionCodes"> {{ link }}

It would be beneficial for you to refer to the official documentation regarding this topic

Answer №2

When you have only one list

Option1Codes: [{Category: "Category1", ActionStatusTypeID: 1, Complete", ActionID: 5060,…}]

This is the method to use

<select *ngFor="let optionCode of Option1Codes" class="form-control" required>
<option>
{{optionCode?.Category}}
</option>
</select>

If you have three separate lists named option1Codes, option2Codes, and option3Codes.

If you want to combine them into one list, you need to merge all lists into a single array Like so...

 let list = [...option1,...option2,...option3];

<select  *ngFor="let optionCode of list" class="form-control"  required>
    <option>
    {{optionCode?.Category}}
    </option>
    </select>

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

The AJAX request is not successful because it is encountering a ReferenceError due to attempting to assign a value to an

My attempt to trigger a modal using dynamic data from the database with an AJAX function is encountering issues. Upon clicking the button to open the modal, I encounter this error: ReferenceError: assignment to undeclared variable PostRPC in category.ph ...

javascriptphpjquerymysqlajax

The JSON.stringify method may not accurately reflect the original object that was converted into a string

Working on a Connect Four app for my school project has been an interesting challenge. At the moment, I am grappling with JSON.stringify and trying to encode an object that holds a two-dimensional array of "hole" objects to eventually send it to the server ...

javascriptjsonnode.jsstringify

Convert query strings into objects using Node.js

Looking for assistance with parsing a GET request that is structured as follows: /api/stores?offset=10&limit=15?order=+name?filter=name='Tesco|distance=4 I am in need of help to parse the +name query parameter into an object formatted as {name: ...

javascriptnode.jsrestexpress

"Is there a virtual keyboard available that supports multiple inputs and automatically switches to the next input when the maximum length

Looking to build a virtual keyboard with multiple inputs that automatically switch to the next input field after reaching the maximum length. Currently having an issue where I can only fill the first input and not the second one. Any assistance in resolvin ...

javascripthtmljqueryajax

Tips for eliminating the "Your connection is not secure" page in Firefox when using "Selenium with JavaScript"

My current project involves automating a secure URL using Selenium, WebdriverIO, and JavaScript. However, the page keeps redirecting to a "Your connection is not secure" message. I have attempted to address this issue by setting various preferences in the ...

javascriptseleniumfirefoxselenium-webdriverwebdriver-io

Can you explain the distinction between an optional field and a union?

Is there a significant distinction between the following structures: { ok: boolean; } | { ok: boolean; error: any; } and: { ok: boolean; error?: any; } I have observed variance in the inferred types of frontend methods' return ou ...

typescript

After switching over to Angular 6 from Angular 5, it's been noticed that the Bootstrap button styles are lacking proper

We recently completed an upgrade from Angular 5 to Angular 6. The problem: After the upgrade, we noticed that Bootstrap button styles no longer have any margin spacing between them. Current Bootstrap Version: 3.3.7 For instance, if you have the followin ...

cssangulartwitter-bootstrapbuttonupgrade

There seems to be an issue with the functionality of the JavaScript Quiz as it is

While working on my JS quiz, I encountered an issue where some answers were not displaying due to quotes and the need to escape HTML characters. Additionally, I am facing difficulty in accurately awarding points or deductions based on user responses. Curre ...

javascripthtmlcss

Change parent component state using a specific key-value pair

Within my React application, I am struggling to modify the parent component from a child component. I want to achieve this by calling a function in the parent component and passing both a key and a value. Here is an example of what I have attempted: var F ...

javascriptreactjs

trouble combining two arrays of JavaScript objects

I'm facing a challenge with an object array. I need to add a new object "WITH" a specific index, but I'm unsure of the correct approach. This is my current attempt: //ORIGINAL DATA: this.fetchedData = [{ "startMinute": 0, //Remove "annotati ...

javascriptjqueryarrays

The item image fails to load when Swiper is looped and using the next/prev buttons

I'm encountering an issue with swiper while trying to create a specific layout. This layout requires the first image to be larger than the others. Initially, I attempted to achieve this with a single slider but it caused miscalculations in the animati ...

javascriptcssswiper.js

Exploring the connection between Jquery and Javascript event handling within ASP.NET C# code-behind, utilizing resources such as books and

It seems that Jquery, Javascript, and AJAX are gaining popularity now. I am interested in learning how to use this functionality within C#. Do you have any recommendations for resources or books that teach JavaScript from a C# perspective on the web? Not ...

c#javascriptjqueryasp.net

The 'onSubmit' property is not found in the 'CampaignComponent' type

Currently, I am encountering an issue with my app when trying to send data to the API. The problem arises when using ng serve, as it throws an error TS2339: Property 'onSubmit' does not exist on type 'CampaignComponent'. The error disa ...

angularapi

Examining the performance of a React application through the use of Google Chrome

Currently, while working on my react application, I have been utilizing the chrome developer tool to monitor performance. However, I am having difficulty identifying which specific function is causing a high level of computational intensity. Could anyone ...

javascriptreactjsgoogle-chrome-devtools

Click to Resize Window with the Same Dimensions

I have a link on my website that opens a floating window containing more links when clicked. <a href='javascript:void(0);' onclick='window.open("http://mylink.html","ZenPad","width=150, height=900");' target='ZenPad'>&l ...

javascripthtmlcss

Does the arc() method in canvas.getContext('2d') appear centered?

It caught my attention that circles do not require any offsetting to be centered. Is this automatic? If so, can you explain why it differs from the rect, fillRect, fillText, and strokeText methods where centering requires offsetting? ...

javascripthtml5-canvas

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Desired Outcome for my Javascript: I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition() ...

javascriptjqueryhtmlcsstypeerror

Accessing a PDF document from a local directory through an HTML interface for offline viewing

As I work on developing an offline interface, I'm encountering an issue with displaying a PDF file when clicking on an image. Unfortunately, the code I have in place isn't working as intended. Can someone please assist me with this problem? Below ...

javascripthtml

Searching for the subsequent location in a 2D array relative to the current position

Let's imagine we have a 3x4 array: const arr = [[1,2,3,4],[5,6,7,8],[9,10,11,12]]. If we provide the input as ["straight", "right", "left"], the starting position being arr[0][0] and initial direction as "east". ...

javascriptarraysmultidimensional-array

The values of React children props will always remain consistent

While attempting to incorporate an ErrorBoundary HoC component for error handling following the guidelines from React16 documentation, I designed the ErrorBoundary component as a PureComponent. It became apparent that the children props remained consistent ...

javascriptreactjsreact-router