JSFiddle - React, Tailwind, and code Playground

by Gagan Jaura

HTML

<div class="widget style1" style="background-color: #F59C1A!important; color: #FFF">
<div class="row">
    <div class="col-xs-8 text-left">
        <span>Course Weeks</span>
        <h2 class="font-bold" id="DailyChange"></h2>
        <div style="padding-bottom: 5px;padding-top: 15px">
            This Year Change: <strong id="ThisYearChange"></strong>
        </div>
        <div>
            Future Years Change: <strong id="FutureYearsChange"></strong>
        </div>
    </div>
    <div class="col-xs-4">
        <span class="label label-danger pull-right">Daily Change</span>
        <i class="fa fa-line-chart fa-5x pull-right" style="padding-top: 20px;opacity: 0.4"></i>
    </div>
</div>

JavaScript

$(document).ready(function(){
	var text = '[{"DailyChange":1124.60},{"ThisYearChange":435.60},{"FutureYearsChange":680.00}]';
	ParseJson(text);

});

function ParseJson(jsonValue)
{
    var parsedJson = JSON.parse(jsonValue);   
	$('#DailyChange').text(parsedJson[0].DailyChange)
	$('#FutureYearsChange').text(parsedJson[2].FutureYearsChange)
	$('#ThisYearChange').text(parsedJson[1].ThisYearChange)
}