{}のフラット配列をツリーのような構造に変換する2つのヘルパー関数があるとしましょう。次のフラットデータを検討してください。
const data = [
{
"ID": 1,
"Tier_1": "DataSource1",
"Tier_2": "Area",
"Tier_3": "General",
},
{
"ID": 2,
"Tier_1": "DataSource1",
"Tier_2": "Financial",
"Tier_3": "General",
},
{
"ID": 3,
"Tier_1": "DataSource1",
"Tier_2": "Area",
"Tier_3": "General",
},
{
"ID": 4,
"Tier_1": "DataSource2",
"Tier_2": "Area",
"Tier_3": "General",
},
{
"ID": 5,
"Tier_1": "DataSource2",
"Tier_2": "Area",
"Tier_3": "Management Plan",
}
]
データには、次のようなツリーのような構造に変換したい3行の階層情報が含まれています(期待される出力)。
(最後の子は実際のDBオブジェクトですが、ツリーに分散されています)
const output = {
"DataSource1: {
"Area": {
{
"ID": 1,
"Tier_1": "DataSource1",
"Tier_2": "Area",
"Tier_3": "General",
},
{
"ID": 3,
"Tier_1": "DataSource1",
"Tier_2": "Area",
"Tier_3": "General",
},
},
"Financial": [
{
"ID": 2,
"Tier_1": "DataSource1",
"Tier_2": "Financial",
"Tier_3": "General",
},
]
},
"DataSource2: {
"Area": [
{
"ID": 4,
"Tier_1": "DataSource2",
"Tier_2": "Area",
"Tier_3": "General",
},
{
"ID": 5,
"Tier_1": "DataSource2",
"Tier_2": "Area",
"Tier_3": "Management Plan",
}
]
}
}
}
私は実際にこれを達成するための関数を作成することができましたが、それらはそれほど柔軟ではありません(各関数名に記載されている深さ/暗さは固定されています)
2次元ツリーを返す関数:
const getDataCategoriesTwoDim = (data, mainCategory) => {
const dataFields = [...data];
let map = {};
for (let i = 0; i < dataFields.length; i += 1) {
const currentField = dataFields[i];
const currentCategory = currentField[mainCategory];
if (!map[currentCategory]) {
map[currentCategory] = [];
}
map[currentCategory].push(currentField);
}
return map;
};
3次元ツリーを返す関数:
const getDataCategoriesThreeDim = (data, mainCategory, subCategory) => { // DIFF
const dataFields = [...data];
let map = {};
for (let i = 0; i < dataFields.length; i += 1) {
const currentField = dataFields[i];
const currentCategory = currentField[mainCategory];
const currentSubcategory = currentField[subCategory]; // DIFF
if (!map[currentCategory]) {
map[currentCategory] = {}; /DIFF
}
if (!map[currentCategory][currentSubcategory]) { // DIFF
map[currentCategory][currentSubcategory] = []; // DIFF
} // DIFF
map[currentCategory][currentSubcategory].push(currentField); // DIFF
}
return map;
};
このように両方を呼び出して、期待される結果を得ることができます。
getDataCategoriesTwoDim(data, 'Tier_2');
getDataCategoriesThreeDim(data, 'Tier_2', 'Tier_3');
ご覧のとおり、コードの繰り返しとコピー&ペーストが非常に多くなっています。コメントの違いをマークしました。コードを1つの関数に書き直して、2、3、またはそれ以上の次元を設定するにはどうすればよいですか?
プロパティをネストするためのキーを取得し、オブジェクトの代わりに最後のキーの配列を追加することができます。後でオブジェクトをネストされた配列にプッシュします。
const
groupBy = (data, keys) => data.reduce((r, o) => {
keys
.reduce((p, k, i, a) =>
p[o[k]] = p[o[k]] || (i + 1 === a.length ? [] : {}), r)
.push(o);
return r;
}, Object.create(null)),
data = [{ ID: 1, Tier_1: "DataSource1", Tier_2: "Area", Tier_3: "General" }, { ID: 2, Tier_1: "DataSource1", Tier_2: "Financial", Tier_3: "General" }, { ID: 3, Tier_1: "DataSource1", Tier_2: "Area", Tier_3: "General" }, { ID: 4, Tier_1: "DataSource2", Tier_2: "Area", Tier_3: "General" }, { ID: 5, Tier_1: "DataSource2", Tier_2: "Area", Tier_3: "Management Plan" }],
result1 = groupBy(data, ["Tier_1", "Tier_2"]),
result2 = groupBy(data, ["Tier_1", "Tier_2", "Tier_3"]);
console.log(result1);
console.log(result2);
.as-console-wrapper { max-height: 100% !important; top: 0; }
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加