how to nested loop and array in vue js?

Question

Result of my query from controller

date: {2020-09-24: {work_hours: 7}, 2020-09-30: {work_hours: 8}}
2020-09-24: {work_hours: 7}
2020-09-30: {work_hours: 8}

This is my vue I'm trying to nested for loop but I'm getting double the result of looping

<table class="table table-hover table-bordered table-sm" >
  <thead>
      <tr>
        <template  v-for="disp in iDate.slice(1)">           
          <th scope="col" v-if="toWordDay(disp.date) == 'Sunday'" style="color:red">{{disp.date | forThDate}}</th>
          <th scope="col" v-else>{{disp.date | forThDate}}</th>
        </template>                           
      </tr>
  </thead>
  <tbody>
    <template v-for="fetch in attendanceData">
      <tr>
        <template v-for="disp in iDate.slice(1)">                
          <td style="height:10px;"  v-for="(data,ind) in fetch.date" v-if="ind == disp.date" >{{data.work_hours}}</td>  
          <td style="height:10px;" v-else>0</td>                          
        </template>                                  
      </tr>
    </template>

  </tbody>
</table>

nested for loop suggests nested data ... but your inner for loop has no bearing on the outer for loop - if you have "double data" that implies the outer loop loops twice - without seeing your data though, can't help much — Jaromanda X
– Jaromanda X, Commented Sep 25, 2020 at 2:33
It's not about nested loops. You're putting 0 in v-else. Remove the td of v-else. It should work Or keep it without any character inside that tag — Anish Chikodi
– Anish Chikodi, Commented Sep 25, 2020 at 2:33
not working it will display 7 into sep 24th and 8 into sep 2th — Not a Pro
– Not a Pro, Commented Sep 25, 2020 at 2:37

Wildan Maulana Syahidillah · Accepted Answer · 2020-09-25 06:17:47Z

1

Without knowing what attendanceData or iDate, I'm assuming fetch.date is what you mean the Result of my query from the controller, which is an object with the dates as keys. You could use disp.date as the accessor key.

<table class="table table-hover table-bordered table-sm" >
  <thead>
      <tr>
        <template  v-for="disp in iDate.slice(1)">           
          <th scope="col" v-if="toWordDay(disp.date) == 'Sunday'" style="color:red">{{disp.date | forThDate}}</th>
          <th scope="col" v-else>{{disp.date | forThDate}}</th>
        </template>                           
      </tr>
  </thead>
  <tbody>
    <template v-for="fetch in attendanceData">
      <tr>
        <template v-for="disp in iDate.slice(1)">                
          <td style="height:10px;">
             <template v-if="fetch.date[disp.date]">
               {{fetch.date[disp.date].work_hours || 0}}
             </template> 
             <template v-else>0</template>
          </td>
        </template>                                  
      </tr>
    </template>

  </tbody>
</table>

edited Sep 25, 2020 at 6:17

answered Sep 25, 2020 at 4:12

Wildan Maulana Syahidillah

9541 gold badge9 silver badges19 bronze badges

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

5 Comments

Not a Pro Over a year ago

It display all 0

Not a Pro Over a year ago

PLS CHECK.. This is same question about this my query is all here stackoverflow.com/questions/64041891/…

Wildan Maulana Syahidillah Over a year ago

Please add more info about attendanceData and iDate

Wildan Maulana Syahidillah Over a year ago

Please check the updated answer, I think I was missing disp.date

Not a Pro Over a year ago

I solve this earlier but This is more better than what I did.. Amazing bro thanks :)

Collectives™ on Stack Overflow

how to nested loop and array in vue js?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related