Here are the steps to iterate through two arrays and compare them in Angular 2 when the same checkbox is checked

Question

Here are the steps to iterate through two arrays and compare them in Angular 2 when the same checkbox is checked

I have two arrays: one containing a list of all office locations, and another with user-selected offices. My goal is to display all the office locations and have the checkboxes checked if they match those in the selected list. Here is how I accomplished this:
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>

Result:https://i.sstatic.net/v3cjr.png

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"
    }
  ]

arrays angular typescript checkbox ngfor

Answer 1

Answer №1

Try implementing this solution, it has worked perfectly for me. I have included all the necessary steps in the constructor. If you prefer to have it in a method, just place the code block inside the constructor.

This is my TypeScript 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>

Answer 2

Try implementing this solution, it has worked perfectly for me. I have included all the necessary steps in the constructor. If you prefer to have it in a method, just place the code block inside the constructor.

This is my TypeScript 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>

Answer 3

Answer №2

The user-selected array will contain the IDs of the checkboxes that have been selected by the user. For example, if the user selected Sun Dept and Moon, the userSelectedArray would be ["1", "2"].

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

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

Answer 4

The user-selected array will contain the IDs of the checkboxes that have been selected by the user. For example, if the user selected Sun Dept and Moon, the userSelectedArray would be ["1", "2"].

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

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

Here are the steps to iterate through two arrays and compare them in Angular 2 when the same checkbox is checked

Answer №1

Answer №2

Similar questions

Using typescript, we can pass a generic class as a parameter to a function

Having trouble triggering an alert() after a successful post to the database

Error in Angular 16.2.0: Signal TypeError <mySignal> cannot be executed as a function

There was an error when trying to read the file '.angular-cli.json'. Please double-check to ensure that the file contains valid JSON format. The error message indicates an unexpected

Is it possible to transfer parameters from one page to another page using the pop method in Ionic 2?

Unexpected results observed in enumerators within typescript

How to implement an instance method within a Typescript class for a Node.js application

Angular micro front-end powered by module federation

Encountering an Issue in Angular 4 When Trying to Present JSON Data in a Table

Compiling the project using ng build without requiring the download of node

Typescript: Defining the correct return type for resolved parameters in promises

JavaScript Arrays and Their Mysterious Undefined Elements

What steps should I take to create a React component in Typescript that mimics the functionality of a traditional "if" statement?

Secure your React TypeScript applications with GraphQL authentication

What is causing styled-components to include my attributes in the DOM?

What is the process for transforming an exported function into a function type?

The testString's dependencies are unresolved by Nest

Explore how Angular can display the highlights of deepDiff results in JSON format!

Nested mapping of objects in a mapped object

The input of type 'Observable<true | Promise<boolean>>' cannot be assigned to the output of type 'boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>'