Transform the dynamic JSON format into a key-value pair structure with nested children nodes

Question

Transform the dynamic JSON format into a key-value pair structure with nested children nodes

Looking to convert a dynamic JSON structure into a tree node:

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

Desired tree node structure:

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

Example of the expected output:

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

Looking for a recursive approach to efficiently parse and build the tree structure from the JSON provided.

javascript arrays json angular typescript

Answer 1

Answer №1

const videoInfo = {
  "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 generateNestedStructure(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
          });
          generateNestedStructure(value, undefined, child)
       } else {
          children.push({
             'key': key,
             value
          })
       }
     } else {
        if (typeof value === 'object') {
          output.key = key;
          output.children = [];
          generateNestedStructure(value, undefined, output.children);
       } else {
          output.key = key;
          output.value = value;
        }
     }
  });
  return output;
}

console.log(generateNestedStructure(videoInfo, {}));

Answer 2

const videoInfo = {
  "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 generateNestedStructure(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
          });
          generateNestedStructure(value, undefined, child)
       } else {
          children.push({
             'key': key,
             value
          })
       }
     } else {
        if (typeof value === 'object') {
          output.key = key;
          output.children = [];
          generateNestedStructure(value, undefined, output.children);
       } else {
          output.key = key;
          output.value = value;
        }
     }
  });
  return output;
}

console.log(generateNestedStructure(videoInfo, {}));

Answer 3

Answer №2

const DATA = {
    "name": "John",
    "age": 30,
    "city": "New York",
    "job": "Developer"
};

const isObject = (obj) => obj !== null && typeof obj === 'object';

const Process = (data, isNested) => {
    const output = isNested ? [] : {};

    if (data && isObject(data)) {
        Object.keys(data).forEach(key => {
            const value = data[key];
            const val = isObject(value) ? Process(value, true) : value;
            const valueKey = isObject(value) ? "nestedValues" : "singleValue";

            if (isNested) {
                output.push({
                    "key": key,
                    [valueKey]: val
                });
            } else {
                output.key = key;
                output[valueKey] = val;
            }
        })
    }

    return output;
}

const result = Process(DATA);
console.log(JSON.stringify(result, null, 2));

Answer 4

const DATA = {
    "name": "John",
    "age": 30,
    "city": "New York",
    "job": "Developer"
};

const isObject = (obj) => obj !== null && typeof obj === 'object';

const Process = (data, isNested) => {
    const output = isNested ? [] : {};

    if (data && isObject(data)) {
        Object.keys(data).forEach(key => {
            const value = data[key];
            const val = isObject(value) ? Process(value, true) : value;
            const valueKey = isObject(value) ? "nestedValues" : "singleValue";

            if (isNested) {
                output.push({
                    "key": key,
                    [valueKey]: val
                });
            } else {
                output.key = key;
                output[valueKey] = val;
            }
        })
    }

    return output;
}

const result = Process(DATA);
console.log(JSON.stringify(result, null, 2));

Transform the dynamic JSON format into a key-value pair structure with nested children nodes

Answer №1

Answer №2

Similar questions

Exploring the process of reading a file from a specified file path within a text area using jQuery

jQuery - can you identify which specific object from the entire set this is?

Angular nested lists with drag and drop functionality

Showing a group of users in real-time as they connect using Socket IO

Ways to retrieve the current state within a function after invoking the setState method

Struggling with updating the background color of multiple HTML elements with the same class in real-time

Authentication with Laravel and Vue.js

Creating an interface and setting a default value

How should a JavaScript object be properly formatted?

Display overlay objects specifically focused around the mouse cursor, regardless of its position on the screen

Using PM2 to Manage Your PHP Scripts in Cluster Mode

The dropdown menu in AngularJS is unable to retrieve the selected index

There seems to be a glitch in the JavaScript to-do list as it is failing to append new

Python Code: Iterate through each column/row appropriately and calculate the difference in value between two CSV files

Ways to narrow down const types

When transferring an object from a blade template to a Vue component through props, it may become undefined

Major processing glitch detected in JSON and PHP data handling

Adding Intellisense functionality to my IDE: A step-by-step guide

The jQuery function for $(window).scroll is not functioning as expected

Is it possible to make changes to dynamically inserted HTML using jQuery.ajax?