How to make a array inside a json array dynamic using ngFor?

Question

I am displaying data using json array on my HTML file - I am successful in getting data from the array, but when I am trying to display the data inside the attendance array (using getAttendance.attendance[0].type) I only display the first data from inside the attendance array.

Here is the structure of the array:

and here is my HTML in displaying the data

<div id="attendances" class="list-group-item" style="position: relative;"  *ngFor="let getAttendance of getAttendances">
                <div class="container-fluid">
                  <div class="row">
                    <div class="user col-sm-12 col-md-2">
                      <div class="user-wrapper">
                      <span class="ellipsis" style="vertical-align: sub;">{{ getAttendance.convertStartTimeRaw | date }}</span>
                      </div>
                    </div>
                    <div class="timeline col-sm-12 col-md-9">
                      <!-- Display Date -->
                      <div class="progress w-100" *ngIf="getAttendance.attendance.length === 0" style="margin-top: 10px;">
                        <!-- Start -->
                        <div class="progressbar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.timedInOverDay + '%'}">
                        </div>
                        <div class="progressbar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.durationOverDay + '%'}"></div>
                      </div>

                      <div class="progress w-100" *ngIf="(getAttendance.attendance)?.length > 0 && getAttendance.attendance[0].regularHours >= 9" style="margin-top: 10px;">

                        <!-- With Pre Overtime -->
                        <div class="progressbar preOTregulartime" *ngIf="getAttendance.attendance[0].totalHoursInMins < 0 || getAttendance.attendance[0].totalHoursInMins === 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].preOvertimeOverDay + '%'}"></div>
                        <!-- Pre Overtime -->
                        <div class="progressbar earlyIn" *ngIf="getAttendance.attendance[0].totalHoursInMins < 0 || getAttendance.attendance[0].totalHoursInMins === 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].absoluteTotalHoursInMins + '%', 'background-color': getAttendance.attendance[0].type == 'ot' ? '#9744BE' : '#607D8B'}"></div>

                        <!-- Regular Hours With Pre Overtime -->
                        <div class="progressbar bg-success regulartime" *ngIf="getAttendance.attendance[0].totalHoursInMins < 0 || getAttendance.attendance[0].totalHoursInMins === 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].timeInOverEndTime + '%'}"></div>
                        <!-- With Pre Overtime: END -->

                        <!-- Regular Hours With Pre Overtime -->
                        <div class="progressbar LateOut" *ngIf="getAttendance.attendance[0].totalHoursInMins < 0 || getAttendance.attendance[0].totalHoursInMins === 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].endTimeOverTimeOut + '%', 'background-color': getAttendance.attendance[0].type == 'ot' ? '#9744BE' : '#607D8B'}"></div>
                        <!-- With Pre Overtime: END -->



                        <!-- Start Duration of Day -->
                        <!-- <div class="progressbar" role="progressbar" *ngIf="getAttendance.attendance[0].regularHours > 0 && getAttendance.attendance[0].totalHoursInMins > 0" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.timedInOverDay + '%'}">
                        </div> -->
                        <!-- Time In Regular Hours -->
                        <!-- <div class="progressbar bg-success" *ngIf="getAttendance.attendance[0].regularHours > 0 && getAttendance.attendance[0].totalHoursInMins > 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].overtime + '%'}"></div> -->

                        <!-- Undertime -->
                        <!-- <div class="progressbar bg-danger undertime" *ngIf="getAttendance.attendance[1] && getAttendance.attendance[1].undertimeInMins && getAttendance.durationOverDay != '0'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[1].undertime + '%'}"></div> -->

                        <!-- Overtime -->
                        <!-- <div class="progressbar bg-purple overtime" *ngIf="getAttendance.attendance[0].totalHoursInMins > 0 && getAttendance.durationOverDay != '0' && getAttendance.attendance[0].totalHoursInMins > 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].overtime + '%'}"></div> -->

                      </div>

                      <div class="progress w-100" *ngIf="(getAttendance.attendance)?.length > 0 && getAttendance.attendance[0].regularHours < 9" style="margin-top: 10px;">

                        <div class="progressbar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.timedInOverDay + '%'}">
                        </div>

                        <div class="progressbar bg-danger" *ngIf="getAttendance.attendance[0].halfday < 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].exception + '%'}">
                        </div>

                        <div class="progressbar bg-success" *ngIf="getAttendance.attendance[0].halfday < 0 && getAttendance.attendance[0].undertime < 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].overtime + '%'}">
                        </div>

                        <!-- Regular Hours With Pre Overtime -->
                        <div class="progressbar bg-success regulartime" *ngIf="getAttendance.attendance[0].undertime >= 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].timeInOverEndTime + '%'}"></div>
                        <!-- With Pre Overtime: END -->

                        <!-- Regular Hours With Pre Overtime -->
                        <div class="progressbar LateOut" *ngIf="getAttendance.attendance[0].undertime >= 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].endTimeOverTimeOut + '%', 'background-color': getAttendance.attendance[0].type == 'ot' ? '#9744BE' : '#607D8B' }"></div>
                        <!-- With Pre Overtime: END -->

                        <div class="progressbar bg-danger" *ngIf="getAttendance.attendance[0].undertime < 0" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': + getAttendance.attendance[0].absoluteUndertime + '%'}">
                        </div>
                      </div>

                    </div>
                    <div class="total col-sm-12 col-md-1">
                      <div class="total-wrapper font-weight-bold" style="margin-top: 9px; text-align: center">{{ getAttendance.attendance[0] ? getAttendance.attendance[0].regularHours : '0' }} Hrs</div>
                    </div>
                  </div>
                </div>
              </div>

