How to loop over nested array in vue and display data every 5 seconds?

Question

I'm using Vue Js and I have a nested array like this:

    arrays: [
      {
         name: 'Max',
         Info: [60, 75, 70, 85, 65], 
      },
      {
         name: 'Dave,
         Info: [70, 95, 60, 65, 83], 
      },
     ]

I have a user profile box that displays name and info for each user.

<div class="outer"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">

I would like to display info in template:

<div class="box c" >Info<span v-for="info in item.Info">{{info}}</span></div>

When I did this it showed the correct array for the correct user but it displayed all numbers but I would like info to show each number only for 5 seconds until the last number. So for Max it will display 60 then wait 5 seconds, then will only show 75 wait 5 seconds etc until it stops at the last number and only displays that number.

I tried creating a function :

  appendInfo: function() {
    
 for (let i = 0, l = this.arrays.length; i < l; i++) {
    let info = this.arrays[i]['Info'];
 
    
 let timer = 0;
   
    for (let i = 0; i < info.length; i++) {
      setTimeout(() => this.rate = info[i], timer);
      timer = timer + 5000;
      
  }
    
}

and passed data to rate

return {
      count: null, 
      rate: [],

and used {{rate}} in the template

<div class="box c" >Info<span>{{rate}}</span></div>

but it only displayed data from the second user profile for both profiles.

So I'm wondering if there is either a way to do this with v-for or how I can modify my function? Thanks!

Update

I used the RateDisplayer component like so:

<div class="outer"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
  <rate-displayer :rates="item.Info" />

import RateDisplayer from './RateDisplayer'
export default {
  name: 'card',
  props: {
            rates: {
                required: true,
            }
        
        },
  data () {
    return {
      interval: 5000,
      rate: false,
...

but still displayed only last arrays values.

Fixed

I removed from parent component:

props: {
            rates: {
                required: true,
            }

        },
 
      interval: 5000,
      rate: false,

and now it's working, thanks again!

Raffobaffo · Accepted Answer · 2020-06-29 16:36:53Z

1

I did something like that before. First, I suggest you to create a component JUST for this part:

<div class="box c" >Info<span>{{rate}}</span></div>

then, in this component you can accept rates as prop, and set rate every 5 sec to the new one. Something like:

<template>
    <div class="box c" v-if="rate">Info<span>{{rate}}</span></div>
</template>

 export default {

   name: "RateDisplayer.vue",
        props: {
            rates: {
                required: true,
            }
        
        },
        data() {
            return {
                interval: 5000,
                rate: false
            }
        },
    mounted(){ this.nextOrStop(-1) },
    methods: { 
      nextOrStop(current)
      {
         if(current === this.rates.length-1) {  return }
         setTimeout( () => {
             const index = current+1;
             this.rate = this.rates[index];
             this.nextOrStop(index)
             }, this.interval)

    }

  ....

You can insert this component inside your parent component like this:

<div class="outer"  
     v-for="(item, index) in arrays" 
    :key="item.id" 
     v-bind:id="item.name">

         <rate-displayer :rates="item.Info" />
</div>

edited Jun 29, 2020 at 16:36

answered Jun 29, 2020 at 15:35

Raffobaffo

2,90611 silver badges22 bronze badges

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

5 Comments

YJay Over a year ago

Thanks so much this is very useful! I'm still having a problem though with it only displaying info from the last array. It shows each number every 5 seconds but only the numbers from the last array for every user. Is there a way I can display each users correct array values?

Raffobaffo Over a year ago

I just changed the answer to include how you should use the new component inside your parent component.

YJay Over a year ago

Thank you! Still seems to be displaying only the last array's numbers though.

Raffobaffo Over a year ago

That shouldn't happen. Can you paste in your original answer an update with how you're using this component? The behavior that you describe usually it happens on not named components.

YJay Over a year ago

Thank you, I have updated with how I'm using the component.

Collectives™ on Stack Overflow

How to loop over nested array in vue and display data every 5 seconds?

Update

Fixed

1 Answer 1

You can insert this component inside your parent component like this:

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

Fixed

1 Answer 1

You can insert this component inside your parent component like this:

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related