I am working on a small app that helps track coin portfolios. However, I am facing an issue when making about 2000 data calls from the API. When trying to list them using v-for, my app starts freezing after around 100 calls. It takes approximately 10 seconds to get and list the data, and when I attempt to search for something, the app freezes, resulting in a poor user experience.
Currently, my app is only able to receive 100 data objects without any problems. Below is a snippet of the code I am using:
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);
}
If you would like to take a closer look at the code, feel free to visit my GitHub repository here.