Loop through with an element through different arrays

Question

I have 2 arrays (diagnoses and labValues). I would like to loop through both arrays with only one element (swiping cards). Every array has a complete different structure, therefore I try to use ngIf.

With my current approach I do not get any labValues and ngIf also do not work. This approach feels ugly. Are there any easier approaches to do this.

  <div class="card-container">
    <sc-card padding *ngFor="let diagnose of diagnoses; let labValue of labValues"
    [orientation]="cardDirection"
    [tinder-card]="cardOverlay"
    [callDestroy]="diagnose.destroyEvent"
    [callLike]="diagnose.likeEvent"
    (onLike)="onCardInteract($event)">
    <div class="card-header">
      <ion-icon *ngIf="diagnose" class="clusterIcon" name="medkit"></ion-icon>
      <ion-icon *ngIf="labValue" class="clusterIcon" name="ios-flask"></ion-icon>
      <ion-badge *ngIf="diagnose" class="icdBadge">ICD: {{diagnose.additionalParameters.uniqueId}}</ion-badge>
      <ion-badge *ngIf="labValue" class="icdBadge" color="{{labValue.additionalParameters.interpretation}}">{{labValue.additionalParameters.interpretation | translate }}</ion-badge>
      <span *ngIf="diagnose" class="coveredText">'{{diagnose.coveredText}}'</span>
      <span *ngIf="labValue" class="coveredText">'{{labValue.coveredText}}'</span>
    </div>
    <div class="card-content">
      <span *ngIf="diagnose.additionalParameters.dictCanon" class="sectionHeader">{{"GeneralDiagnosis" | translate }}</span>
      <span *ngIf="diagnose.additionalParameters.dictCanon">{{diagnose.additionalParameters.dictCanon}}</span>

      <span *ngIf="labValue" class="sectionHeader">{{"GeneralLabValue" | translate }}</span>
      <span *ngIf="labValue">{{labValue.additionalParameters.parameter.additionalParameters.dictCanon}}</span>

      <span class="sectionHeader">{{"Explanation" | translate }}</span>
    </div>
    <div class="card-footer">
      <span class="swipeText">{{"swipeResult" | translate }}</span>
      <ion-icon class="swipeLeft" name="ios-thumbs-down"></ion-icon>
      <ion-icon class="swipeRight" name="ios-thumbs-up"></ion-icon>
    </div>
     </sc-card>
  </div>

does these two arrays have any common properties between them? e.g. is each diagnose supposed to have a lab value? if yes, i would probably merge the labValue to their respective diagnose item. — Sajan
– Sajan, Commented Jul 4, 2018 at 12:18
Combine the two arrays into a single array in your angular data structure code. — user5734311
– user5734311, Commented Jul 4, 2018 at 12:25

Air1 · Accepted Answer · 2018-07-04 12:50:18Z

2

So you have 2 arrays containing 2 slightly different objects.

I would create a new array for your cards containing (as much as possible) a standard object :

let cardArray = diagnoses.map(diag => { type: 'diagnose', 
          ICD: diag.additionalParameters.uniqueId,
          coveredText: diag.coveredText }) // etc... map all your properties
     .concat(labValues.map(labVal => { type: 'labvalue',
          interpretation: labVal.additionalParameters.interpretation,
          coveredText: labVal.coveredText })) // etc... map all your properties

Now you can just loop over your new cardArray array and make your HTML clearer.

answered Jul 4, 2018 at 12:50

Air1

5673 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wFitz · Accepted Answer · 2018-07-04 12:51:46Z

0

you could create an auxiliary array :

  let auxArray = [];
  for (let i; i <= Math.max(diagnoses.length); labValues.length, i++) {
     auxArray.push( {"index": i} );
  }

Then in your *ngFor, iterate the auxArray, and with the index, show the corresponding diagnoses or labValues ( check for undefined to alleviate array.length differences )

answered Jul 4, 2018 at 12:51

wFitz

1,2989 silver badges13 bronze badges

Collectives™ on Stack Overflow

Loop through with an element through different arrays

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related