Send checkbox selection to array inside object as string

Question

I have a complex object of structure

JSON{
     alpha{
           array1[
                  obj1{},
                   obj2{}
                 ]
          }
   }

Along with array1 I want send another array: array2 which will only contain strings. So the structure would be like:

JSON{
     alpha{
           array1[
                  obj1{},
                   obj2{}
                 ],
           array2[
                  "string1",
                  "string2"
                 ]
          }
   }

In HTML I have 2 checkboxes. If user selects a checkbox the flag is set to true. Now for the checkbox whose flag is true, I want to send a string into array2 which I want to push into this complex json structure.

<input type="checkbox" value="ABC" name="ABC" [(ngModel)]="firstThreeAlphabets" (change)=isSelected1($event)>
<input type="checkbox" value="XYZ" name="XYZ" [(ngModel)]="lastThreeAlphabets" (change)="isSelected2($event)>

In TS File I have implemented

abc: boolean;
xyz: boolean;
ngOnInit(){
this.abc = false;
this.xyz = false;
}
isSelected1(event){
if (abc = true) {
   this.array2.abc = 'First three alphabets are ABC';
}else {
   this.array2.abc = '';
}
}
isSelected2(event){
if (xyz = true) {
   this.array2.xyz = 'Last three alphabets are XYZ';
}else {
   this.array2.xyz = '';
}
}

I am successfully able to push array2 into the complex object. Now the issue is, abc and xyz are always set to true even when I uncheck it. Thus the if condition is always true. Thus my functionality is breaking In TS file, I want to set something like: if firstThreeAlphabets is selected I want to set a variable and assign the following string: First three alphabets are A,B,C and if second checkbox is selected the following string will be stored in array2: Last three alphabets are X,Y,Z If both are selected I have to send two strings to array2. Once stored in Array, I have to push the array into the complex object as shown and pass that final object into the post request.

Chandradeepta Laha · Accepted Answer · 2020-08-05 13:45:35Z

1

I have changed your code a little, please have a look https://stackblitz.com/edit/angular-ce3wy8

answered Aug 5, 2020 at 13:45

Chandradeepta Laha

3842 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Bitly Over a year ago

Hi Chandradeepta, this is actually very close to what I am trying to implement. The only thing is, the array2 now has two objects inside it ``` array2[{"abc":"First three letters are ABC"}, {"xyz":"Last three letters are XYZ"}]; ``` is there a way I can directly store it as a string? As in ``` array2["First three letters are ABC", "Last three letters are XYZ"] ``` and also if I have multiple checkboxes for example 3 checkboxes in UI. How would the handleChange event should be modified?

Bitly Over a year ago

the handle event condition fails for 3 checkboxes right? So any suggestions on how to handle that?

Chandradeepta Laha Over a year ago

Take a look at this stackblitz.com/edit/angular-ce3wy8

Bitly Over a year ago

This is perfection. Thank you. If not much trouble can you provide a small description on how you did it? Thank you in advance. Have a great day

Chandradeepta Laha Over a year ago

Provide the value that you want to set in your array as an input value. Whenever a change event is triggered, you are passing the event as a parameter to the handleChange() and from that event, you can access the value and the name of the element so that you can distinguish which one is checked. Then according to this, if the state is checked then add the required value into the array else remove value from the array

|

Chandradeepta Laha · Accepted Answer · 2020-08-04 10:45:36Z

0

From what I understood, create an empty array and push the selected values into that array. Then replace that array with array2 in your object.

answered Aug 4, 2020 at 10:45

Chandradeepta Laha

3842 silver badges7 bronze badges

9 Comments

Bitly Over a year ago

The thing is, I do not have any array2 in the object right now. So two things are: 1. How to push selected value strings into array2 and then how to push array2 into the actual object.

Chandradeepta Laha Over a year ago

var tempArray = []; tempArray.push(value1); tempArray.push(value2); then add this tempArray into your object like JSON.alpha['array2'] = tempArray; this should solve your problem If not, please let me know.

Bitly Over a year ago

can you tell me how do you push value1 inside tempArray. Because, these only have to be sent if the checkbox was checked for the specific value. Can you tell what will be logic to check which checkbox was checked and then what will be the logic to equate value1 or value2 or both to the string? and finally how can I send it to object and later into complex object?

Chandradeepta Laha Over a year ago

Take a look at this. It's a very simple implementation. If I missed something, let me know. codesandbox.io/s/xenodochial-wozniak-0nom4?file=/src/App.js

Bitly Over a year ago

it didn't serve my purpose. Perhaps I have edited the code a bit more to show what I have implemented and what is the issue now.

|

Collectives™ on Stack Overflow

Send checkbox selection to array inside object as string

2 Answers 2

10 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related