javascriptjsontypescripttree-structure

Building hierarchy tree using JSON


I have a list of objects with a C_PARENT field.This parent field references another object in the list. I would like to create a tree hierarchy from this list based on this field.

Here is my data.

[{
    "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"
}]

I need convert into tree structure.

[
  {
    'C_ID': 1,
    'C_TITLE': 'Sparklers',
    'C_PARENT': 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"
    children:  [
      {
        "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"
      }
    ]
]

I have no idea.

Kindly advice me,

Thanks


Solution

  • I normaly used to create a new string with propertly info

    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;
    

    https://jsfiddle.net/g9h9a9ep/