Coinranking data not always showing - Vue.js

Hello,

I’m working on a small personal project where I display every coin available on the API as well as their stats.
however sometimes the evolution of the coin (7d/30d) sometimes doesn’t show/load (I do a request for the 7d adding ?timePeriod=7d and another on with ?timePeriod=30d at the end of my URL to get either ones).
If I wait a bit and reload the page it comes back.

I was wondering why this was happening when all the other stats always show 100% of the time.
Would that be due to lifecycle hooks or maybe The page loads too quickly for the data to come back and show?

Any help would be appreciated, if you need more info let me know.

Thx!

1 Like

Hi,

Sounds like a cool project you’re working on :grinning:

I think we need a bit more information to figure out what’s going wrong. When the issue occurs, do you see any requests being performed in your browser’s inspector? And if you see any, are they successful or do you get an error message? This will help us determine whether the issue is within our API or in your project.

2 Likes

Hi @Riccardo,

Thanks for your answer!

I don’t have any errors in the console, everything seems to be working fine, I’m working with Vue.js and am a beginner at it so maybe it comes from the lifecycle hooks that I don’t manage well yet.

Regarding requests they all succeed.
There is a big chance that the issue come from my side rather than from your API :smiley:

The issue of stats not showing only happens sometimes, not 100% of the time.

If needed/interested my project is on my gitHub here :
https://github.com/JStephens83/myCoins

Cheers!

Hi,

Interesting you don’t see any errors in the console. Just to be sure, did you also check out the ‘Network’ tab of the inspector? If you use Chrome for example, this is how you get there: Inspect Network Activity In Chrome DevTools  |  Google Developers). Based on the fact that you only have the issue occasionally, I think you might be running into our API rate limit. If that is the case, you should see a request with status 429 in the network tab.

If this is not the issue I’d like to take a look at your code. The GitHub link is not working for me currently, you can also make a JSFiddle (https://jsfiddle.net/) showcasing the issue so you don’t have to share your entire project if you prefer :grinning:.

Hi,

I indeed checked the network tab and have no issues there either.
Regarding my gitHub it was private sorry, I made it temporarily public so you can check it.

Thx!

Hi,

I looked at your project, and indeed the API calls seem to go well. I think you’re already quite close to making it work! What I think is the easiest way to get the 7 day change to show up is as follows:

In the HomeResults component, pass only the 7 day change of the coin to each CryptoItem component.

<cryptoItem
    :detail="detail"
    :change7d="cryptoList7d[index] ? cryptoList7d[index].change : null"
    class="mt-1 mb-1 pt-3 pb-3 pl-3 pr-3">
</cryptoItem>

This way you only pass the data each CryptoItem needs, instead of all the data for all the coins you have retrieved.

Then in the CryptoItem component:

Update cryptoList7d in the props to change7d:

props: ['detail', 'crypto', 'urlIcon', 'lastEvol', 'previousEvol', 'coinUuid', 'listUuids', 'idLinks', 'cryptoList', 'sparkline', 'change', 'index', 'elt7d', 'change7d'],

And make the <td> similar to what you have for the 24h change:

<td>
<!-- evolution 7 days -->
<p>{{ parseFloat(change7d).toFixed(2) }} %</p>
</td>

For me it works consistently like this. You can do the same thing to get the 30 day change working. Give it a try and let me know if you have any more questions :grinning:

Thank you so much for looking into this.

I’m very sorry but my master branch was not up to date… my Dev branch was and there have been quite a few changes since.

I merged my Dev branch into my master branch today.

Also, my dashboard IS working, just a bit fussy sometimes. I will look into your advices though.
Thanks again !

cheers,