I am struggling on how to condition that if the attendance array has a type of "ot" the background-color is "#9744BE" otherwise "#607D8B"

or how can I dynamically display or get data inside the attendance array.

thanks in advance!

If its just matter of css (Set background), you dont need to iterate entire child collection again. Instead you can use find/findIndex on array and check that your desired condition satisfy or not and do logic accordingly. w3schools.com/jsref/jsref_findindex.asp — Harshad Vekariya
– Harshad Vekariya, Commented Jul 8, 2019 at 13:57
before I set the background I first need to know if the data inside the attendance array has a type of "ot". — Terence
– Terence, Commented Jul 8, 2019 at 14:01
Check this fiddle: jsfiddle.net/harshadray/arw86gmd/3 It will provide you code which tells that array have value or not. If output > 0, you can say element exist else not. — Harshad Vekariya
– Harshad Vekariya, Commented Jul 8, 2019 at 15:38
Thanks bro! This is a new learning for me. Will definitely try this method — Terence
– Terence, Commented Jul 9, 2019 at 3:27

Dwagh · Accepted Answer · 2019-07-08 13:49:01Z

3

you can use *ngFor again. So instead of getAttendance.attendance[0] use *ngFor="let attendance of getAttendance.attendance" and then access it with attendance.type

answered Jul 8, 2019 at 13:49

Dwagh

3034 silver badges8 bronze badges

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

2 Comments

Terence Over a year ago

Thanks for your answer! But can you tell me where should I use the second ngFor on my HTML?

Dwagh Over a year ago

In this line would be best

<div class="progress w-100" *ngIf="(getAttendance.attendance)?.length > 0 && getAttendance.attendance[0].regularHours >= 9" style="margin-top: 10px;">

as i see it all calls to getAttendance.attendance[0] are in children of this div

Harshad Vekariya · Accepted Answer · 2019-07-10 12:30:08Z

If its just matter of css (Set background), you don't need to iterate entire child collection again. Instead you can use find/findIndex on array and check that your desired condition satisfy or not and do logic accordingly.

Check this fiddle: jsfiddle.net/harshadray/arw86gmd/3

<!DOCTYPE html>
<html>

  <body>

    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>

    <script>
      var ages = [{
        x: 1
      }, {
        x: 2
      }, {
        x: 3
      }, {
        x: 4
      }];

      function checkAdult(age) {
        return age.x == 3; // condition
      }

      function myFunction() {
        document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
      }

    </script>
  </body>

</html>

If output > 0, you can say element exist else not.

Collectives™ on Stack Overflow

How to make a array inside a json array dynamic using ngFor?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related