how to remove an object within an array angular 4

Question

Hey I have an array coming from my backend which I mapped and added checkbox in it like the image below -

is have json object which has an array selected tests object is which is selectedPanels

(2) [{…}, {…}]
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(4)
 0: {Id: "daa9a494-f932-40cd-8c40-192716c8234c", Code: "GMA0303", Name: 
 "Deamidated Gliadin Peptide (DGP) IgA"}
 1: {Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781", Code: "GMA0304", Name: 
 "Deamidated Gliadin Peptide (DGP) IgG"}
 2: {Id: "2fcd610f-d453-4c4f-a8dc-1a5f50e88548", Code: "GMA0301", Name: 
 "Tissue Transglutaminase (tTG) IgA"}
 3: {Id: "de41b236-4866-419a-a6f4-5f7c1440d30f", Code: "GMA0302", Name: 
 "Tissue Transglutaminase (tTG) IgG"}
 length: 4
 TestsSelectable: false
 __proto__: Object
1:
CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4"
Code: "GGA1000"
Description: "PA-5459: Added"
Enabled: true
Favorite: true
Id: "05932085-a65d-44cc-894e-d8925cec4ea9"
InstrumentType: null
Moniker: "1GGA1000"
Name: "Celiac Disease Panel (tTG IgG, tTG IgA, DGP IgG) - Confirmatory"
Tests: (3) [{…}, {…}, {…}]
TestsSelectable: false

and there is number of tests showing in the left panel i.e 7 what i want is when i deselect number of tests it should remove from array and count should decrease like if is deselect 2 tests length should in left panel is 5 i tried lodash remove function but it removes the whole row

my 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>
    </div>
  </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>
  </ng-template>

ts file

    checkAllTestsSelected(panel: TestOrderPanel) {
    // get all individual test panels
    let individualTestPanelIds = panel.Tests.reduce((acc, test) => {
      if (test.AssociatedPanel) {
        acc.push(test.AssociatedPanel.Id);
      }
      return acc;
    }, []);

    // check if all individual test panels are selected
    let allIndividualTestsSelected = individualTestPanelIds.reduce(
      (acc: boolean, panelId: number) =>
        acc && this.panelIds.indexOf(panelId) > -1,
      individualTestPanelIds.length > 0 &&
      panel.Tests.length === individualTestPanelIds.length
    );

    // if selected, remove all individual test panels and add the panel group
    if (panel.Tests.length > 0 && allIndividualTestsSelected) {
      this.panelIds = this.panelIds.filter(
        panelId => individualTestPanelIds.indexOf(panelId) === -1
      );
      this.selectedPanels = this.selectedPanels.filter(
        selectedPanel => individualTestPanelIds.indexOf(selectedPanel.Id) === -1
      );
      this.panelIds.push(panel.Id);
      this.selectedPanels.push(panel);
      this.updateSession();
     }
      return this.panelIds.indexOf(panel.Id) > -1;
     }


     onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
       let testPanelIds = panel.Tests.reduce((acc, test) => {
        if (test.AssociatedPanel) {
        acc.push(test.AssociatedPanel.Id);
      }

      return acc;
    }, []);
    // Wipe any duplicates
    this.panelIds = this.panelIds.filter(
      panelId => panel.Id !== panelId && testPanelIds.indexOf(panelId) === -1
    );
    this.selectedPanels = this.selectedPanels.filter(
      selectedPanel =>
        panel.Id !== selectedPanel.Id &&
        testPanelIds.indexOf(selectedPanel.Id) === -1
    );

    if ($event) {
      this.panelIds.push(panel.Id);
      this.selectedPanels.push(panel);
    }
    this.updateSession();
  }

  onTestCheckboxUpdate($event: boolean,
                       test: TestOrderPanelTest,
                       panel: TestOrderPanel) {


    let testPanelIds = panel.Tests.reduce((acc, test) => {
      if (test.AssociatedPanel) {
        acc.push(test.AssociatedPanel.Id);
      }

      return acc;
    }, []);
    let associatedTestPanels = this.testSelectionSession.IndividualTestPanelsForAll.filter(
      testPanel => testPanelIds.indexOf(testPanel.Id) > -1
    );

    let clickedTestPanel = associatedTestPanels.find(
      testPanel => (test.AssociatedPanel ? test.AssociatedPanel.Id : -1) === testPanel.Id
    );


    if (clickedTestPanel) {
      // Wipe any duplicates
      this.panelIds = this.panelIds.filter(
        panelId => clickedTestPanel.Id !== panelId
      );
      this.selectedPanels = this.selectedPanels.filter(
        panel => clickedTestPanel.Id !== panel.Id
      );

      // Add individual panel if checkbox selected
      if ($event) {
        this.panelIds = this.panelIds.concat(clickedTestPanel.Id);
        console.log(this.panelIds)
        this.selectedPanels = this.selectedPanels.concat(clickedTestPanel);
        console.log(this.selectedPanels)
      }
    }
    this.updateSession();
  }

if someone know how to just remove length of tests when deselect it i would be greatful thanks

Take a look at _array.splice()_. – Rob Apr 23 '19 at 08:30 — Rob, Apr 23 '19 at 08:30

score 0 · Answer 1 · answered Apr 23 '19 at 08:40

0

Check out this topic.

My answer from there:

let updatedArray = [];
for (let el of this.oldArray) {
    if (el !== elementToRemove) {
        updated.push(el);
    }
}
this.oldArray = updated;

answered Apr 23 '19 at 08:40

Sh. Pavel

1,584
15
28

what it is doing is it is removing the whole row when i deselect checkbox. basically when i select main panel it auto select all its children tests and add length or tests in left panel if you saw picture. what i want is when i deselect one of the tests it should decrease the length of test array like at start it was 6 but i deselect 1 it should be now 5 – usman saleem Apr 23 '19 at 10:04

score 0 · Answer 2 · answered Apr 23 '19 at 08:43

0

Not understand what you need. But in general.

If you want to remove a field in Object. You can use

var a = {
   field1: 'abc'
}

delete a['field1'];

With array

Array.splice
// or
Array.filter // Get only what you need depends on your condition

answered Apr 23 '19 at 08:43

Phat Tran

3,404
1
19
22

score 0 · Answer 3 · answered Apr 23 '19 at 08:47

0

you have to extract the index you may want to remove after that

var array = [2, 5, 9];
console.log(array);
var index = array.indexOf(5);
if (index > -1) {
 array.splice(index, 1);
}

answered Apr 23 '19 at 08:47

Arush Singh

129
1
10

how to remove an object within an array angular 4

3 Answers3