JSFiddle - React, Tailwind, and code Playground

HTML

<div id='result'>

</div>

JavaScript

String.prototype.replaceAll = function (search, replacement) {
  return this.replace(new RegExp(search, 'g'), replacement);
};
        
var data = JSON.parse('[{"C_ID" : 1.0,"C_TITLE" : "Sparklers","C_PARENT" : 0.0, "C_STATUS" : "Active"},{    "C_ID" : 2.0,    "C_TITLE" : "Twinklers",    "C_PARENT" : 0,    "C_STATUS" : "Active"},{   "C_ID" : 3.0,    "C_TITLE" : "Candles",    "C_PARENT" : 0.0,    "C_STATUS" : "Active"},{    "C_ID" : 4.0,    "C_TITLE" : "Chakkars",    "C_PARENT" : 0.0,    "C_STATUS" : "Active"},{    "C_ID" : 5.0,    "C_TITLE" : "Colour Chakkars",    "C_PARENT" : 4.0,    "C_STATUS" : "Active"},{    "C_ID" : 6.0,    "C_TITLE" : "Fancy Chakkars",    "C_PARENT" : 4.0,    "C_STATUS" : "Active"},{    "C_ID" : 7.0,    "C_TITLE" : "Fountains",    "C_PARENT" : 0.0,    "C_STATUS" : "Active"},{    "C_ID" : 8.0,    "C_TITLE" : "Whistling Fountains",    "C_PARENT" : 7.0,    "C_STATUS" : "Active"},{    "C_ID" : 9.0,    "C_TITLE" : "Fancy Fountains",    "C_PARENT" : 7.0,    "C_STATUS" : "Active"},{    "C_ID" : 10.0,    "C_TITLE" : "Fancy Colour Fountains",    "C_PARENT" : 7.0,    "C_STATUS" : "Active"},{    "C_ID" : 11.0,    "C_TITLE" : "Rockets",    "C_PARENT" : 0.0,    "C_STATUS" : "Active"}]');

var result = '[';

for (i = 0; i < data.length; i++) {
  if (data[i].C_PARENT == 0 || data[i].C_PARENT == "0") {
    if (i != 0)
      result += ']},';
    result += '{"C_ID" : ' + data[i].C_ID + ', "C_TITLE" : "' + data[i].C_TITLE + '", "C_PARENT" : ' + data[i].C_PARENT + ', "C_STATUS" : "' + data[i].C_STATUS + '", "children" : [';
  } else {
    result += '{"C_ID" : ' + data[i].C_ID + ', "C_TITLE" : "' + data[i].C_TITLE + '", "C_PARENT" : ' + data[i].C_PARENT + ', "C_STATUS" : "' + data[i].C_STATUS + '"},';
  }
}
result += ']}]';
result = result.replaceAll("},]", "}]");
var a = JSON.parse(result);
document.getElementById('result').innerHTML = result + "<br/><br/><br/>" + a;