從動態嵌套陣列生成物件的平面陣列-有解無憂

我有像下面這樣的物件陣列。這里的子元素可能嵌套很深，也可能包含其他子元素。

let response = [{
  id: 4321,
  name: 'Education',
  parentId: null,
  children: [{
    id: 1234,
    name: 'category1',
    parentId: 4321,
    children: [{
      id: 8327548,
      name: '001',
      parentId: 1234,
    }, {
      id: 8327549,
      name: '002',
      parentId: 1234,
    }],
  }, {
    id: 6786,
    name: 'Associations',
    parentId: 4321,
  }, {
    id: 8262439,
    name: 'category1',
    parentId: 4321,
  }, {
    id: 8245,
    name: 'Rights',
    parentId: 4321,
    children: [{
      id: 2447,
      name: 'Organizations',
      parentId: 8245,
    }, {
      id: 9525,
      name: 'Services',
      parentId: 8245,
    }, {
      id: 8448,
      name: 'Organizations',
      parentId: 8245,
    }],
  }, {
    id: 8262446,
    name: 'Women\'s Rights',
    parentId: 4321,
  }],
}, {
  id: 21610,
  name: 'Agriculture',
  parentId: null,
  children: [{
    id: 3302,
    name: 'categoryABC',
    parentId: 21610,
    children: [{
      id: 85379,
      name: 'categoryABC - General',
      parentId: 3302,
    }, {
      id: 85380,
      name: 'categoryABC Technology',
      parentId: 3302,
    }],
  }, {
    id: 8303,
    name: 'Fungicides',
    parentId: 21610,
    children: [{
      id: 8503,
      name: 'Fungicides - General',
      parentId: 8303,
    }],
  }],
}];

我想使它成為物件的平面陣列，但我想將父名稱（其 parentId 為空）添加到相應父物件中的每個物件。

預期輸出：

[
  {
      id: 8327548,
      name: "001",
      parentId: 1234
      mainParent: "Education"
  }, {
      id: 8327549,
      name: "002",
      parentId: 1234,
      mainParent: "Agriculture"
  },
  // ...OTHER OBJECTS....
]

到目前為止我所做的

function flat(array) {
  var result = [];
  array.forEach(function (a) {
    result.push(a);
    if (Array.isArray(a.children)) {
      result = result.concat(flat(a.children));
      delete a.children;
    }
  });
  return result;
}

它提供了物件的平面陣列，但我無法為每個物件添加父名稱屬性。

有人可以幫幫我嗎？

uj5u.com熱心網友回復：

您可以采用遞回方法將第一個發現name為的切換mainParent。

const
    flat = mainParent => o => o.children
        ? o.children.flatMap(flat(mainParent || o.name))
        : { ...o, mainParent },
    response = [{ id: 4321, name: "Education", parentId: null, children: [{ id: 1234, name: "category1", parentId: 4321, children: [{ id: 8327548, name: "001", parentId: 1234 }, { id: 8327549, name: "002", parentId: 1234 }] }, { id: 6786, name: "Associations", parentId: 4321 }, { id: 8262439, name: "category1", parentId: 4321 }, { id: 8245, name: "Rights", parentId: 4321, children: [{ id: 2447, name: "Organizations", parentId: 8245 }, { id: 9525, name: "Services", parentId: 8245 }, { id: 8448, name: "Organizations", parentId: 8245 }] }, { id: 8262446, name: "Women's Rights", parentId: 4321 }] }, { id: 21610, name: "Agriculture", parentId: null, children: [{ id: 3302, name: "categoryABC", parentId: 21610, children: [{ id: 85379, name: "categoryABC - General", parentId: 3302 }, { id: 85380, name: "categoryABC Technology", parentId: 3302 }] }, { id: 8303, name: "Fungicides", parentId: 21610, children: [{ id: 8503, name: "Fungicides - General", parentId: 8303 }] }] }],
    result = response.flatMap(flat());

console.log(result);

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

uj5u.com熱心網友回復：

這是一個相當干凈的遞回，當children節點中沒有時停止。我們捕獲name沿層次結構找到的第一個值并執行它。

const flat = (xs, name = null) => 
  xs .flatMap (x => x .children 
    ? flat (x .children, name || x .name)
    : [{...x, mainParent: name}]
  )

const response = [{id: 4321, name: "Education", parentId: null, children: [{id: 1234, name: "category1", parentId: 4321, children: [{id: 8327548, name: "001", parentId: 1234}, {id: 8327549, name: "002", parentId: 1234}]}, {id: 6786, name: "Associations", parentId: 4321}, {id: 8262439, name: "category1", parentId: 4321}, {id: 8245, name: "Rights", parentId: 4321, children: [{id: 2447, name: "Organizations", parentId: 8245}, {id: 9525, name: "Services", parentId: 8245}, {id: 8448, name: "Organizations", parentId: 8245}]}, {id: 8262446, name: "Women's Rights", parentId: 4321}]}, {id: 21610, name: "Agriculture", parentId: null, children: [{id: 3302, name: "categoryABC", parentId: 21610, children: [{id: 85379, name: "categoryABC - General", parentId: 3302}, {id: 85380, name: "categoryABC Technology", parentId: 3302}]}, {id: 8303, name: "Fungicides", parentId: 21610, children: [{id: 8503, name: "Fungicides - General", parentId: 8303}]}]}]

