JSFiddle - React, Tailwind, and code Playground

by Keenan

HTML

<div class="latestPost">
    Title: <span class="latestName"></span><br />
    Author: <span class="latestFirstName"></span><br />
    Date Posted: <span class="latestFirstDate"></span><br />
<!--    Body: <span class="latestBody"></span><br /> -->
    Last Comment By: <span class="latestLastName"></span><br />
    Last Comment Date: <span class="latestLastDate"></span><br />
</div>

JavaScript

// Define our global variables using "namespaces"
$.latestDiscussion = new Object();
$.latestDiscussion.discussion = new Object();
$.latestDiscussion.ready = false;
// This is the URL with the JSON
// Should be yourforums.com/discussion.json
$.latestDiscussion.url = "http://testing.wurmly.com/discussions.json";
// Delay to wait for AJAX
$.latestDiscussion.delay = 1000;

// This puts the latest discussion in $.latestDiscussion.discussion
function getLatest() {
    $.getJSON($.latestDiscussion.url, function(data){
        console.log("Fetched JSON.");
        $.latestDiscussion.discussion = data.Discussions[0];
        $.latestDiscussion.ready = true;
    });
}

// This updates elements on the page using the "latest" class prefix
// Example, for the name of the person who posted, put "latestFirstName"
// as the class for the element you want it to show up in.
function updateLatest() {
    $.each($.latestDiscussion.discussion, function(key,val){
        // Catch dates
        // You can modify this to format however you wish.
        if(key.indexOf("Date") > 0) {
            val = new Date(val);
            val = val.toLocaleString();
        }
        $(".latest"+key).text(val);
    });
}

$(document).ready( function() {
    getLatest(); // Fetch our data.
    // Now wait for it... this way the page loads and we update it after
    var timer = setInterval( function() {
        console.log("Checking for data...");
        if( $.latestDiscussion.ready ) {
            console.log("Data ready!");
            updateLatest();
            clearInterval(timer);
        }
    }, $.latestDiscussion.delay);
});