Hey there! I'm currently working on a project using Angular and have a collection of elements that can be checked, which you can check out here.
In terms of my business logic:
stateChange(event: any, illRecipe: Attendance){
var state: State = {
is_checked: event.checked,
attandance: illRecipe
};
this.checkboxValues.push(state);
console.log(this.checkboxValues);
}
Whenever the checkbox is clicked, this function triggers and adds the value to the array. Now, I'm wondering: How can I update the objects in the array? Is there a more efficient way to achieve this than updating the object directly? While I know that the state updates, I seem to get a new element in the array.
Check out the current values in the array here.
UPDATE
Here's what I'm attempting now:
stateChange(event: any, illRecipe: Attendance){
var state: State = {
is_checked: event.checked,
attandance: illRecipe
};
console.log(state);
this.checkboxValues.push(state);
//push the object into array
var isSameId = this.checkboxValues.filter( value => value.attandance.id == state.attandance.id)
// filter to find checkboxes that are clicked multiple times
if(isSameId.length >= 2){
this.checkboxValues.forEach((checkBoxValue, checkboxIndex) =>{
isSameId.forEach((sameValue, sameIndex) =>{
if(sameValue.attandance.id == checkBoxValue.attandance.id && isSameId.length > 1){
this.checkboxValues.splice(checkboxIndex, 1)
}
})
})
}
//trying to sort out the older entries with the same id
console.log("checkboxValues",this.checkboxValues);
}
My aim is to eliminate duplicates in the checkboxValues array. I'm making progress, but there seems to be a small issue somewhere. For example, if I click one checkbox three times, then another one, and go back to the first checkbox, it behaves unexpectedly where the unchecked object appears and the recently pressed one disappears from the array.
Frontend Implementation:
<div *ngFor="let ill of illAttendances">
<div *ngIf="!ill.is_file_uploaded" class="box">
<div class="p-grid">
<div class="p-col-1">
<p-checkbox (onChange)="stateChange($event, ill)"></p-checkbox>
</div>
<div class="p-col">
<div *ngIf="ill.start != undefined && ill.end != undefined">
{{ ill.absence_type | titlecase }} von <b>{{ ill.start | date:'d MMMM y' }}</b> bis
<b>{{ ill.end | date:'d MMMM y' }}</b>
</div>
<div *ngIf="ill.one_day != null">
{{ ill.absence_type | titlecase }} am <b>{{ ill.one_day | date:'d MMMM y' }}</b>
</div>
</div>
</div>
</div>
<br>
</div>