JSON object reverse engineering

Question

I'm converting a website that is using a very basic JSON query to update some statistics. I've looked at this with another dev (we are both fairly inexperienced with JS and JSON) and it has us scratching our heads a little.

First, ignore the actual numbers - they don't match up. Consider them placeholders.

Second, how can I parse the JSON to grab real-time data and set that as my data-end?

Last, this is best effort to achieve a similar function to that of https://www.compliancemate.com/ (scroll down the page midway)

JSON

{"statistic":
    {"total-corrective-actions":5171955,
     "total-lists":66363,
     "total-critical-notifications":167607,
     "total-readings":1906320528
    }
 }

JS

statsLayout: function() {
    var d = function(g, f, k, j) {
        var h = (g /= j) * g;
        var e = h * g;
        return f + k * (e * h + -5 * h * h + 10 * e + -10 * h + 5 * g)
    };
    var a = {
        useEasing: d,
        useGrouping: "true",
        separator: ","
    };
    var c = $(".number");
    $(".layout-stats .number").each(function() {
        var e = $(this);
        var f = new CountUp(e[0], 0, $(e[0]).data("end") - 100, 0, 5.5, a);
        f.start();
        setTimeout(function() {
            setInterval(function() {
                var g = Math.floor(Math.random() * 700) + 100;
                setTimeout(function() {
                    var j = e[0];
                    var h = $(j).attr("data-end");
                    ++h;
                    $(j).attr("data-end", h).text(b(h))
                }, g)
            }, 800)
        }, 4000)
    });

    function b(e) {
        var f = Math.round(e);
        return f.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
}

HTML

<div class="statistic">
    <span class="number" data-end="1900047125">1,900,047,125</span><br />
    <span class="name">Data Collected</span>
</div>
<div class="statistic">
    <span class="number" data-end="170409">170,409</span><br />
    <span class="name">Critical Calls</span>
</div>
<div class="statistic">
    <span class="number" data-end="5151905">5,151,905</span><br />
    <span class="name">Corrective Actions</span>
</div>

I don't understand the question. The code you posted doesn't seem to be related to the JSON. — Barmar, Jun 26 '17 at 22:00
So basically you're wanting to long-poll your database for changes and update the DOM accordingly. Is that what I'm hearing? Or do you want hardcoded ending values and it randomly updates a running total for each statistic until it reaches that value? — mhodges, Jun 26 '17 at 22:02
Offtopic, but your code is vary hard to read because you use some horrid variable names; how exactly am I supposed to know what `var h = (g /= j) * g` means? Use real, relevant words instead of single characters. — Paul Abbott, Jun 26 '17 at 22:03
All those nested setTimeout/setInterval just feels a bit messy. - we guess what `CountUp` is here. — Mark Schultheiss, Jun 26 '17 at 22:11
It's not in a db but json. I would like those stats to update at a starting number and build to the value. — Jarod Thornton, Jun 26 '17 at 22:15

JSON object reverse engineering

0 Answers0