I am looking to display the numerical data retrieved from an API using JSON. I want to incorporate a counter effect that displays "isNaN" if necessary. The API URL returns an object with the total number saved in data.data. Can anyone assist me with achieving this?
<p class="Count member-count" style="color:#BA1823; font-size: 40px;">
<script>
$.getJSON('https://url.com/cmp/server/api/get-total-member', function(data) {
var text = `${data.data}<br>`
$(".member-count").html(text);
});
</script>
</p>
<script>
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
</script>