Typescript allows you to apply a filter to an array

Question

Typescript allows you to apply a filter to an array

Query:
Is there a way to display a pre-selected item from my dropdown using its unique ID?

Issue/Explanation:
The dropdown options in my web service are dynamically fetched based on a user's ZipCode. For example, a Provider is displayed as {Phone: "5093240817", sp_id: "1", Name: "John Doe" … }. The user picks a name from the dropdown, but only the ID is stored. Now, when the user revisits to change their provider, I need to show the original Provider's Name using just the ID.

Note: Storing the value of Name isn't feasible because the web service can alter the name.

Proposed Solution:
My approach was to "filter" the array of Providers based on the original ID and retrieve the name in this manner. However, being new to Angular and TypeScript, I'm facing difficulties...

Approach Taken:
I came across an SO post where they addressed a similar issue, but I'm still struggling to comprehend it thoroughly. (How do I filter an array with TypeScript in Angular 2?)

    const showValue = this.serviceProvider.filter(sp_id => 
    this.selectedAppointment.sp_id)

**this.selectedAppointment.sp_id stores the original ID value.

Service Providers Options

{Phone: "5093240817", sp_id: "1", Longitude: -77.3841197, Provider Type: "Pediatric", Latitude: 38.9808589,Name: "John Doe" …} 1

{Phone: "097420454", sp_id: "3", Longitude: -77.3898602, Provider Type: "Pediatric", Latitude: 38.914697200000006, Name: "Kim" …} 2

javascript angular typescript

Answer 1

Answer №1

Your scenario involves passing the sp_id service provider option to each iteration within the filter callback. It seems there may be a misunderstanding on how Arrow functions operate: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Additionally, take a look at the filter method here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

To achieve your goal (comparing the sp_id of the option to the selected value), you can use this code:

this.serviceProvider.filter(sp => sp.sp_id === this.selectedAppointment.sp_id);

For better clarity, you could also write it as:

this.serviceProvider.filter((serviceProvider) => {
    return serviceProvider.sp_id === this.selectedAppointment.sp_id;
}

Answer 2

Your scenario involves passing the sp_id service provider option to each iteration within the filter callback. It seems there may be a misunderstanding on how Arrow functions operate: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Additionally, take a look at the filter method here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

To achieve your goal (comparing the sp_id of the option to the selected value), you can use this code:

this.serviceProvider.filter(sp => sp.sp_id === this.selectedAppointment.sp_id);

For better clarity, you could also write it as:

this.serviceProvider.filter((serviceProvider) => {
    return serviceProvider.sp_id === this.selectedAppointment.sp_id;
}

Answer 3

Answer №2

After some troubleshooting, I managed to resolve the issue by looping through the options and updating the form with the corresponding value!

  updateProvider(selectedId) {
    for(let provider in this.serviceProviders) {
      if (selectedId == this.serviceProviders[provider].id) {
        (<FormGroup>this.appointmentForm)
          .patchValue({provider: 
this.serviceProviders[provider].id}, {onlySelf: true});
      }
    }
  }

Answer 4

After some troubleshooting, I managed to resolve the issue by looping through the options and updating the form with the corresponding value!

  updateProvider(selectedId) {
    for(let provider in this.serviceProviders) {
      if (selectedId == this.serviceProviders[provider].id) {
        (<FormGroup>this.appointmentForm)
          .patchValue({provider: 
this.serviceProviders[provider].id}, {onlySelf: true});
      }
    }
  }

Typescript allows you to apply a filter to an array

Answer №1

Answer №2

Similar questions

Stryker score caused the Jenkins build to fail

The function of jQuery's .prop('defaultSelected') appears to be unreliable when used in Internet Explorer 9

Using localized strings in Spring and jQuery validation: Best practices

Encountering a FeathersJS Twitch OAuth 401 Unauthorized error

Troubleshooting problem with JSON decoding in PHP and json_encode

Incorporating user names into socket.io chat for disconnect functionality

How can I verify the validity of a regular expression in Typescript without encountering a syntax error?

Issue with Website Rendering: Safari 4 exhibits display glitch showing temporary content before showing a blank white screen

Ways to conceal or deactivate button controls on videojs?

Combine VS2015 preview with TypeScript 1.3 at your own risk - it may result

The changes made in Express are not reflecting in the MongoDB database as expected

I am experiencing an issue with the HTML5 video tag as it is not displaying the

TreeView Filtering

"Retrieving an element from an array may result in a value of

Manipulating the DOM within an Angular application

Make the if statement easier - Angular

NuxtJS (Vue) loop displaying inaccurate information

Executing JavaScript function from external SVG file globally

Solving issues with event handling through addEventListener within a functional component in React

fa icons moving the elements aside