Removing an object from a JSON array based on checkbox selection in Angular 4

Question

Removing an object from a JSON array based on checkbox selection in Angular 4

0:
CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4"
Code: "GMA0300"
Description: "PA-5215: Renamed"
Enabled: true
Favorite: false
Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd"
InstrumentType: null
Moniker: "1GMA0300"
Name: "Celiac Disease Panel (tTG IgG, tTG IgA, DGP IgG)"
Tests: Array(3)
  0:
   Code: "GMA0304"
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781"
   Name: "Deamidated Gliadin Peptide (DGP) IgG"
 __proto__: Object
  1: {Id: "2fcd610f-d453-4c4f-a8dc-1a5f50e88548", Code: "GMA0301", Name: 
 "Tissue Transglutaminase (tTG) IgA"}
  2: {Id: "de41b236-4866-419a-a6f4-5f7c1440d30f", Code: "GMA0302", Name: 
 "Tissue Transglutaminase (tTG) IgG"}
 length: 3
 __proto__: Array(0)
 TestsSelectable: false

Here we have an array named selectedPanels, which contains subarrays of objects. These subarrays are mapped into panels, each containing checkboxes and expandable rows for Tests, which are also arrays with checkboxes.

When the panel checkbox is selected, all child checkboxes within Tests are also selected, resulting in a total Tests length of 3. However, when each test checkbox is deselected, the Tests length should decrease. The issue arises when using splice, as it removes the entire row upon deselecting each test checkbox, including the parent panel checkbox. The desired behavior is to only reduce the array length when deselecting individual tests, without removing the entire row.

You can view an image illustrating this issue here.

HTML File:

<label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" [name]="panel.Id + '-' + panel.Moniker" [ngModel]="checkAllTestsSelected(panel)"
      (ngModelChange)="onPanelCheckboxUpdate($event, panel)" [id]="panel.Id + '-' + panel.Moniker">
    <span class="custom-control-indicator"></span>
  </label>

 </ng-template>
 <ng-template ngbPanelContent>
<div class="individual-panel" *ngFor="let test of panel.Tests">
  <span class="text-dimmed">{{test.Name}}</span>
  <span *ngIf="panel.Name.includes('ENA') || panel.Name.includes('Celiac')">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" [name]="test.Id + '-' + test.Code"
           [ngModel]="testSelectionSession.SelectedPanelIds.indexOf(panel.Id) > -1 || testSelectionSession.SelectedPanelIds.indexOf(test.AssociatedPanel?.Id) > -1"
           (ngModelChange)="onTestCheckboxUpdate($event, test, panel)" [id]="test.Id + '-' + test.Code">
    <span class="custom-control-indicator"></span>
  </label>
  </span>
</div>

TS File:

checkAllTestsSelected(panel: TestOrderPanel) {
  // Implement logic here
 }

 onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
   // Implement logic here
 }

 onTestCheckboxUpdate($event: boolean, test: TestOrderPanelTest, panel: TestOrderPanel) {
  // Implement logic here
 }

The array in question is stored in selectedPanels. Any insights on how to address this issue would be greatly appreciated. Can anyone offer assistance?

javascript arrays angular typescript

Answer 1

Answer №1

If you want to enhance your ngFor loop in the template by adding an index ('let i = index' in the code snippet below), you can utilize this index in your onTestCheckboxUpdate() function to modify your source array accordingly:

Here is an example of how you can achieve this:

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="I">
        {{item}}
        <button (click)="removeItem(i)">Remove '{{item}}' from the array</button>
    </li>
</ul>

In your TypeScript file, you can have something like this:

items = ['cat', 'dog', 'mouse', 'frog', 'horse', 'bird'];

removeItem(itemIndex: number) {
    this.items.splice(itemIndex, 1);
}

Give it a try and see if this fits your requirements. You can check out a simplified version of this concept here.

Answer 2

If you want to enhance your ngFor loop in the template by adding an index ('let i = index' in the code snippet below), you can utilize this index in your onTestCheckboxUpdate() function to modify your source array accordingly:

Here is an example of how you can achieve this:

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="I">
        {{item}}
        <button (click)="removeItem(i)">Remove '{{item}}' from the array</button>
    </li>
