VueJS get request every 20 minutes-CodePudding

I fetch data from a get request to display coin name information. I want this to update every 20 minutes. For test-drive, I keep it 500 milliseconds. It always and always fetch data and add current list, so I am getting Duplicate keys detected: 'BUSDRON'. This may cause an update error this error and also my app is freezing.

How can I getting data from above link request every 20 minute, without dublicating values? Also it My fetch codes is here

 methods: {
    async fetchApi() {
      const response = await fetch(
        'https://api2.binance.com/api/v3/ticker/24hr'
      );
      const data = await response.json();
      await data.forEach(element => {
        this.chartData.symbols = [...this.chartData.symbols, element.symbol];
        this.chartData.price = [...this.chartData.price,  element.lastPrice];
      });
    },
}



 data: () => ({
        timer: '',
    )}


async created() {
    this.loaded = false;

    try {
      this.timer = setInterval(this.fetchApi, 500);

      this.loaded = true;
    } catch (e) {
      console.error(e);
    }
  },

CodePudding user response：

Use uniqBy from lodash to remove duplicates.

Not sure the uniqueness would be based on the latest data. For safety, we reverse the array. After filtering the unique date, we reverse the array again in the order it should be.

methods: {
    async fetchApi() {
      const response = await fetch(
        'https://api2.binance.com/api/v3/ticker/24hr'
      );
      const data = await response.json();
      this.chartData = _.uniqBy([...this.data, data].reverse(), 'symbols').reverse()
    }
}

CodePudding user response：

Before your forEach loop, reset the arrays for symbols and price to an empty array, then push the new values to them inside of the forEach loop.

const response = await fetch(
    'https://api2.binance.com/api/v3/ticker/24hr'
  );
const data = await response.json();
const symbols = [];
const price = [];

data.forEach(element => {
  symbols.push(element.symbol);
  price.push(element.lastPrice);
});

this.chartData.symbols = symbols;
this.chartData.price = price;

CodePudding user response：

You can use Set to prevent duplicates:

const app = Vue.createApp({
  data() {
    return {
      timer: '',
      chartData: { symbols: [], price: [] },
      loaded: false
    }
  },
  methods: {
    async fetchApi() {
      const response = await fetch('https://api2.binance.com/api/v3/ticker/24hr')
      const data = await response.json();
      await data.forEach(element => {
        this.chartData.symbols = [...new Set([...this.chartData.symbols, element.symbol])]
        this.chartData.price = [...new Set([...this.chartData.price,  element.lastPrice])]
      })
    }
  },
  async created() {
    this.loaded = false;
    try {
      this.timer = setInterval(this.fetchApi(), 500);
      this.loaded = true
    } catch (e) {
      console.error(e)
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  {{ chartData }}
</div>