Transforming a typical JSON file into a parent-child hierarchical JSON structure similar to the one utilized in d3's flare.json file format

Question

Transforming a typical JSON file into a parent-child hierarchical JSON structure similar to the one utilized in d3's flare.json file format

My JSON file has a specific structure:

{
    "a": "b",
    "c": "d",
    "e": {
      "f": "g",
      "h": "i"
    }
  }

I want to transform it into the following structure:

{
    "name": "Root",
    "parent": "null",
    "children": [
      {
        "name": "a",
        "parent": "Root",
        "children": [
          {
            "name": "b",
            "parent": "a"
          }
        ]
      },
      {
        "name": "c",
        "parent": "Root",
        "children": [
          {
            "name": "d",
            "parent": "d"
          }
        ]
      },
      {
        "name": "e",
        "parent": "Root",
        "children": [
          {
             "name": "f",
             "parent": "e",
             "children": [
               {
                  "name": "g",
                  "parent": "f"
                },
                {
                  "name": "h",
                  "parent": "e",
                  "children": [
                     {
                       "name": "i",
                       "parent": "h"
                     }
                ]
              }
            ]
          }
        ]
      }
    ]
  }

To create a collapsible-tree diagram, I need a clear parent-children hierarchy relationship in my JSON file. Apologies for any issues with the indentation.

javascript json typescript

Answer 1

Answer №1

If you want to achieve the desired style using the Root element, one approach is to implement a recursive solution that involves an object and a parent value.

In order to obtain the expected format with the Root element, you must provide a new object that adheres to the same structure as the inner objects within the given data.

{
    Root: data[0]
}

const
    getObjects = (o, parent) =>
        o && typeof o === 'object'
            ? Object.entries(o).map(([name, v]) => ({ name, parent, children: getObjects(v, name) }))
            : [{ name: o, parent }];

var data = [{ a: "b", c: "d", e: { f: "g", h: "i" } }],
    result = getObjects({ Root: data[0] }, 'null');

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

If you want to achieve the desired style using the Root element, one approach is to implement a recursive solution that involves an object and a parent value.

In order to obtain the expected format with the Root element, you must provide a new object that adheres to the same structure as the inner objects within the given data.

{
    Root: data[0]
}

const
    getObjects = (o, parent) =>
        o && typeof o === 'object'
            ? Object.entries(o).map(([name, v]) => ({ name, parent, children: getObjects(v, name) }))
            : [{ name: o, parent }];

var data = [{ a: "b", c: "d", e: { f: "g", h: "i" } }],
    result = getObjects({ Root: data[0] }, 'null');

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

Consider the following approach:

const treeify = (orig) => Object.entries(orig).map(
  ([k, v]) => (Object.assign({name: k}, typeof v == 'object'
    ? {children: treeify(v)} 
    : {children: {name: v}}
  ))
)
const convert = (orig) => ({name: 'Root', children: treeify(orig)})

const orig = {"a": "b", "c": "d", "e": {"f": "g", "h": "i"}}

console.log(convert(orig))

treeify is responsible for the main processing, while convert serves as a simple wrapper that introduces the Root node. It's worth noting that this implementation doesn't involve creating parent nodes, as indicated in the comments.

Revision

After reviewing Nina Scholz's concise answer, which incorporates parent nodes (despite my initial assumption of its complexity), I propose an alternative version that also includes them. Although the absence of parents was acceptable, I find this updated version of convert preferable:

const treeify = (orig, parent) => Object.entries(orig).map(
  ([k, v]) => (Object.assign({name: k, parent}, typeof v == 'object' 
    ? {children: treeify(v, k)} 
    : {children: {name: v, parent: k}}
  ))
)

const convert = (orig) => treeify({Root: orig}, 'null')[0]

const orig = {"a": "b", "c": "d", "e": {"f": "g", "h": "i"}}
console.log(convert(orig))

Answer 4

Consider the following approach:

const treeify = (orig) => Object.entries(orig).map(
  ([k, v]) => (Object.assign({name: k}, typeof v == 'object'
    ? {children: treeify(v)} 
    : {children: {name: v}}
  ))
)
const convert = (orig) => ({name: 'Root', children: treeify(orig)})

const orig = {"a": "b", "c": "d", "e": {"f": "g", "h": "i"}}

console.log(convert(orig))

treeify is responsible for the main processing, while convert serves as a simple wrapper that introduces the Root node. It's worth noting that this implementation doesn't involve creating parent nodes, as indicated in the comments.

Revision

After reviewing Nina Scholz's concise answer, which incorporates parent nodes (despite my initial assumption of its complexity), I propose an alternative version that also includes them. Although the absence of parents was acceptable, I find this updated version of convert preferable:

const treeify = (orig, parent) => Object.entries(orig).map(
  ([k, v]) => (Object.assign({name: k, parent}, typeof v == 'object' 
    ? {children: treeify(v, k)} 
    : {children: {name: v, parent: k}}
  ))
)

const convert = (orig) => treeify({Root: orig}, 'null')[0]

const orig = {"a": "b", "c": "d", "e": {"f": "g", "h": "i"}}
console.log(convert(orig))

Transforming a typical JSON file into a parent-child hierarchical JSON structure similar to the one utilized in d3's flare.json file format

Answer №1

Answer №2

Revision

Similar questions

encountering difficulties when trying to install npm packages in node.js

Combining one item from an Array Class into a new array using Typescript

Converting Java String to JSONObject in Android: Troubleshooting JSONP issue

substitute a component with a different one if it is present

React's useEffect delay instability

Storing Python Query Results: Best Practices

Expanding the size of the number input in Twitter Bootstrap to accommodate changing content dimensions

Mastering the art of properly connecting Angular HttpPromise

Is there a way to create a list of languages spoken using Angular?

Managing the state of forms using NGRX and @Effects

The code below is not working as it should be to redirect to the home page after logging in using Angular. Follow these steps to troubleshoot and properly

Plunker fails to run simple AngularJS demo

Issues with the Winston transport for Loggly are causing inconsistent performance

Angular2: Ensuring Sequential Execution Line by Line - A Comprehensive Guide

There seems to be an issue with the accurate calculation of the screen width while utilizing the scrollbar-gutter

How can I use an HTML button to activate a function that inserts text into a read-only text-box?

Styling the content within Template Strings is not supported by VSCode

Wordpress tabs with dynamic content

Are you struggling to differentiate between a JSON array and a JSON object?

Leveraging trustAsHTML with an array of object elements