JSFiddle - React, Tailwind, and code Playground

by kapantzak

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table id="target">
  <tbody>
    
  </tbody>
</table>

JavaScript

var json_object =   [{
  "attributes": {
    "Code": "SGL",
    "Total": "19421340.27"
  },
  "DayPrice": [{
    "Date": "2016-07-22",
    "Rate": "4900439.85"
  }, {
    "Date": "2016-07-23",
    "Rate": "4845150.21"
  }, {
    "Date": "2016-07-24",
    "Rate": "4845150.21"
  }, {
    "Date": "2016-07-25",
    "Rate": "4830600"
  }]
}, {
  "attributes": {
    "Code": "DBL",
    "Total": "6473780.09"
  },
  "DayPrice": [{
    "Date": "2016-07-22",
    "Rate": "1633479.95"
  }, {
    "Date": "2016-07-23",
    "Rate": "1615050.07"
  }, {
    "Date": "2016-07-24",
    "Rate": "1615050.07"
  }, {
    "Date": "2016-07-25",
    "Rate": "1610200"
  }]
}, {
  "attributes": {
    "Code": "QUAD",
    "Total": "6473780.09"
  },
  "DayPrice": [{
    "Date": "2016-07-22",
    "Rate": "1633479.95"
  }, {
    "Date": "2016-07-23",
    "Rate": "1615050.07"
  }, {
    "Date": "2016-07-24",
    "Rate": "1615050.07"
  }, {
    "Date": "2016-07-25",
    "Rate": "1610200"
  }]
}];

var dateObj = {};
for (key in json_object) {
  var obj = json_object[key];
  var day = obj.DayPrice;
  for (dt in day) {
  	var dtObj = day[dt];
    var dtKey = dtObj.Date;    
    if (dateObj.hasOwnProperty(dtKey)) {
    	dateObj[dtKey].push({ Code: obj.attributes.Code, Rate: dtObj.Rate });
    } else {
    	dateObj[dtKey] = [{ Code: obj.attributes.Code, Rate: dtObj.Rate }];
    }
  }
}

for(d in dateObj) {
	var obj = dateObj[d];
	var row = '<tr><td>' + d + '</td><td><ul>';
  $.each(obj, function(i, val) {
  	console.log(val);
    row += '<li>' + val.Code + ': ' + val.Rate + '</li>';
  });
  row += '</ul></td></tr>';
  $('#target').find('tbody').append(row);
}