使用 JavaScript 将嵌套的 Json 树转换为对象的 JSON 数组

Question

I have a API which return JSON tree format in parent/child relation based on "ParentId" in each object. Below is the example of JSON

[
{
  "label": "search me",
  "value": "searchme",
  "children": [
    {
      "label": "search me too",
      "value": "searchmetoo",
      "children": [
        {
          "label": "No one can get me",
          "value": "anonymous"
        }
      ]
    }
  ]
},
{
  "label": "search me2",
  "value": "searchme2",
  "children": [
    {
      "label": "search me too2",
      "value": "searchmetoo2",
      "children": [
        {
          "label": "No one can get me2",
          "value": "anonymous2"
        }
      ]
    }
  ]
}
]

Which need to be converted into array of object where each object will represent the node element, with a unique primary key,Where "parentid" is null it will be root nodes and other will be child node of their parent node.

the final array of objects as bellow

[
  {
    DIAGID: 1,
    DIAGNOSIS: "Certain infectious or parasitic diseases ",
    DIAGTYPE: "Chapter",
    PARENTID: null,
  },
  {
    DIAGID: 2,
    DIAGNOSIS: "Gastroenteritis or colitis of infectious origin  ",
    DIAGTYPE: "Section",
    PARENTID: 1,
  },
  {
    DIAGID: 3,
    DIAGNOSIS: "Bacterial intestinal infections",
    DIAGTYPE: "Category",
    PARENTID: 2,
  },
]

Answer 1

You could take a recursive method for Array#flatMap and store parent for the next call.

 const flatTree = (parent = null) => ({ children = [], ...object }) => [ { ...object, parent }, ...children.flatMap(flatTree(object.id)) ], tree = [{ id: 0, label: 'search me', value: 'searchme', children: [{ id: 1, label: 'search me too', value: 'searchmetoo', children: [{ id: 2, label: 'No one can get me', value: 'anonymous' }] }] }], flat = tree.flatMap(flatTree()); console.log(flat);

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

Answer 2

Assuming you will be getting data as array of objects. A simpler and understandable recursive function

 const data = [{ label: 'search me', value: 'searchme', children: [{ label: 'No one can get me1', value: 'anonymous', }, { label: 'search me too', value: 'searchmetoo', children: [{ label: 'No one can get me', value: 'anonymous', }, ], }, ], }] let final_data = []; let index = 1; let parentID = 1; let pushInFinal = (root, parent) => { root.forEach((item) => { final_data.push({ "DIAGID": index, "DIAGNOSIS": item.label, "DIAGTYPE": item.value, "PARENTID": parent, }, ) if (item.hasOwnProperty('children')) { parentID = index++; pushInFinal(item.children, parentID) } }) } pushInFinal(data, null) console.log(final_data)

Answer 3

Here is a recursive function dfs that performs a pre-order traversal through the input tree, and passes along a counter that feeds the id property that will be used in the output. Also the current node's id is passed as parentId to the recursive call:

 const dfs = ({children=[], ...node}, counter={id: 1}, parentId=null) => [{ ...node, id: counter.id++, parentId}].concat( children.flatMap(child => dfs(child, counter, node.id)) ); const response = {"label":"search me","value":"searchme","children":[{"label":"search me too","value":"searchmetoo","children":[{"label":"No one can get me","value":"anonymous"}]}]}; const result = dfs(response); console.log(result);

Answer 4

I was going to say a recursive tree walk is all you need, but you do do the same thing easily with a generator:

function *visitNodes( root, parent = null, id = 0 ) {
  
  const node = {
    ...root,
    id : ++id,
    parentId = parent ? parent.id : null
  };
  delete node.children;
  
  yield node;
  
  for (const child of root.children) {
    yield *visitNodes(child, node, id);
  }
  
}

Having defined the generator, you can either iterate over the nodes:

for (const node of visitNodes( tree ) ) {
  // do something useful with node here
}

You can convert it into a list easily, either with the spread operator:

const nodes  = [...visitNodes(tree)];

or by using Array.from() :

const nodes = Array.from( visitNodes(tree) );

Answer 5

A single recursively implemented collecting reduce er functionality does the job.

It utilizes a collector object as the reduce method's 2nd argument (and the reducer's initial value). The collector 's result array collects any item. And count gets incremented constantly and assigned as a collected item's DIAGID whereas parentId gets updated as needed in order to always reflect the current recursive call stack thus an item's corresponding (and correct) PARENTID ...

 function collectAndMapNestedItemRecursively(collector, item) { let { count = 0, parentId = null, result } = collector; const { label, value, children } = item; result.push({ "DIAGID": ++count, "DIAGNOSIS": label, "DIAGTYPE": value, "PARENTID": parentId, }); if (Array.isArray(children)) { count = children.reduce( collectAndMapNestedItemRecursively, { count, parentId: count, result } ).count; } return { count, parentId, result }; } const sampleData = [{ "label": "FOO", "value": "foo", "children": [{ "label": "FOO BAR", "value": "fooBar", "children": [{ "label": "FOO BAR BAZ", "value": "fooBarBaz", }], }, { "label": "FOO BIZ", "value": "fooBiz", "children": [{ "label": "FOO BIZ BUZ", "value": "fooBizBuz", }], }], }, { "label": "BAR", "value": "bar", "children": [{ "label": "BAR BAZ", "value": "barBaz", "children": [{ "label": "BAR BAZ BIZ", "value": "barBazBiz", }], }, { "label": "BAR BUZ", "value": "barBuz", "children": [{ "label": "BAR BUZ BOZ", "value": "barBuzBoz", }], }], }]; console.log( sampleData.reduce( collectAndMapNestedItemRecursively, { result: [] }, ).result );

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