Change dynamic json structure to key,value and children structure

Issue

I have a dynamic JSON structure ex:

{
  "video": {
    "width": 1920,
    "height": 1080,
    "video_codec": "H264",
    "CBR": "4337025",
    "frame_rate": {
      "numerator": 25,
      "denominator": 1
    },
    "specified": {
      "numerator": 1,
      "denominator": 1
    },
    "gop": {
      "length": 50,
      "reference_frames": 3,
      "sub_gop": "StaticType"
    },
    "codec_details": {
      "profile": "Main",
      "level": "Level4",
      "entropy_encoding": "CABAC",
      "video_output": "AVC1"
    }
  }
}

I want to transform it to tree node

export class TrackDetailsNode {
  key: string;
  value: string;
  children?: TrackDetailsNode[];
}

Output Example:

{
  "key": "video",
  "children": [
    {
      "key": "width",
      "value": "1920"
    },
    {
      "key": "frameRate",
      "children": [
        {
          "key": "numerator",
          "value": "60"
        },
        {
          "key": "denominator",
          "value": "1"
        }
      ]
    }
  ]
}

I need it in a recursive way. I want to build a tree from the provided JSON. Tried multiple solution but is taking a long time to parse.

Solution

var obj = {
  "video": {
    "width": 1920,
    "height": 1080,
    "video_codec": "H264",
    "CBR": "4337025",
    "frame_rate": {
      "numerator": 25,
      "denominator": 1
    },
    "specified": {
      "numerator": 1,
      "denominator": 1
    },
    "gop": {
      "length": 50,
      "reference_frames": 3,
      "sub_gop": "StaticType"
    },
    "codec_details": {
      "profile": "Main",
      "level": "Level4",
      "entropy_encoding": "CABAC",
      "video_output": "AVC1"
    }
  }
};

function transform(data, output, children) {
  Object.keys(data).forEach((key) => {
     let value = data[key];
     if (children) {
       if (typeof value === 'object') {
          const child = [];
          children.push({
             'key': key,
             children: child
          });
          transform(value, undefined, child)
       } else {
          children.push({
             'key': key,
             value
          })
       }
     } else {
        if (typeof value === 'object') {
          output.key = key;
          output.children = [];
          transform(value, undefined, output.children);
       } else {
          output.key = key;
          output.value = value;
       }
     }
  });
  return output;
}

console.log(transform(obj, {}));

Answered By - Aakash Garg