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:

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:

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:

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

Next.js (TypeScript) - Error: Property 'req' is not recognized on the type 'GetServerSideProps'

Currently, I am tackling a challenge involving the utilization of next-auth and attempting to access the session from within getServerSideProps. However, in order to achieve this, it is essential for me to provide the context request and context response ...

javascriptreactjstypescriptnext.jsnext-auth

Having trouble with an unusual Protractor issue: Jasmine test cases not working properly?

UPDATE: The question was modified on September 17, 2018 Whenever my test case passes, everything looks good on the output screen as it displays 'passed'. However, when it fails, I encounter a lengthy red error message that seems to indicate an i ...

angularseleniumjasmineprotractorautomated-tests

Changing the generic type's constraint type in TypeScript to have more flexibility

I have developed a utility type named DataType that takes in a parameter T restricted to the type keyof MyObject. When the key exists in MyObject, DataType will return the property type from MyObject; otherwise, it will simply return T. interface MyObject ...

typescriptgenericsconstraintsoverriding

What sets apart calling an async function from within another async function? Are there any distinctions between the two methods?

Consider a scenario where I have a generic function designed to perform an upsert operation in a realmjs database: export const doAddLocalObject = async <T>( name: string, data: T ) => { // The client must provide the id if (!data._id) thr ...

javascriptreactjstypescript

The assignment to 'total' is prohibited as it is either a constant or a property that is read-only within the get total() function

After running the command ng build --prod in my project, I encountered the following error message: "Cannot assign to 'total' because it is a constant or read-only property for function get total(){}" The function causing the issue is: get to ...

angulartypescript

Having trouble with JavaScript's Date.getUTCMilliSeconds() function?

I have a straightforward question for you. Take a look at this Angular App and try to create a new date, then print the number of UTC milliseconds of that date in the console. Can you figure out why it is returning zero? ...

javascriptangulartypescript

Utilizing TypeScript's Type Inference to Simplify Function Combinations

I'm facing a challenge with what should be simple. The types aren't coming through as expected when trying to combine a couple of functions. Is there a way to have TypeScript infer the types without explicitly specifying them? import { pipe, map ...

typescriptfunctional-programmingtypescript-typingsramda.js

Visual Studio Code's Intellisense is capable of detecting overloaded functions in JavaScript

What is the best way to create a JavaScript overload function that can be recognized by Visual Studio Code IntelliSense, and how can this be properly documented? A good example to reference is Jasmine's it() function shown below: function it(expecta ...

javascripttypescriptvisual-studio-code

How can I display an array in reverse order using *ngFor in a template?

Just starting out with Angular and I'm looking to display an array in reverse order. Here's what I have: <ng-container *ngFor="let user of _users.reverse(); let i = index"> <tr> <td>{{ _users[i].firstN ...

angular

Integrating modules in Angular 2

Exploring the functionalities of Angularjs 2.0, I encountered an issue when attempting to inject a service into a class. Below is the code snippet that's causing trouble: import {Component, View, bootstrap, NgFor, HttpService, Promise} from 'ang ...

typescriptangular

Error Encountered: Unable to resolve parameters for the AppErrorHandler class in Angular 8

My Angular 8 app is encountering an error during runtime, leading to a failure in rendering the page. localhost/:12 GET http://localhost:4200/lib/images/logo.png 404 (Not Found) compiler.js:2175 Uncaught Error: Can't resolve all parameters for AppErr ...

angular

Setting the height of CKEditor 5: A comprehensive guide

How can I adjust the height of the CKeditor angular component? The documentation suggests we can set the editor style to: min-height: 500px !important; However, this solution does not seem to be effective for me. Any other suggestions? ...

angularckeditorshadow-domckeditor5

Angular2: Issue encountered while processing click event

When I click a button on my client application, it sends a request to the server I created using Express. The request handler in the server simply logs 'Delete from server' every time the button is clicked. I am encountering these errors when cl ...

javascriptangularjsangularangular2-routingangular2-directives

Parent component interacting with child component

In my application, I have a header component along with registration and login components. The selector of the header component is used in both the login and registration components. There is also a button in the header that displays as a login button if t ...

typescriptangular

The Next.js 13 function getQueriesData does not have any matching overloads for TypeError

Having a TypeScript error issue while using the getQueriesData function in Next.js 13 with React Query. Below is my code snippet: // app/products.tsx import { getQueryClient } from "@/app/providers/getQueryClient"; import { useQuery, useQueryCli ...

typescriptnext.jsreact-query

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

Issue locating name (generics) in Angular 4

I'm encountering issues with Angular 4. The TypeScript code is not compiling and generating errors when I try to run ng serve. I'm getting two errors in my-data.service.ts file - "Cannot find name 'Category' at line 9, column 30" and ...

angulartypescriptgenerics

Ensuring precise type inference in generic functions using the keyof keyword

I am facing a challenge in creating a versatile function that accepts an object and a key from a specific subset of keys belonging to the type of the object. These keys should correspond to values of a specified type. This is how I attempted to implement ...

typescriptgenericstypestype-inference

Failure in validating a form in Angular 2

This is a form I have created: import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ template: ` <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" novalidate> <textarea (keyup)="va ...

angular

How do I fix the build error that says "Operator '+' cannot be used with types 'number[]'?

The function below is designed to generate unique uuidv4 strings. function uuidv4() { return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => ( c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)) ...

javascripttypescript