扁平化数组树js

Question

Can you help me please to flat this tree? I have tried a few things and it didn't work. I would like to get the fastest way(Algorithm).

const source = [
  {
    item: { id: 1, name: "item name", code: "1d4g4" },
    children: [
      {
        item: { id: 2, name: "item name 2", code: "1d4g4" },
        children: [
          {
            item: { id: 2, name: "item name 2", code: "1d4g4" },
            children: [
              {
                item: { id: 3, name: "item name 2", code: "1d4g4" },
                children: [
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];

This is result that i expect to have:

  { id: 1, name: 'item name', code: '1d4g4' },
  { id: 2, name: 'item name 2', code: '1d4g4' },
  { id: 2, name: 'item name 2', code: '1d4g4' },
  { id: 3, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' }
]```

Answer 1

You could take Array#flatMap and a callback which calls itself.

 const flat = ({ item, children = [] }) => [item, ...children.flatMap(flat)], data = [{ item: { id: 1, name: "item name", code: "1d4g4" }, children: [{ item: { id: 2, name: "item name 2", code: "1d4g4" }, children: [{ item: { id: 2, name: "item name 2", code: "1d4g4" }, children: [{ item: { id: 3, name: "item name 2", code: "1d4g4" }, children: [{ item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] }, { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] }, { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] }] }] }] }] }], result = data.flatMap(flat); console.log(result);

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

Answer 2

After fixing your syntax to be actually valid JavaScript, you'll need a recursive function:

function flatten(destArray, nodeList) {
  nodeList.forEach((node) => {
    destArray.push(node.item);
    flatten(destArray, node.children || []);
  });
}

const source = [
  {
    item: { id: 1, name: "item name", code: "1d4g4" },
    children: [
      {
        item: { id: 2, name: "item name 2", code: "1d4g4" },
        children: [
          {
            item: { id: 2, name: "item name 2", code: "1d4g4" },
            children: [
              {
                item: { id: 3, name: "item name 2", code: "1d4g4" },
                children: [
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                  { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];

const dest = [];
flatten(dest, source);
console.log(dest);

outputs

[
  { id: 1, name: 'item name', code: '1d4g4' },
  { id: 2, name: 'item name 2', code: '1d4g4' },
  { id: 2, name: 'item name 2', code: '1d4g4' },
  { id: 3, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' },
  { id: 4, name: 'item name 2', code: '1d4g4' }
]

Answer 3

You could write an internal visit method to handle traversing the tree and adding items to an internal results list.

Note: Make sure your JS/JSON data is structured correctly.

 const tree = [{ item: {id: 1, name: "item name", code: "1d4g4"}, children: [{ item: {id: 2, name: "item name 2", code: "1d4g4"}, children: [{ item: {id: 2, name: "item name 2", code: "1d4g4"}, children: [{ item: {id: 3, name: "item name 2", code: "1d4g4"}, children:[ {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []}, {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []}, {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []}, ] }] }] }] }]; const treeToList = (tree, results = []) => { const visit = ({ item, children = [] }, res) => { if (item) res.push(item); children.forEach(child => visit(child, res)); } visit({ children: tree }, results); return results; } console.log(treeToList(tree));

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

Answer 4

 const flatten = (data) => data.map(({ children }) => ([...flatten(children)]));

Your current code does traverse the whole tree, but never actually extracts item from the data. Another issue is that you currently use map , which means the resulting value will always have the same amount of elements as the initial array. Use flatMap to increase or reduce the amount of elements in the array.

Changing your code as little as possible it might look like this:

const flatten = (data) => data.flatMap(({item, children}) => ([item, ...flatten(children)]));

 const flatten = (data) => data.flatMap(({item, children}) => ([item, ...flatten(children)])); const data = [{ item: {id: 1, name: "item name", code: "1d4g4"}, children: [{ item: {id: 2, name: "item name 2", code: "1d4g4"}, children: [{ item: {id: 2, name: "item name 2", code: "1d4g4"}, children: [{ item: {id: 3, name: "item name 2", code: "1d4g4"}, children:[ {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []}, {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []}, {item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []}, ] }] }] }] }]; console.log(flatten(data));