console .log (flat (response))

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

uj5u.com熱心網友回復：

不那么晦澀，但仍然相當簡潔。

const response = [{ id: 4321, name: 'Education', parentId: null, children: [{ id: 1234, name: 'category1', parentId: 4321, children: [{ id: 8327548, name: '001', parentId: 1234 }, { id: 8327549, name: '002', parentId: 1234 }] }, { id: 6786, name: 'Associations', parentId: 4321 }, { id: 8262439, name: 'category1', parentId: 4321 }, { id: 8245, name: 'Rights', parentId: 4321, children: [{ id: 2447, name: 'Organizations', parentId: 8245 }, { id: 9525, name: 'Services', parentId: 8245 }, { id: 8448, name: 'Organizations', parentId: 8245 }] }, { id: 8262446, name: 'Women\'s Rights', parentId: 4321 }] }, { id: 21610, name: 'Agriculture', parentId: null, children: [{ id: 3302, name: 'categoryABC', parentId: 21610, children: [{ id: 85379, name: 'categoryABC - General', parentId: 3302 }, { id: 85380, name: 'categoryABC Technology', parentId: 3302 }] }, { id: 8303, name: 'Fungicides', parentId: 21610, children: [{ id: 8503, name: 'Fungicides - General', parentId: 8303 }] }] }];

function flatten(arr, mainParent = null) {
  if (!arr) return;

  let result = [];
  for (const obj of arr) {
    result.push(...(flatten(obj.children, mainParent ?? obj.name) ?? [{ ...obj, mainParent }]));
  }

  return result;
}

console.log(flatten(response));

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

uj5u.com熱心網友回復：

一個可能的解決方案可以完全基于一個單一的，雖然是遞回實作的reduce任務，其中累積和遞回傳遞的物件攜帶資訊、mainParent值和遞回收集的最終result......

function recursivelyReassambleAndCollectChildlessItems(
  { mainParent, result }, { children, ...item }
) {
  result = result.concat(children && children.reduce(

    recursivelyReassambleAndCollectChildlessItems, {
      // was:
      // mainParent: mainParent ?? item.name,
      /**
       *  OP quote:
       *    "... but I want to add parent name 
       *     (which parentId is null) to every
       *     objects inside that respective parent."
       */
      mainParent: item.parentId === null ? item.name : mainParent,
      result: [],
    }
  ).result || { mainParent, ...item });
  
  return { mainParent, result };
}

const response = [{
  id: 4321,
  name: 'Education',
  parentId: null,
  children: [{
    id: 1234,
    name: 'category1',
    parentId: 4321,
    children: [{
      id: 8327548,
      name: '001',
      parentId: 1234,
    }, {
      id: 8327549,
      name: '002',
      parentId: 1234,
    }],
  }, {
    id: 6786,
    name: 'Associations',
    parentId: 4321,
  }, {
    id: 8262439,
    name: 'category1',
    parentId: 4321,
  }, {
    id: 8245,
    name: 'Rights',
    parentId: 4321,
    children: [{
      id: 2447,
      name: 'Organizations',
      parentId: 8245,
    }, {
      id: 9525,
      name: 'Services',
      parentId: 8245,
    }, {
      id: 8448,
      name: 'Organizations',
      parentId: 8245,
    }],
  }, {
    id: 8262446,
    name: 'Women\'s Rights',
    parentId: 4321,
  }],
}, {
  id: 21610,
  name: 'Agriculture',
  parentId: null,
  children: [{
    id: 3302,
    name: 'categoryABC',
    parentId: 21610,
    children: [{
      id: 85379,
      name: 'categoryABC - General',
      parentId: 3302,
    }, {
      id: 85380,
      name: 'categoryABC Technology',
      parentId: 3302,
    }],
  }, {
    id: 8303,
    name: 'Fungicides',
    parentId: 21610,
    children: [{
      id: 8503,
      name: 'Fungicides - General',
      parentId: 8303,
    }],
  }],
}];

console.log(response
  .reduce(recursivelyReassambleAndCollectChildlessItems, { result: [] })
  .result
)

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/334913.html

標籤：javascript 数组递归映射嵌套列表

上一篇：使用遞回js查找樹狀物件（不是二叉樹）的最低共同祖先

下一篇：使用SpringWebFlux構建遞回資料結構