如何改进这个将平面数组转换为树的 function？

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

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; }