How to loop two array and compare it if same checkbox is checked Angular 2

Question

I have one array that contain all the office list. another array is user selected list. so now I want to display all officelist and if the value in selected list is the same with office list then the checkbox will be checked. This is how I did it.
Code

<div *ngFor="let item of officeLIST">
  <div *ngFor="let officeDATA of allOffice.office">
    <div *ngIf="item.office_id == officeDATA.office_id">
      <input #officeArray type="checkbox" id="officeArray" name="officeArray" class="form-control" value="{{item.officename}}"
        checked> {{(item.officename == "" ? "--No data--" : item.officename)}}
    </div>
    <div *ngIf="item.office_id != officeDATA.office_id">
      <input #officeArray type="checkbox" id="officeArray" name="officeArray" class="form-control" value="{{item.officename}}">      {{(item.officename == "" ? "--No data--" : item.officename)}}
    </div>
  </div>
</div>

and the result is

My officeLIST

this.officeLIST = [
  { "office_id": "1", "officename": "Sun Dept" },
  { "office_id": "2", "officename": "Moon" },
  { "office_id": "3", "officename": "Stars" }
]

allOffice.office array

"office": [
    {
      "office_id": "1",
      "officename": "Sun Dept"
    },
    {
      "office_id": "2",
      "officename": "Moon Dept"
    }
  ]

can you show us the data ofofficeLIST and allOffice.office , just by console.log(), if there is any error in console.post it here :) — isuruAb
– isuruAb, Commented Apr 7, 2017 at 4:53
i declare office as string in the class, should i change it to array? — user3431310
– user3431310, Commented Apr 7, 2017 at 5:26

isuruAb · Accepted Answer · 2017-04-07 08:48:15Z

use this solution.this works fine for me. I have done all the things in constructor .if you want this in a method simply use the code block inside the constructor.

this is my ts file:

  officeLIST: Array<any> = [
    { "office_id": "1", "officename": "Sun Dept" },
    { "office_id": "2", "officename": "Moon" },
    { "office_id": "3", "officename": "Stars" }
  ];


  office: Array<any> = [
    {
      "office_id": "1",
      "officename": "Sun Dept"
    },
    {
      "office_id": "2",
      "officename": "Moon Dept"
    }
  ];
  newArray: Array<any> = [];
  constructor() {
    for (var i = 0; i < this.officeLIST.length; i++) {

      var ismatch = false; // we haven't found it yet

      for (var j = 0; j < this.office.length; j++) {

        if (this.officeLIST[i].office_id == this.office[j].office_id) {
          // we have found this.officeLIST[i]] in this.office, so we can stop searching
          ismatch = true;
          this.officeLIST[i].checked = true;//  checkbox status true
          this.newArray.push(this.officeLIST[i]);
          break;
        }//End if
        // if we never find this.officeLIST[i].office_id in this.office, the for loop will simply end,
        // and ismatch will remain false
      }
      // add this.officeLIST[i] to newArray only if we didn't find a match.
      if (!ismatch) {
        this.officeLIST[i].checked = false;//  checkbox status false
        this.newArray.push(this.officeLIST[i]);
      } //End if
    }
    console.log(this.newArray);

  }

this is my html:

<div *ngFor="let item of newArray">
  <input type="checkbox" [checked]="item.checked"> {{item.officename}}
</div>

RemyaJ · Accepted Answer · 2017-04-14 04:58:29Z

1

Your user selected array will have ids of selected checkboxes. Suppose he had selected Sun Dept and Moon, then

this.userSelectedArray = ["1","2"];

<div *ngFor="let item of officeLIST">
      <input type="checkbox" [attr.checked]="userSelectedArray.indexOf(item.office_id) !== -1 ? true : false">
    </div>

edited Apr 14, 2017 at 4:58

answered Apr 7, 2017 at 6:14

RemyaJ

5,5264 gold badges25 silver badges42 bronze badges

6 Comments

user3431310 Over a year ago

hi all my checkboxed is checked.. forget to mention. selected array is actually default value selected by user. and officeArray is the main array that shows everything. so if the user selected sam with officeArray, the checkbox will be checked. or else it wont

user3431310 Over a year ago

means it will iterate officeArray(total 3 data). the view will show all this. let say user only select 2 data so the checkbox willl only be checked 2 and remaining one is unselected

RemyaJ Over a year ago

so when user changes the state of checkbox,its id will be pushed to selectedArray then you can use the code in my ans.

RemyaJ Over a year ago

Why is it not working for you. It is working for me.

RemyaJ Over a year ago

So is the accepted code working. The fiddle showing only loading is not because of my code its because of some ngfor issue. Open console and see.

|

Collectives™ on Stack Overflow

How to loop two array and compare it if same checkbox is checked Angular 2

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related