Sending selected IDs from the JSON data

In my project, there is a JSON file named "workers" which contains information about all the workers. I have created a select component to display the names of the workers like this:

https://i.sstatic.net/0Glyf.png

Currently, I am selecting some workers from the list and sending their names along with the work name to an API using a POST request as shown below:

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

Instead of sending just the workers' names, I want to send their IDs as stored in the JSON file. The structure of the JSON looks like this:

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

For a working example, you can check out the Stackblitz demo here.

angulartypescriptangular6

Answer №1

To assign the id property instead of the name property, modify the code as shown below:

<mat-option *ngFor="let worker of workers" [value]="worker.id">{{worker.name}}</mat-option>

If you want your form control name to match the JSON structure, change it from staff to workers

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

What is the process for updating the internal TypeScript version in VS Code?

When using VS Code, I noticed it comes with its own TypeScript version: Is there a way to update this? The current version is 4.9.3. ...

javascripttypescriptvisual-studio-code

Next.js API routes encountering 404 error

I am encountering an issue with calling my route API (404) in my new nextjs project. The route API can be found at src/app/api/speed.js Within my page src/app/page.tsx, I have the following code snippet: fetch("api/speed").then(res=>res.json ...

typescriptnext.jshttp-status-code-404

Reorganize mat-table rows using Angular Material's drag-and-drop feature

One of the new features that came with Angular 7 is the powerful DragDropModule: https://material.angular.io/cdk/drag-drop/examples The documentation covers rearranging items in lists and transferring them between different lists, but it doesn't ment ...

angulardrag-and-dropangular-materialmat-table

What are some ways to make autorun compatible with runInAction in mobx?

Currently delving into the world of mobx and runInAction, facing a challenge in comprehending why autorun fails to trigger my callback in this particular scenario: class ExampleClass { // constructor() { // this.exampleMethod(); // } ...

javascripttypescriptobservablemobx

Steps for incorporating a type declaration for an array of objects in a React application with TypeScript

How can I specify the type for an array of objects in React using TypeScript? Here is the code snippet: const SomeComponent = (item: string, children: any) => { //some logic } In this code, you can see that I am currently using 'any' as ...

reactjstypescript

Incorporating jQuery plugins into Angular2 applications

I'm currently utilizing an admin template theme that comes with notifications functionality. You can display the notifications like this: $.Notification.notify('success','top left','XXX', 'YYYY'); Now, I am lo ...

angular

Angular 12 app does not have Express server searching for static files

Context I am in the process of transferring an Angular application to a GKE cluster. Unfortunately, due to company policy, the base docker image I am required to use does not support the installation of new software such as shell or Angular CLI commands l ...

javascriptangularexpress

What causes a standard React component with a default render prop to not pass PropTypes validation successfully?

I'm currently working on a React component with a render-prop that has a generic type. To improve usability, I want to set a default value for the render-prop. The code is functioning correctly, but during type-checking, I encountered a warning regard ...

javascriptreactjstypescriptjsxreact-proptypes

What are the best methods for repairing a malfunctioning Drawer?

My template can be found here: SANDBOX When transitioning to a nested route, I am experiencing a double rendering issue which causes the DRAWER to reopen. How can this be fixed? You can observe this effect in the "NESTED" tab. It is important that the fi ...

reactjstypescriptreact-routermaterial-ui

Change the name of the interface from the imported type

When working with Google Apps Script, I have implemented the Advanced Calendar Service, originally labeled as "Calendar". However, I have renamed it to "CalendarService". How can I incorporate this name change when utilizing the type definitions for Apps S ...

typescriptgoogle-apps-script

Utilize decorators for enhancing interface properties with metadata information

Can decorators be utilized to add custom information to specific properties within an interface? An example can help clarify this: Interface for App state: export interface AppState { @persist userData: UserData, @persist selectedCompany: UserCo ...

typescriptinterfacedecorator

What's the Advantage of Using a Getter for a Public Field in Angular?

Having come from a background in Java where the practice is to make variables as private as possible, I've noticed in Angular that private fields are not used frequently. What is the reasoning behind not making fields private if it's possible? ...

angular

The 'import.meta' meta-property can only be used with the '--module' set to 'es2020', 'esnext', or 'system'.ts(1343)

Whenever I attempt to utilize import.meta.url (as demonstrated in the Parcel docs), I am consistently met with the error message "The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es ...

reactjstypescriptimagedynamicparceljs

Utilizing .js file alongside declaration files .d.ts in Angular: A guide

I am facing an issue with my Angular 7 app where I need to include some typed JS constants from outside of the project. These constants are essential for the AngularJS app and need to be kept in a separate js file. I have defined a new path in the tsconfig ...

angulartypescripttypescript-typings

Create a prop type that can be either a single number or an array of numbers, depending on the value of another

Seeking a solution, I am exploring an example using arrays with the 'multi' property. When 'multi' is true, the items should be of type number[]. Otherwise, they should be of type number. interface EnhancedSelectProps { items: multi ? ...

reactjstypescriptreact-propsconditional-types

Is it feasible to utilize math.max with an array of objects?

When it comes to finding the largest number in an array, solutions like this are commonly used: var arr = [1, 2, 3]; var max = Math.max(...arr); But how can we achieve a similar result for an array of objects, each containing a 'number' field? ...

javascriptnode.jstypescript

Using Observable<any> as an input argument in a child component

When a button is clicked, a different Observable is loaded. In the main component, I have this : <button (click)="onClickMe1()">Click me 1!</button> <button (click)="onClickMe2()">Click me 2!</button> However, nothing appears in ...

angulardatatablesobservable

What could be causing the error in Angular 2 when using multiple conditions with ng-if?

My aim is to validate if the length of events is 0 and the length of the term is greater than 2 using the code below: <li class="more-result" *ngIf="events?.length == 0 && term.value.length > 2"> <span class="tab-content- ...

angulartypescript

What is the cause of the error message "property 'map' is undefined"?

I am currently working on a service that looks like this: public getUsers() { return this.httpClient.get(environment.BASE_URL + `api/all`); } In my component, I have implemented the ngx-bootstrap table to display the user data. import { Component, OnI ...

angulartypescript

Encountering error TS2307 while using gulp-typescript with requirejs and configuring multiple path aliases and packages

Currently, I am working on a substantial project that heavily relies on JavaScript. To enhance its functionality, I am considering incorporating TypeScript into the codebase. While things are running smoothly for the most part, I have encountered an issue ...

javascriptrequirejstypescriptgulp