How can I convert an array of string arrays into an array of objects?

Question

I'm building myself an admin dashboard in NextJS 13, and I have been struggling with converting arrays using ES6 functions.

For instance, I have the following array:

["","1","Mobile Phones"], //corresponding to ParentID, ID, Name
["1","2","Apple"],
["1","3","Samsung"],
["","4","Tablets"],
["4","5","Huawei"],

How can I convert it to the below object array like the below?

[
  {
    id: 1,
    name: "Mobile Phones",
    children: [
      {
        id: 2,
        name: "Apple",
        children: [],
      },
      {
        id: 3,
        name: "Samsung",
        children: [],
      },
    ],
  },
  {
    id: 4,
    name: "Tablets",
    children: [
      {
        id: 5,
        name: "Huawei",
        children: [],
      },
    ],
  },
];

I have tried using array.map but I got the wrong result as shown below

[
  {
    id: 1,
    name: "Mobile Phones",
    children: [],
  },
  {
    id: 2,
    name: "Apple",
    children: [],
  },

  {
    id: 3,
    name: "Samsung",
    children: [],
  },
  {
    id: 4,
    name: "Tablets",
    children: [],
  },
  {
    id: 5,
    name: "Huawei",
    children: [],
  },
];

Is your array always in order (parents appear before their children)? — Nick Parsons, Jul 22 '23 at 08:52
Does this answer your question? [Build tree array from flat array in javascript](https://stackoverflow.com/questions/18017869/build-tree-array-from-flat-array-in-javascript) — pilchard, Jul 22 '23 at 09:08
Plenty of array-to-tree duplicates; it doesn't matter if you have a 2D array or an array of objects. — pilchard, Jul 22 '23 at 09:09
or [Build a Tree from Flat Array](https://stackoverflow.com/questions/73412307/build-a-tree-from-flat-array) or [Building tree array of objects from flat array of objects](https://stackoverflow.com/questions/46847573/building-tree-array-of-objects-from-flat-array-of-objects) — pilchard, Jul 22 '23 at 09:11

Ahmar · Accepted Answer · 2023-07-22T11:05:40.440

Create a map of non empty parentID to object. Then push the top level objects in the result array.

function buildObjectFromArray(arr) 
{
  const map = new Map();

  // Create a map of parent IDs to their respective objects
  for (const [parentId, id, name] of arr) {
    map.set(id, { id: parseInt(id), name, children: [] });
    if (parentId !== "") {
      const parent = map.get(parentId);
      parent.children.push(map.get(id));
    }
  }

  // Find the top-level objects (ParentID === "")
  const result = [];
  for (const [parentId, id, name] of arr) {
    if (parentId === "") {
      result.push(map.get(id));
    }
  }

  return result;
}



const objArr = buildObjectFromArray(
  [
    ["", "1", "Mobile Phones"],
    ["1", "2", "Apple"],
    ["1", "3", "Samsung"],
    ["", "4", "Tablets"],
    ["4", "5", "Huawei"],
    ["", "6", "X"],
    ["6", "7", "Y"],
    ["7", "8", "Z"],
]);

console.log(objArr);

Note: This solution assumes that the parent is declared before its children in the input.

How can I convert an array of string arrays into an array of objects?

1 Answers1