What is the best way to choose checkboxes from data that is passed dynamically?

https://i.stack.imgur.com/L3k59.png

I am looking to add an edit feature to my application. When the user clicks on the edit option, they should be taken to a different page with the previously entered value displayed.

While I have successfully retrieved values for all fields, I am struggling to bind the radio buttons. Any assistance would be greatly appreciated.

Answer №1

block1

        this.country.forEach(data1 =>{
                    if(this.country){
                        this.countryList.forEach(data => {
                            if (data.country_id == data1) {
                                data.checked = (!data.checked) ? true: false;
                            }
                        });
                    }
                })

block2

                this.mailTo.forEach(data1 =>{
                    this.userTypeList.forEach(data => {
                        if (data.cat_id == data1) {
                            data.checked = (!data.checked) ? true: false;
                        }
                    });
                })

Performing two foreach loops - one to extract dynamic data and the other to select checkboxes. Block1 pertains to selecting countries while block2 focuses on selecting user types.

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

Mastering Ember with Typescript - crafting action definitions

Trying to set up my first Ember app using TypeScript, I'm facing issues with defining actions. Most tutorials suggest using the @action decorator like this: import { action } from '@ember-decorators/object'; @action sayHello(){ } However, ...

Tips for using jest.mock with simple-git/promise

I have been attempting to simulate the checkout function of simple-git/promise in my testing but without success. Here is my current approach: jest.mock('simple-git/promise', () => { return { checkout: async () => { ...

The negation operator in Typescript is failing to negate as expected

When a user changes a multiselect element, there is a function that runs to control the visibility of an error message: getVisibility(multiselect) { if ((multiselect.selectedCategories.length < 1 && !multiselect.allSelected) && th ...

onmouseleave event stops triggering after blur event

I am facing an issue with a mouseleave event. Initially, when the page loads, the mouseleave event functions correctly. However, after clicking on the searchBar (click event), and then clicking outside of it (blur event), the mouseleave functionality stops ...

How can I use Angular2 to ensure that a child component automatically updates when there is a change in the parent's property?

After reviewing the components provided below, it appears that the parent's property updates correctly, but unfortunately, the changes are not reflected in the child component. What steps should I take to ensure that the child component accurately ref ...

Service in Angular 2 failing to push updates to component

I am currently working on a project where I need to retrieve data from MongoDB using a Service call. So far, the Service call is functioning correctly and logging the data in the console as expected. The challenge arises when dealing with a large response ...

Retrieving Names Using Angular2 Dynamic Component Loader to Render a Component List

I am currently utilizing a Dynamic Component Loader to present a series of components using *ngFor: <div [dragula]='"bag-one"' [dragulaModel]='types'> <div *ngFor="let component of types; let i = index"> <dcl-wrapp ...

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

I have an input box where a user can enter a number. When they click a button, I want that number to be displayed on the page. However, instead of seeing the number, I am getting the output as [object HTMLInputElement]. Below is my TypeScript code: let qu ...

Impact of using ngIf in ngAfterViewInit

During the ngAfterViewInit lifecycle hook, I am triggering an event and capturing it in another component using ComponentRef. Everything functions smoothly until I incorporate ngIf in the parent component. What impact does ngIf have on Angular's life ...

Angular and KeyCloack - Automatically redirect to specific route if user's role does not have access permissions

I am currently working on implementing a mechanism to redirect unauthorized roles when attempting to access restricted routes using the keycloack-angular library: npm install keycloak-angular keycloak-js Custom Guard Implementation export class AuthGuar ...

When passing an invalid value to the Props in TypeScript, no errors are being thrown

const enum ColumnValues { one = 1, two = 2, three = 3, } interface Props { style?: StyleProp<ViewStyle>; title?: string; titleContainerStyle?: StyleProp<ViewStyle>; titleStyle?: StyleProp<TextStyle>; textInputStyle?: Styl ...

Deliver output data from Spring to Angular

I am working on a microservice in Spring that needs to return a value distinguishing between users and admins to Angular. So far, I have managed to return a boolean value, but I am struggling to change it to work with strings or any other data type. I trie ...

Solving Checkbox Change Event Issue in Angular

I'm having difficulty testing the checkbox-change event for a particular component. Here is the code for the component that needs to be tested: import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: &a ...

React error: The DatePickerProps generic type must have one type argument specified

Date Selection Component: import React from "react" import AdapterDateFns from '@mui/lab/AdapterDateFns'; import { LocalizationProvider } from '@mui/lab'; import { DatePicker, DatePickerProps } from '@mui/lab'; cons ...

Invoking a function from a collection of mixed data types

I have established a mapping for a discriminated union consisting of different types, each linked to a corresponding function that uses a member of the union as a parameter: export interface Truncate { type: 'truncate' maxLength: number } ex ...

Incorporating Kekule.js into a TypeScript-based React application

Greetings, community! I've created a React app designed to help individuals in the field of chemistry share their work. To facilitate this, I came across a library called Kekule.js Here is the link Utilizing TypeScript poses a challenge as it requir ...

Tips for validating nominal-typed identifiers

I recently started experimenting with the enum-based nominal typing technique explained in more detail at this link. enum PersonIdBrand {} export type PersonId = PersonIdBrand & string interface Person { id: PersonId firstName: string lastName: ...

Issue: The system needs the 'image' property to proceed (Dall E's image variation API by OpenAI)

Utilizing the Dall E Create image variation API has been a bit challenging for me. Every time I send a post request, I encounter this particular error: error: { "code": null, "message": "'image' is a required property&q ...

Can Angular 4 experience race conditions?

Here is a snippet of my Angular 4 Service code: @Injectable() export class MyService { private myArray: string[] = []; constructor() { } private calculate(result): void { myArray.length = 0; // Perform calculations and add results to myAr ...

NG8003 error: ExportAs 'ngForm' directive not found in the system

I encountered an issue with my first Angular 11 project: No directive found with exportAs 'ngForm'. Despite importing FormsModule and ReactiveFormsModule in app.module.ts, the error persists. Here is the code snippet: This is from product.compon ...