JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
Before
</h3>
<div id="container" style="color: #333; bacground-color: white; font-family: sans-serif;">

</div>
<h3>
After
</h3>
<div id="container2" style="color: #333; bacground-color: white; font-family: sans-serif;">

</div>

JavaScript

// this is the converter function 
var convertData = function (d) {
  //alert(d);
	var arr = [];
  for(var prop in data) 
  {
  	var el = { "id": prop };
    var otherprops = data[prop];
    for(var otherprop in otherprops) 
    {
    	el[otherprop] = otherprops[otherprop];
    }
    arr.push(el);
  }
  return arr;
}
// this is the data
var data = {
    "-L8eoUd5mqJGnXDVSmb0": {
        "description":"With a great description",
        "endDate":"12/31/2018",
        "endTime":"03:00",
        "imageUrl":"/favicon.ico",
        "name": "Here's a Good Event", 
        "startDate": "12/01/2018", 
        "startTime":"12:00"
    },
    "-L8jO6Zhz976hvoLUiga": {
        "description":"Another item",
        "endDate":"12/30/2018",
        "endTime":"03:05",
        "imageUrl":"/favicon2.ico",
        "name": "Event #2", 
        "startDate": "12/11/2018", 
        "startTime":"12:03"
    }
}
document.getElementById('container').innerHTML = JSON.stringify(data);
var converted = convertData ( data );
document.getElementById('container2').innerHTML = JSON.stringify(converted);