JSFiddle - React, Tailwind, and code Playground

by Vinay Pratap Singh Bhadauria

HTML

<pre id="rawData" style="display:none;">
        [{"pm05": {"N": "697"}, "pm25": {"N": "49"}, "created_at": {"S": "2017-06-04 06:14:48.667154"}, "deviceID": {"S": "air-client-1"}, "private_ip": {"S": "192.168.1.112"}, "timestamp": {"S": "2017-06-04T14:14:43+08:00"}, "pm05-25-delta": {"N": "49"}, "timestamp_notimezone": {"S": "2017-06-04 14:14:43"}}, {"pm05": {"N": "1725"}, "pm25": {"N": "51"}, "created_at": {"S": "2017-05-10 02:51:48.961875"}, "deviceID": {"S": "air-client-4"}, "private_ip": {"S": "192.168.52.221"}, "timestamp": {"S": "2017-05-10T10:51:23+08:00"}, "pm05-25-delta": {"N": "51"}, "timestamp_notimezone": {"S": "2017-05-10 10:51:23"}}, {"pm05": {"N": "2681"}, "pm25": {"N": "11"}, "created_at": {"S": "2017-05-10 02:45:30.070668"}, "deviceID": {"S": "air-client-3"}, "private_ip": {"S": "192.168.52.96"}, "timestamp": {"S": "2017-05-10T10:45:25+08:00"}, "pm05-25-delta": {"N": "11"}, "timestamp_notimezone": {"S": "2017-05-10 10:45:25"}}, {"pm05": {"N": "2434"}, "pm25": {"N": "70"}, "created_at": {"S": "2017-05-29 20:19:33.630653"}, "deviceID": {"S": "air-client-5"}, "private_ip": {"S": "192.168.1.237"}, "timestamp": {"S": "2017-05-30T04:19:25+08:00"}, "pm05-25-delta": {"N": "70"}, "timestamp_notimezone": {"S": "2017-05-30 04:19:25"}}]

</pre>
<div id="formattedData"></div>

CSS

.dataBox {
  border: 1px solid red;
  display: inline-block;
  margin: 5px;
  padding: 2px;
}

.dataItem {
  display: block;
}

JavaScript

$(document).ready(function() {
  //var data = JSON.stringify($("#rawData").text(), undefined, 2);

  $.each(JSON.parse($("#rawData").text()), function(key, value) {
    $("#formattedData").append("<div class='dataBox'><span class='dataItem'>Device Id: " + value.deviceID.S + "</span><span class='dataItem'>pm05: " + value.pm05.N + "</span><span class='dataItem'>pm25: " + value.pm25.N + "</span><span class='dataItem'>pm05-25-delta: " + value["pm05-25-delta"].N + "</span><span class='dataItem'>timestamp_notimezone: " + value.timestamp_notimezone.S + "</span><span class='dataItem'>Age: " + getDiffrenceInMinutes(new Date(value.timestamp_notimezone.S)) + "</span></div > ");
  });

  function getDiffrenceInMinutes(datetime) {
    var today = new Date();
    var diffMs = (today - datetime); // milliseconds between now & Christmas
    var diffDays = Math.floor(diffMs / 86400000); // days
    var diffHrs = Math.floor((diffMs % 86400000) / 3600000); // hours
    var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes
    return diffMins;
  }


});