How to add 2 numbers inside a list using vue.js

Question

How can I add the first 5 numbers that my list take from the url and then calcuate the average . What i mean is taking the average values per 5 minutes , 30 minutes,60 minutes. I made a delay 1 minute so at the first 5 minutes in my list there should be 5 values. Then I want to show in 3 different templates the average of the values I take.

<template>
  

<div id="app" >
  
 
  <form>
    
    <label>Enter Currency: <input type="text" v-model="currency"></label>
    <input id="clickMe" type="button" value="Submit"  @click="getData(currency) "/>
    
    
    
    
  </form>
  
  <pre></pre><p>Bitcoin Value is : {{ apiData?.data?.amount }}</p>
  

  <template v-for="value in getShortList(5)">
    <pre></pre><p>Last 5 minute value is : {{ }} </p>
    <li class="divider" role="presentation"></li>
  </template>

  <template v-for="item in getShortList(29)">
    <pre></pre><p>Last 30 minute value is : {{parseInt (getShortList(29))}}</p>
    <li class="divider" role="presentation"></li>
  </template>

  <template v-for="item in getShortList(59)">
    <pre></pre><p>Last 60 minute value is : {{ parseInt (getShortList(59)) }}</p>
    <li class="divider" role="presentation"></li>
  </template>



 

  <template>
<div>
  <apexchart width="500" type="bar" :options="options" :series="amountList"></apexchart>
</div>
</template>



  
</div>



</template>

My script code is above:


 import axios from 'axios'
 

export default {
  
 
 
  data() {
    return {
      apiEndPoint : 'https://api.coinbase.com/v2/prices/spot?currency=',
      apiData: [],
      amountList: [],
      
       
      
      
      
    
    }
  },
  

  created () {
   


    
    this.getData(this.currency);

   
   
  }
,
 
  

  methods: {
    getShortList(shortListSize) {
      return this.amountList.slice(0, shortListSize);
      
     

    },

    

    getData(currency) {

     
      axios.get(`${this.apiEndPoint}${currency}`).then((response) => {
        
        this.timer = setInterval(() => {
   
        this.apiData = response.data
        this.amountList.push(response.data.data.amount)
        

        console.log(this.amountList)
      }, 5000) 
        })
       
    
  
        
    
      }
      
    }
  }


  


   
</script>

What is the use of calling same endpoint after every 5 seconds ? You can fetch all the response in a single go and then splice as per the requirement. — Rohìt Jíndal
– Rohìt Jíndal, Commented Sep 28, 2022 at 12:40
how i can do that? The purpose is taking the bitcoin value every 1 minute not every 5 seconds . i Just used 5 seconds for testing — takis Paras
– takis Paras, Commented Sep 28, 2022 at 12:54
The response values will be changed after 1 minute because they get collected from a live json api — takis Paras
– takis Paras, Commented Sep 28, 2022 at 13:00
And after that I want to slice the first 5 values but return the average value of them 5 combined — takis Paras
– takis Paras, Commented Sep 28, 2022 at 13:52

Rohìt Jíndal · Accepted Answer · 2022-09-28 14:15:17Z

1

As per my understanding and by the comments you added, You are facing challenge in getting the average of the array (this.amountList) items. If Yes, you can achieve that with the help of Array.reduce() method.

Live Demo :

// spliced amountList which contains 5 items.  
const arr = [100, 200, 30, 44, 50];

// Find the average
const average = arr.reduce((a, b) => a + b, 0) / arr.length;

// output
console.log(average);

Once you get the average, You can make this reactive by assigning the value to a data object property.

answered Sep 28, 2022 at 14:15

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

4 Comments

takis Paras Over a year ago

OK I understood it so I should make 3 const arr each one containing 5, 30, 60 values right? And taking the average of them each time

Rohìt Jíndal Over a year ago

No, Just for a demo I created an arr variable but in your case you are splicing amountList dynamically based on shortListSize. In getShortList method only you can calcualte the average dynamically.

takis Paras Over a year ago

I tried it but I can't take the 5 values from my list in the getShortList method so I can make the average like u recommended me

Rohìt Jíndal Over a year ago

as you are passing dynamic number in the method you can slice the array based on that and in that case you will get dynamic array elements only by splicing based on the passed param.

Collectives™ on Stack Overflow

How to add 2 numbers inside a list using vue.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related