Re-arrange a Javascript array in a specific format

Question

Please note this not a duplicate Q.

I have a hard time figuring out the way to go from this JSON array, which is one level array and we can have the path of each obj or element in the "path" property

[
  {
    "name" : "a-1",
    "path" : "a-1",
    "parent": ""
  },
  {
    "name" : "a-2",
    "path" : "a-1>a-2",
    "parent": "a-1"
  },
  {
    "name" : "a-3",
    "path" : "a-1>a-2>a-3",
    "parent": "a-2"
  },
  {
    "name" : "a-4",
    "path" : "a-1>a-4",
    "parent": "a-1"
  },
  {
    "name" : "b-1",
    "path" : "b-1",
    "parent": ""
  }
]

The final result should be as it follow,

[
  {
    "attr": {
      "name": "a-1",
      "path": "a-1",
      "parent": ""
    },
    "children": [
      {
        "attr": {
          "name": "a-2",
          "path": "a-1>a-2",
          "parent": "a-1"
        },
        "children": [
          {
            "attr": {
              "name": "a-3",
              "path": "a-1>a-2>a-3",
              "parent": "a-2"
            }
          }
        ]
      },
      {
        "attr": {
          "name": "a-4",
          "path": "a-1>a-4",
          "parent": "a-1"
        }
      }
    ]
  },
  {
    "attr": {
      "name": "b-1",
      "path": "b-1",
      "parent": ""
    }
  }
]

I tried the to do so using the the parent with the Filter and find function

theOneLevelArray.filter((elt, idx, arr) => {
   let parent = arr.find(e => e.componentItemNumber === elt.parentItemNumber);
   if (!parent) return true;
          (parent.children = parent.children || []).push(elt);
});

I tried also using a loop then applying a reduce function after 'split(">")' the path element (the code is really messy for this method this is why I didn't paste)

It makes no sense to call `filter` and not use its return value. — T.J. Crowder, Feb 03 '18 at 12:19
Also, to solve your issue you don't need the `path` at all, just the `parent` — Roko C. Buljan, Feb 03 '18 at 12:20
@Andreas Yes, it's a valid JSON. Read the link your suggested carefully :) — Roko C. Buljan, Feb 03 '18 at 12:22
@RokoC.Buljan That's not [JSON](https://json.org). _"JSON is a textual, language-indepedent data-exchange format, much like XML, CSV or YAML."_ - [What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) — Andreas, Feb 03 '18 at 12:23
@Andreas happy learning than - What you're seeing above is a completely valid JSON format :) — Roko C. Buljan, Feb 03 '18 at 12:25
Amine, I just find it a bit strange that you want to get `[{"attr":{},"children":[]}]` instead of creating a parent-child tree based on the *name* (given it's unique) — Roko C. Buljan, Feb 03 '18 at 12:29
array is needed in exact format so it can much a component requirement that can't be modified — Amine Kacem, Feb 03 '18 at 13:45

Nina Scholz · Answer 1 · 2018-02-03T13:13:36.673

For using the given path, you could take an iterative approach by checking the given path and the temporary result.

This requires ordered data.

var data = [{ name: "a-1", path: "a-1", parent: "" }, { name: "a-2", path: "a-1>a-2", parent: "a-1" }, { name: "a-3", path: "a-1>a-2>a-3", parent: "a-2" }, { name: "a-4", path: "a-1>a-4", parent: "a-1" }, { name: "b-1", path: "b-1", parent: "" }],
    tree = [];

data.forEach(function (object) {
    object.path.split('>').reduce(function (level, key) {
        var temp = level.find(({ attr: { name } }) => key === name);
        if (!temp) {
            temp = { attr: object, children: [] };
            level.push(temp);
        }
        return temp.children;
    }, tree);
});

console.log(tree);

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

Another approach by using the parent property and a temporary obejct as reference to the object with the same name.

This works for unsorted data as well.

var data = [{ name: "a-1", path: "a-1", parent: "" }, { name: "a-2", path: "a-1>a-2", parent: "a-1" }, { name: "a-3", path: "a-1>a-2>a-3", parent: "a-2" }, { name: "a-4", path: "a-1>a-4", parent: "a-1" }, { name: "b-1", path: "b-1", parent: "" }],
    tree = function (data, root) {
        var r = [], o = {};
        data.forEach(function (attr) {
            var temp = { attr };
            if (o[attr.name] && o[attr.name].children) {
                temp.children = o[attr.name] && o[attr.name].children;
            }
            o[attr.name] = temp;
            if (attr.parent === root) {
                r.push(temp);
            } else {
                o[attr.parent] = o[attr.parent] || {};
                o[attr.parent].children = o[attr.parent].children || [];
                o[attr.parent].children.push(temp);
            }
        });
        return r;
    }(data, '');

console.log(tree);

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

Code will give incorrect result if order of json will change. As per this code it always need json to be sorted in parent to child order. — jigar gala, Feb 03 '18 at 12:46
right, it needs sorted parent child relation, as op has given. — Nina Scholz, Feb 03 '18 at 12:47

score 0 · Accepted Answer · answered Feb 03 '18 at 13:02

0

Simple recursive approach:

function getNodes(parentName) {
  const mapNode = (node) => {
    const children = getNodes(node.name);
    return children.length > 0 ?
      { attr: node, children } :
      { attr: node };
  };

  return source
     .filter(n => n.parent === parentName)
     .map(mapNode);
}

Invocation: getNodes('')

It's assumed that source is the original array.

answered Feb 03 '18 at 13:02

oryol

5,178
2
23
18

Why don't you pass `source` into the function? – Roko C. Buljan Feb 03 '18 at 13:32
We can pass it as parameter, yes. I just used it from outer closure. Actually, I tested this code in the node REPL, so, source was entered on the separate line. – oryol Feb 03 '18 at 17:23

Re-arrange a Javascript array in a specific format

2 Answers2