javascript - Converting a regular json file to a parent-child hierarchical json as used by d3 flare.json

Question

I have a json file with the following structure:

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

I would like it to have 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"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }

I would like to have a parent-children hierarchy relationship so that it would be easier to draw a collapsible-tree diagram with nodes.Please forgive if the indentation is not proper.

Answer 1

You could use a recursive approach by using the object and a parent value.

For getting the wanted style with Root element, you need to hand over a new object which follows the same building rule than the inner objects of 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; }