</ul>

In your TypeScript file, you can have something like this:

items = ['cat', 'dog', 'mouse', 'frog', 'horse', 'bird'];

removeItem(itemIndex: number) {
    this.items.splice(itemIndex, 1);
}

Give it a try and see if this fits your requirements. You can check out a simplified version of this concept here.

Answer 3

Answer №2

In order to determine the number of items that are checked or not checked, you can implement the following method. The code has been updated to include a 'checked' property for each item in the data array. You can also view the code on Stackblitz.

TS File:

items = [
    {name: 'cat'},
    {name: 'dog'},
    {name: 'horse'},
    {name: 'mouse'}
];

checkCount = this.items.length;

checkItem(itemIndex:number){
    if(this.items[itemIndex]['checked'] === undefined){
        this.items[itemIndex]['checked'] = false;
    } else {
        this.items[itemIndex]['checked'] = !this.items[itemIndex]['checked'];
    }
    this.checkCount = this.items.filter(item => item['checked'] === true || item['checked'] === undefined).length;
}

HTML File:

<ul>
    <li *ngFor="let item of items; let i = index">
        <label>{{item.name}}</label>
        <input type="checkbox" checked (click)="checkItem(i)">
    </li>
</ul>

Check count: {{checkCount}}

See an example on here.

If you require two-way binding, you can utilize a formControl to store the 'checked' variable for each checkbox, instead of a simple boolean. Take a look at an example of this here.

Answer 4

In order to determine the number of items that are checked or not checked, you can implement the following method. The code has been updated to include a 'checked' property for each item in the data array. You can also view the code on Stackblitz.

TS File:

items = [
    {name: 'cat'},
    {name: 'dog'},
    {name: 'horse'},
    {name: 'mouse'}
];

checkCount = this.items.length;

checkItem(itemIndex:number){
    if(this.items[itemIndex]['checked'] === undefined){
        this.items[itemIndex]['checked'] = false;
    } else {
        this.items[itemIndex]['checked'] = !this.items[itemIndex]['checked'];
    }
    this.checkCount = this.items.filter(item => item['checked'] === true || item['checked'] === undefined).length;
}

HTML File:

<ul>
    <li *ngFor="let item of items; let i = index">
        <label>{{item.name}}</label>
        <input type="checkbox" checked (click)="checkItem(i)">
    </li>
</ul>

Check count: {{checkCount}}

See an example on here.

If you require two-way binding, you can utilize a formControl to store the 'checked' variable for each checkbox, instead of a simple boolean. Take a look at an example of this here.

Removing an object from a JSON array based on checkbox selection in Angular 4

Answer №1

Answer №2

Similar questions

Despite correctly declaring jquery-ui.js and numeric.js, the jQuery datepicker and numeric plugins are not working as expected

Moving the Promise.all feature from AngularJs to VueJs

Establishing the Time-to-Live (TTL) with Redis-OM and Node Object Mapping

Can you explain the significance of the ColSpan property in the Material UI TablePagination?

What are the steps to create a button within an Onsen sliding menu?

Retrieve Data from Angular's ngRedux Store

After manipulating the array, Vue fails to render the input fields generated by the v-for directive

Firestore real-time document listener disrupts sorting functionality

I am facing an issue with my getServerSideProps function being undefined in my Next.js application, despite using a class component. Can anyone help me troub

Attempting to activate an ASP button that is created within a gridview after pressing the enter key within a textbox

Can someone guide me on how to extract checkbox values in a post method using Angular

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

List component in Angular not refreshing after sorting the array in the service

How to populate the space beneath the `AreaChart` curve in `recharts` when data includes positive and negative values

Build a new shop using a section of data from a JSON database

Can someone help me figure out how to trigger my function after my jQuery 'each' function has completed along with all the AJAX calls it includes?

When using form.serialize() in Django forms, an empty object is being sent

Troubleshooting Problem with Installing Angular2-Google-Maps Component in FountainJS Application

Is there a way to stop the execution of myFunc after it has been performed 5 times using clearInterval?

`` I am experiencing a problem with CSS display block in Internet Explorer