javascript - how to improve this function that converts a flat array into a tree?

Question

I have this function that converts a flat array to a tree based on a path property.

This is my data :

  const input = [
    {"name":"brussels_district_north","path":"Brussels/Brussels CBD/North"},
    {"name":"brussels_district_louise","path":"Brussels/Brussels CBD/Louise"},
    {"name":"brussels_district_west","path":"Brussels/Brussels Decentralised/West"},
    {"name":"brussels_district_léopold","path":"Brussels/Brussels CBD/Léopold"},
    {"name":"brussels_district_airport","path":"Brussels/Brussels Periphery/Airport"},
    {"name":"brussels_district_ring","path":"Brussels/Brussels Periphery/Ring"},
    {"name":"brussels_district_walloon-brabant","path":"Brussels/Brussels Decentralised/Walloon Brabant"},
    {"name":"brussels_district_centrum","path":"Brussels/Brussels CBD/Centre"},
    {"name":"brussels_district_midi","path":"Brussels/Brussels CBD/Midi"},
    {"name":"brussels_district_south","path":"Brussels/Brussels Decentralised/South"},
    {"name":"brussels_district_ north_east","path":"Brussels/Brussels Decentralised/North East"},
  ]

Then the "transform" function :

  const output = [];

  //make a tree out of this data
  input.reduce((r, item) => {
    item.path.split(/(?=/)/).reduce((o, _, i, p) => {
      o.children = o.children || [];
      var path = p.slice(0, i + 1).join('');
      var pathLast = path.match(/([^/]*)/*$/)[1] //list item of path splitted with '/'
      var temp = o.children.find(o => o.path === path);
      if (!temp) {
          o.children.push(temp = { path });
      }
      return temp;
    }, r);
    return r;
  }, { children: output });

  console.log(output);

Which give me this :

[
  {
    "path":"Brussels",
    "children":[
      {
        "path":"Brussels/Brussels CBD",
        "children":[
          {
            "path":"Brussels/Brussels CBD/North"
          },
          {
            "path":"Brussels/Brussels CBD/Louise"
          },
          {
            "path":"Brussels/Brussels CBD/Léopold"
          },
          {
            "path":"Brussels/Brussels CBD/Centre"
          },
          {
            "path":"Brussels/Brussels CBD/Midi"
          }
        ]
      },
      {
        "path":"Brussels/Brussels Decentralised",
        "children":
        [
          {
            "path":"Brussels/Brussels Decentralised/West"
          },
          {
            "path":"Brussels/Brussels Decentralised/Walloon Brabant"
          },
          {
            "path":"Brussels/Brussels Decentralised/South"
          },
          {
            "path":"Brussels/Brussels Decentralised/North East"
          }
        ]
      },
      {
        "path":"Brussels/Brussels Periphery",
        "children":
        [
          {
            "path":"Brussels/Brussels Periphery/Airport"
          },
          {
            "path":"Brussels/Brussels Periphery/Ring"
          }
        ]
      }
    ]
  }
]

That is nice !

But the output only has the path attribute, while I would like to keep the other ones (actually, there is only another name attribute here but I will have more), so I rather want this :

[
  {
    "path":"Brussels",
    "children":[
      {
        "path":"Brussels/Brussels CBD",
        "children":[
          {
            "path":"Brussels/Brussels CBD/North",
            "name":"brussels_district_north"
          },
          {
            "path":"Brussels/Brussels CBD/Louise",
            "name":"brussels_district_louise"
          },
          {
            "path":"Brussels/Brussels CBD/Léopold",
            "name":"brussels_district_léopold"
          },
          {
            "path":"Brussels/Brussels CBD/Centre",
            "name":"brussels_district_centrum"
          },
          {
            "path":"Brussels/Brussels CBD/Midi",
            "name":"brussels_district_midi"
          }
        ]
      },
      {
        "path":"Brussels/Brussels Decentralised",
        "children":
        [
          {
            "path":"Brussels/Brussels Decentralised/West",
            "name":"brussels_district_west"
          },
          {
            "path":"Brussels/Brussels Decentralised/Walloon Brabant",
            "name":"brussels_district_walloon-brabant"
          },
          {
            "path":"Brussels/Brussels Decentralised/South",
            "name":"brussels_district_south"
          },
          {
            "path":"Brussels/Brussels Decentralised/North East",
            "name":"brussels_district_ north_east"
          }
        ]
      },
      {
        "path":"Brussels/Brussels Periphery",
        "children":
        [
          {
            "path":"Brussels/Brussels Periphery/Airport",
            "name":"brussels_district_airport"
          },
          {
            "path":"Brussels/Brussels Periphery/Ring",
            "name":"brussels_district_ring"
          }
        ]
      }
    ]
  }
]

How could I edit my function to achieve this ?

Thanks

question from:https://stackoverflow.com/questions/65909368/how-to-improve-this-function-that-converts-a-flat-array-into-a-tree

Answer 1

You could check if the index plus one is equal to the length of the splitted path and add name.

const
    input = [{ name: "brussels_district_north", path: "Brussels/Brussels CBD/North" }, { name: "brussels_district_louise", path: "Brussels/Brussels CBD/Louise" }, { name: "brussels_district_west", path: "Brussels/Brussels Decentralised/West" }, { name: "brussels_district_léopold", path: "Brussels/Brussels CBD/Léopold" }, { name: "brussels_district_airport", path: "Brussels/Brussels Periphery/Airport" }, { name: "brussels_district_ring", path: "Brussels/Brussels Periphery/Ring" }, { name: "brussels_district_walloon-brabant", path: "Brussels/Brussels Decentralised/Walloon Brabant" }, { name: "brussels_district_centrum", path: "Brussels/Brussels CBD/Centre" }, { name: "brussels_district_midi", path: "Brussels/Brussels CBD/Midi" }, { name: "brussels_district_south", path: "Brussels/Brussels Decentralised/South" }, { name: "brussels_district_ north_east", path: "Brussels/Brussels Decentralised/North East" }],
    output = [];

input.reduce((r, item) => {
    item.path.split(/(?=/)/).reduce((o, _, i, p) => {
        o.children = o.children || [];
        var path = p.slice(0, i + 1).join('');
        var temp = o.children.find(o => o.path === path);
        if (!temp) {
            o.children.push(temp = { path });
            if (i + 1 === p.length) temp.name = item.name;
        }
        return temp;
    }, r);
    return r;
}, { children: output });

console.log(output);

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