Check checkbox when idItem is the same in both arrays

Question

Categories: javascript, angular, typescript

Check checkbox when idItem is the same in both arrays

S3ck Stros. The question was asked: Mar 25, 2020. 06:53

1 answer

I have a two arrays. An array that is a set of images and an array that is a set of data.

Is there a way to check the checkbox when the IDItem in the two arrays are the same?

DEMO

.html

<ul class="mdc-image-list my-image-list" style="margin-top:120px;padding-left: 10px;padding-right: 10px;">     <ng-container *ngFor="let product of items; let  j = index;">         <li class="mdc-image-list__item">             <div class="mdc-image-list__image-aspect-container">                         <img [src]="product.image" class="mdc-image-list__image">             </div>             <div class="mdc-image-list--with-text-protection">                 <div class="mdc-image-list__supporting mdc-image-list__supporting">                     <span class="mdc-image-list__label">{{product.name}}</span>                 </div>                 <div class="Info">                     <dx-check-box (onValueChanged)="change($event);" [value]="false"></dx-check-box>                 </div>             </div>         </li>     </ng-container> </ul>

.TS

items=[   {     ID:1,     IDItem:1,    image:"https://material-components-web.appspot.com/images/photos/2x3/3.jpg",    name:"name1" },   {     ID:2,     IDItem:2,    image:"https://material-components-web.appspot.com/images/photos/3x2/10.jpg",    name:"name2" },   {     ID:3,     IDItem:3,    image:"https://material-components-web.appspot.com/images/photos/2x3/6.jpg",    name:"name3" }, ]  data=[  {     ID:1,     IDItem:1, },   {     ID:2,     IDItem:2, },]  change(e){   console.log(e) }

In this case, IDItem 1 and 2 are present in the items and data arrays. Is there a way for these items to mark the checkbox as checked?

All answers to this question, which has the identifier 60855511

nate-kumar The answer was posted: Mar 25, 2020. 07:25 · Accepted Answer

You could achieve this by making a function to check if the current product.IDItem is present in any of the objects in the data array, and if it is, set the value property of your checkbox to true.

TS (ES2016+)

isProductInData( productId ) {    const dataIds = this.data.map( i => i.IDItem );    return dataIds.includes( productId ); }

TS (Pre-ES2016)

isProductInData( productId ) {    const dataIds = this.data.map( i => i.IDItem );    return dataIds.indexOf( productId ) !== -1; }

This will return true if the productId you pass in exists as a IDItem in any object in the this.data array

HTML

<ul class="mdc-image-list my-image-list" style="margin-top:120px;padding-left: 10px;padding-right: 10px;">     <ng-container *ngFor="let product of items; let  j = index;">         <li class="mdc-image-list__item">             <div class="mdc-image-list__image-aspect-container">                         <img [src]="product.image" class="mdc-image-list__image">             </div>             <div class="mdc-image-list--with-text-protection">                 <div class="mdc-image-list__supporting mdc-image-list__supporting">                     <span class="mdc-image-list__label">{{product.name}}</span>                 </div>                 <div class="Info">                     <dx-check-box (onValueChanged)="change($event);"                                    [value]="isProductInData( product.IDItem )">                     </dx-check-box>                 </div>             </div>         </li>     </ng-container> </ul>

Check checkbox when idItem is the same in both arrays

All answers to this question, which has the identifier 60855511

How do I check if an element is hidden in jQuery?

How do I check if an array includes a value in JavaScript?

Setting “checked” for a checkbox with jQuery

Last questions