VueJS v-for performance issue

Question

I have a small app, that makes a coin portfolio. I am getting about 2000 data calls from the API. I try to list them with v-for. But after 100 calls, my app is not working correctly. It is freezing. To get and list data takes 10 seconds or so, and when I try to search something. My app freezes and provides a poor user experience.

I am sharing my github repo. My app now receives 100 data objects and it has no problem. Here is the code I am working with.

async created() {
    this.loaded = false;

    try {
      const response = await fetch(
        'https://api2.binance.com/api/v3/ticker/24hr'
      );
      const data = await response.json();
      // Get first 100 of data
      data.slice(0, 100).forEach(element => {
        this.chartData.symbols = [...this.chartData.symbols, element.symbol];
        this.chartData.price = [...this.chartData.price, +element.lastPrice];
      });

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

To leave here neat. I am sharing my GitHub repo. You can reach all code with my Github repository and get inspect my app.

Answer 1

I've answered to something similar here: https://stackoverflow.com/search?tab=newest&q=user%3a8816585%20pagination (last 2 answers)

TLDR: you are using .slice but you are still loading the whole collection of objects on your frontend.

---

Binance's API documentation is quite bad because I can't simply refer to a given endpoint. Hence here is a screenshot of that particular endpoint

Can be found by using the search function hopefully.

Overall, you will have several fields by default (if you reach for https://api2.binance.com/api/v3/ticker/24hr ) aka

[
  'symbol',
  'priceChange',
  'priceChangePercent',
  'weightedAvgPrice',
  'prevClosePrice',
  'lastPrice',
  'lastQty',
  'bidPrice',
  'bidQty',
  'askPrice',
  'askQty',
  'openPrice',
  'highPrice',
  'lowPrice',
  'volume',
  'quoteVolume',
  'openTime',
  'closeTime',
  'firstId',
  'lastId',
  'count',
]

Passing sending MINI like this https://api2.binance.com/api/v3/ticker/24hr?type=MINI can reduce the amount of fields received to those

[
  'symbol',
  'openPrice',
  'highPrice',
  'lowPrice',
  'lastPrice',
  'volume',
  'quoteVolume',
  'openTime',
  'closeTime',
  'firstId',
  'lastId',
  'count',
]

You can of course also limit the tokens that you want to get, that one may be considerable too.

---

Besides that, I didn't see anything related to pagination in the API. So I guess that they don't really care about DX and want you to do that yourself.
So you could use a backend middleware, a serverless function or anything else as a proxy to delegate that work to some backend server rather than your client-side app.

No magic sauce, as previous explained in my answers.