将混淆代码转换为递归函数
Convert confuse code into Recursive function
我有一个构建 Select 组件的函数，使用一个包含名为“服务类别”的对象的数组，我们可以（或不）拥有一个子项数组，这些子项将带有一个新的“服务类别”（具有相同结构的子类别）。
实际上我有这段代码（丑陋但有效的代码）
function buildMenu() {
setIsLoading(true);
const newOptions = [];
categories.map((category) => {
const newCategory = {
...category,
csslevel: 0,
};
newOptions.push(newCategory);
const { children } = newCategory;
if (Array.isArray(children)) {
children.map((child) => {
const newChildren = {
...child,
csslevel: 2,
};
newOptions.push(newChildren);
if (Array.isArray(newChildren.children)) {
const subchildl1 = newChildren.children;
subchildl1.map((subchild2) => {
const newSubchild2 = {
...subchild2,
csslevel: 5,
};
newOptions.push(newSubchild2);
if (Array.isArray(newSubchild2.children)) {
const subchild3 = newSubchild2.children;
subchild3.map((subchildl4) => {
const newSubchild4 = {
...subchildl4,
csslevel: 7,
};
newOptions.push(newSubchild4);
if (Array.isArray(newSubchild4.children)) {
const subchild5 = newSubchild4.children;
subchild5.map((subchild6) => {
const newSubchild6 = {
...subchild6,
csslevel: 9,
};
newOptions.push(newSubchild6);
if (Array.isArray(newSubchild6.children)) {
const subchildl7 = newSubchild6.children;
subchildl7.map((subchildl8) => {
const newSubchild8 = {
...subchildl8,
csslevel: 11,
};
newOptions.push(newSubchild8);
if (Array.isArray(newSubchild8.children)) {
const subchildl9 = newSubchild8.children;
subchildl9.map((subchildl10) => {
const newSubchild10 = {
...subchildl10,
csslevel: 13,
};
newOptions.push(newSubchild8);
});
}
});
}
});
}
});
}
});
}
});
}
setOptions(newOptions);
});
setIsLoading(false);
}
基本上，我需要一个 Select 组件 (ReactJS/Material-ui) 来呈现此类别及其各自的子类别。
请注意，像子类别一样，是一个带有子类别的类别，子类别中可以有无限个子类别，如下例所示：
[
{
...categoryInfo,
children: [
{
...subcategoryInfo,
children: [
{
...yesAnewSubcategory,
children: [...]
}
]
},
{
...subcategoryInfo,
}
]
}
]
它确实构建了一个带有选项的 Select 组件，我需要在 select 中显示所有内容，但空格表示这是其他 category/subcategory 的子类别。
但是，我知道，在某些时候，这将达到 Array.isArray(child) 内的 Array.isArray(child) 的限制。
编辑：
此数据来自 api 请求。我想使用一个递归来构建一个新数组，其中每个 category/subcategory 在数组的同一级别，但 cssLevel 为子类别的每个级别递增。
{
"data": [
{
"id": 34,
"name": "Serviços Premium",
"slug": "servicos-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 4,
"aasm_state": "enabled",
"system_code": 100042,
"business_id": 3,
"parent_id": null,
"parents_count": 0,
"parents": [null],
"date_last_sync": null,
"children": [
{
"id": 35,
"name": "Cats Premium",
"slug": "cats-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 5,
"aasm_state": "enabled",
"system_code": 100043,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [
{
"id": 36,
"name": "Cats Premium Male",
"slug": "cats-premium-male",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 6,
"aasm_state": "enabled",
"system_code": 100044,
"business_id": 3,
"parent_id": 35,
"parents_count": 1,
"parents": [{ "id": 35, "name": "Cats Premium" }, null],
"date_last_sync": null,
"children": [
{
"id": 37,
"name": "Cats Premium Female",
"slug": "cats-premium-female",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 7,
"aasm_state": "enabled",
"system_code": 100045,
"business_id": 3,
"parent_id": 36,
"parents_count": 1,
"parents": [{ "id": 36, "name": "Cats Premium Male" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Cats Premium Male > Cats Premium Female"
}
],
"chain_name": "Cats Premium > Cats Premium Male"
},
{
"id": 38,
"name": "Cats Diamond",
"slug": "cats-diamond",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 8,
"aasm_state": "enabled",
"system_code": 100046,
"business_id": 3,
"parent_id": 35,
"parents_count": 1,
"parents": [{ "id": 35, "name": "Cats Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Cats Premium > Cats Diamond"
},
{
"id": 45,
"name": "Subcategoria de Cats Premium",
"slug": "subcategoria-de-cats-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 15,
"aasm_state": "enabled",
"system_code": 100053,
"business_id": 3,
"parent_id": 35,
"parents_count": 1,
"parents": [{ "id": 35, "name": "Cats Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Cats Premium > Subcategoria de Cats Premium"
}
],
"chain_name": "Serviços Premium > Cats Premium"
},
{
"id": 39,
"name": "Dogs Diamond",
"slug": "dogs-diamond",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 9,
"aasm_state": "enabled",
"system_code": 100047,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Serviços Premium > Dogs Diamond"
},
{
"id": 40,
"name": "Dogs Premium",
"slug": "dogs-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 10,
"aasm_state": "enabled",
"system_code": 100048,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [
{
"id": 41,
"name": "Banho Dogs Premium",
"slug": "banho-dogs-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 11,
"aasm_state": "enabled",
"system_code": 100049,
"business_id": 3,
"parent_id": 40,
"parents_count": 1,
"parents": [{ "id": 40, "name": "Dogs Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Dogs Premium > Banho Dogs Premium"
}
],
"chain_name": "Serviços Premium > Dogs Premium"
},
{
"id": 43,
"name": "Consulta Veterinária",
"slug": "consulta-veterinaria",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 13,
"aasm_state": "enabled",
"system_code": 100051,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Serviços Premium > Consulta Veterinária"
},
{
"id": 44,
"name": "PetCare",
"slug": "petcare",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 14,
"aasm_state": "enabled",
"system_code": 100052,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Serviços Premium > PetCare"
}
],
"chain_name": "Serviços Premium"
},
{
"id": 3,
"name": "Teste 002 edit",
"slug": "teste-002",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 3,
"aasm_state": "enabled",
"system_code": 100011,
"business_id": 3,
"parent_id": null,
"parents_count": 0,
"parents": [null],
"date_last_sync": null,
"children": [
{
"id": 42,
"name": "Um novo teste",
"slug": "um-novo-teste",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 12,
"aasm_state": "enabled",
"system_code": 100050,
"business_id": 3,
"parent_id": 3,
"parents_count": 1,
"parents": [{ "id": 3, "name": "Teste 002 edit" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Teste 002 edit > Um novo teste"
}
],
"chain_name": "Teste 002 edit"
}
]
}
谁能帮帮我？
谢谢！
对于每个选项组，您可以调用 getOptions 函数，该函数 returns 父类别选项（具有 name 和 csslevel 属性）并使用 Array.prototype.flatMap 映射子数组，递归调用 getOptions 函数并展平结果，返回数组中的父项和子项选项。
const data = [ { "id": 34, "name": "Serviços Premium", "slug": "servicos-premium", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 4, "aasm_state": "enabled", "system_code": 100042, "business_id": 3, "parent_id": null, "parents_count": 0, "parents": [null], "date_last_sync": null, "children": [ { "id": 35, "name": "Cats Premium", "slug": "cats-premium", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 5, "aasm_state": "enabled", "system_code": 100043, "business_id": 3, "parent_id": 34, "parents_count": 1, "parents": [{ "id": 34, "name": "Serviços Premium" }, null], "date_last_sync": null, "children": [ { "id": 36, "name": "Cats Premium Male", "slug": "cats-premium-male", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 6, "aasm_state": "enabled", "system_code": 100044, "business_id": 3, "parent_id": 35, "parents_count": 1, "parents": [{ "id": 35, "name": "Cats Premium" }, null], "date_last_sync": null, "children": [ { "id": 37, "name": "Cats Premium Female", "slug": "cats-premium-female", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 7, "aasm_state": "enabled", "system_code": 100045, "business_id": 3, "parent_id": 36, "parents_count": 1, "parents": [{ "id": 36, "name": "Cats Premium Male" }, null], "date_last_sync": null, "children": [], "chain_name": "Cats Premium Male > Cats Premium Female" } ], "chain_name": "Cats Premium > Cats Premium Male" }, { "id": 38, "name": "Cats Diamond", "slug": "cats-diamond", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 8, "aasm_state": "enabled", "system_code": 100046, "business_id": 3, "parent_id": 35, "parents_count": 1, "parents": [{ "id": 35, "name": "Cats Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Cats Premium > Cats Diamond" }, { "id": 45, "name": "Subcategoria de Cats Premium", "slug": "subcategoria-de-cats-premium", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 15, "aasm_state": "enabled", "system_code": 100053, "business_id": 3, "parent_id": 35, "parents_count": 1, "parents": [{ "id": 35, "name": "Cats Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Cats Premium > Subcategoria de Cats Premium" } ], "chain_name": "Serviços Premium > Cats Premium" }, { "id": 39, "name": "Dogs Diamond", "slug": "dogs-diamond", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 9, "aasm_state": "enabled", "system_code": 100047, "business_id": 3, "parent_id": 34, "parents_count": 1, "parents": [{ "id": 34, "name": "Serviços Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Serviços Premium > Dogs Diamond" }, { "id": 40, "name": "Dogs Premium", "slug": "dogs-premium", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 10, "aasm_state": "enabled", "system_code": 100048, "business_id": 3, "parent_id": 34, "parents_count": 1, "parents": [{ "id": 34, "name": "Serviços Premium" }, null], "date_last_sync": null, "children": [ { "id": 41, "name": "Banho Dogs Premium", "slug": "banho-dogs-premium", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 11, "aasm_state": "enabled", "system_code": 100049, "business_id": 3, "parent_id": 40, "parents_count": 1, "parents": [{ "id": 40, "name": "Dogs Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Dogs Premium > Banho Dogs Premium" } ], "chain_name": "Serviços Premium > Dogs Premium" }, { "id": 43, "name": "Consulta Veterinária", "slug": "consulta-veterinaria", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 13, "aasm_state": "enabled", "system_code": 100051, "business_id": 3, "parent_id": 34, "parents_count": 1, "parents": [{ "id": 34, "name": "Serviços Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Serviços Premium > Consulta Veterinária" }, { "id": 44, "name": "PetCare", "slug": "petcare", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 14, "aasm_state": "enabled", "system_code": 100052, "business_id": 3, "parent_id": 34, "parents_count": 1, "parents": [{ "id": 34, "name": "Serviços Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Serviços Premium > PetCare" } ], "chain_name": "Serviços Premium" }, { "id": 3, "name": "Teste 002 edit", "slug": "teste-002", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 3, "aasm_state": "enabled", "system_code": 100011, "business_id": 3, "parent_id": null, "parents_count": 0, "parents": [null], "date_last_sync": null, "children": [ { "id": 42, "name": "Um novo teste", "slug": "um-novo-teste", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 12, "aasm_state": "enabled", "system_code": 100050, "business_id": 3, "parent_id": 3, "parents_count": 1, "parents": [{ "id": 3, "name": "Teste 002 edit" }, null], "date_last_sync": null, "children": [], "chain_name": "Teste 002 edit > Um novo teste" } ], "chain_name": "Teste 002 edit" } ]
const getOptions = ({ name, children = [], spacing = 0 }) => [
{ name, csslevel: spacing },
...children.flatMap((child) =>
getOptions({ ...child, spacing: spacing + 2 })
),
]
const options = data.flatMap(getOptions)
console.log(options)
我有一个构建 Select 组件的函数，使用一个包含名为“服务类别”的对象的数组，我们可以（或不）拥有一个子项数组，这些子项将带有一个新的“服务类别”（具有相同结构的子类别）。 实际上我有这段代码（丑陋但有效的代码）
function buildMenu() {
setIsLoading(true);
const newOptions = [];
categories.map((category) => {
const newCategory = {
...category,
csslevel: 0,
};
newOptions.push(newCategory);
const { children } = newCategory;
if (Array.isArray(children)) {
children.map((child) => {
const newChildren = {
...child,
csslevel: 2,
};
newOptions.push(newChildren);
if (Array.isArray(newChildren.children)) {
const subchildl1 = newChildren.children;
subchildl1.map((subchild2) => {
const newSubchild2 = {
...subchild2,
csslevel: 5,
};
newOptions.push(newSubchild2);
if (Array.isArray(newSubchild2.children)) {
const subchild3 = newSubchild2.children;
subchild3.map((subchildl4) => {
const newSubchild4 = {
...subchildl4,
csslevel: 7,
};
newOptions.push(newSubchild4);
if (Array.isArray(newSubchild4.children)) {
const subchild5 = newSubchild4.children;
subchild5.map((subchild6) => {
const newSubchild6 = {
...subchild6,
csslevel: 9,
};
newOptions.push(newSubchild6);
if (Array.isArray(newSubchild6.children)) {
const subchildl7 = newSubchild6.children;
subchildl7.map((subchildl8) => {
const newSubchild8 = {
...subchildl8,
csslevel: 11,
};
newOptions.push(newSubchild8);
if (Array.isArray(newSubchild8.children)) {
const subchildl9 = newSubchild8.children;
subchildl9.map((subchildl10) => {
const newSubchild10 = {
...subchildl10,
csslevel: 13,
};
newOptions.push(newSubchild8);
});
}
});
}
});
}
});
}
});
}
});
}
setOptions(newOptions);
});
setIsLoading(false);
}
基本上，我需要一个 Select 组件 (ReactJS/Material-ui) 来呈现此类别及其各自的子类别。
请注意，像子类别一样，是一个带有子类别的类别，子类别中可以有无限个子类别，如下例所示：
[
{
...categoryInfo,
children: [
{
...subcategoryInfo,
children: [
{
...yesAnewSubcategory,
children: [...]
}
]
},
{
...subcategoryInfo,
}
]
}
]
它确实构建了一个带有选项的 Select 组件，我需要在 select 中显示所有内容，但空格表示这是其他 category/subcategory 的子类别。 但是，我知道，在某些时候，这将达到 Array.isArray(child) 内的 Array.isArray(child) 的限制。
编辑： 此数据来自 api 请求。我想使用一个递归来构建一个新数组，其中每个 category/subcategory 在数组的同一级别，但 cssLevel 为子类别的每个级别递增。
{
"data": [
{
"id": 34,
"name": "Serviços Premium",
"slug": "servicos-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 4,
"aasm_state": "enabled",
"system_code": 100042,
"business_id": 3,
"parent_id": null,
"parents_count": 0,
"parents": [null],
"date_last_sync": null,
"children": [
{
"id": 35,
"name": "Cats Premium",
"slug": "cats-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 5,
"aasm_state": "enabled",
"system_code": 100043,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [
{
"id": 36,
"name": "Cats Premium Male",
"slug": "cats-premium-male",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 6,
"aasm_state": "enabled",
"system_code": 100044,
"business_id": 3,
"parent_id": 35,
"parents_count": 1,
"parents": [{ "id": 35, "name": "Cats Premium" }, null],
"date_last_sync": null,
"children": [
{
"id": 37,
"name": "Cats Premium Female",
"slug": "cats-premium-female",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 7,
"aasm_state": "enabled",
"system_code": 100045,
"business_id": 3,
"parent_id": 36,
"parents_count": 1,
"parents": [{ "id": 36, "name": "Cats Premium Male" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Cats Premium Male > Cats Premium Female"
}
],
"chain_name": "Cats Premium > Cats Premium Male"
},
{
"id": 38,
"name": "Cats Diamond",
"slug": "cats-diamond",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 8,
"aasm_state": "enabled",
"system_code": 100046,
"business_id": 3,
"parent_id": 35,
"parents_count": 1,
"parents": [{ "id": 35, "name": "Cats Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Cats Premium > Cats Diamond"
},
{
"id": 45,
"name": "Subcategoria de Cats Premium",
"slug": "subcategoria-de-cats-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 15,
"aasm_state": "enabled",
"system_code": 100053,
"business_id": 3,
"parent_id": 35,
"parents_count": 1,
"parents": [{ "id": 35, "name": "Cats Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Cats Premium > Subcategoria de Cats Premium"
}
],
"chain_name": "Serviços Premium > Cats Premium"
},
{
"id": 39,
"name": "Dogs Diamond",
"slug": "dogs-diamond",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 9,
"aasm_state": "enabled",
"system_code": 100047,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Serviços Premium > Dogs Diamond"
},
{
"id": 40,
"name": "Dogs Premium",
"slug": "dogs-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 10,
"aasm_state": "enabled",
"system_code": 100048,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [
{
"id": 41,
"name": "Banho Dogs Premium",
"slug": "banho-dogs-premium",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 11,
"aasm_state": "enabled",
"system_code": 100049,
"business_id": 3,
"parent_id": 40,
"parents_count": 1,
"parents": [{ "id": 40, "name": "Dogs Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Dogs Premium > Banho Dogs Premium"
}
],
"chain_name": "Serviços Premium > Dogs Premium"
},
{
"id": 43,
"name": "Consulta Veterinária",
"slug": "consulta-veterinaria",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 13,
"aasm_state": "enabled",
"system_code": 100051,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Serviços Premium > Consulta Veterinária"
},
{
"id": 44,
"name": "PetCare",
"slug": "petcare",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 14,
"aasm_state": "enabled",
"system_code": 100052,
"business_id": 3,
"parent_id": 34,
"parents_count": 1,
"parents": [{ "id": 34, "name": "Serviços Premium" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Serviços Premium > PetCare"
}
],
"chain_name": "Serviços Premium"
},
{
"id": 3,
"name": "Teste 002 edit",
"slug": "teste-002",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 3,
"aasm_state": "enabled",
"system_code": 100011,
"business_id": 3,
"parent_id": null,
"parents_count": 0,
"parents": [null],
"date_last_sync": null,
"children": [
{
"id": 42,
"name": "Um novo teste",
"slug": "um-novo-teste",
"cover_image": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"cover_image_cache": null,
"icon": {
"url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png",
"mobile_thumb": {
"url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png"
}
},
"icon_cache": null,
"html_class_name": null,
"position": 12,
"aasm_state": "enabled",
"system_code": 100050,
"business_id": 3,
"parent_id": 3,
"parents_count": 1,
"parents": [{ "id": 3, "name": "Teste 002 edit" }, null],
"date_last_sync": null,
"children": [],
"chain_name": "Teste 002 edit > Um novo teste"
}
],
"chain_name": "Teste 002 edit"
}
]
}
谁能帮帮我？ 谢谢！
对于每个选项组，您可以调用 getOptions 函数，该函数 returns 父类别选项（具有 name 和 csslevel 属性）并使用 Array.prototype.flatMap 映射子数组，递归调用 getOptions 函数并展平结果，返回数组中的父项和子项选项。
const data = [ { "id": 34, "name": "Serviços Premium", "slug": "servicos-premium", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 4, "aasm_state": "enabled", "system_code": 100042, "business_id": 3, "parent_id": null, "parents_count": 0, "parents": [null], "date_last_sync": null, "children": [ { "id": 35, "name": "Cats Premium", "slug": "cats-premium", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 5, "aasm_state": "enabled", "system_code": 100043, "business_id": 3, "parent_id": 34, "parents_count": 1, "parents": [{ "id": 34, "name": "Serviços Premium" }, null], "date_last_sync": null, "children": [ { "id": 36, "name": "Cats Premium Male", "slug": "cats-premium-male", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 6, "aasm_state": "enabled", "system_code": 100044, "business_id": 3, "parent_id": 35, "parents_count": 1, "parents": [{ "id": 35, "name": "Cats Premium" }, null], "date_last_sync": null, "children": [ { "id": 37, "name": "Cats Premium Female", "slug": "cats-premium-female", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 7, "aasm_state": "enabled", "system_code": 100045, "business_id": 3, "parent_id": 36, "parents_count": 1, "parents": [{ "id": 36, "name": "Cats Premium Male" }, null], "date_last_sync": null, "children": [], "chain_name": "Cats Premium Male > Cats Premium Female" } ], "chain_name": "Cats Premium > Cats Premium Male" }, { "id": 38, "name": "Cats Diamond", "slug": "cats-diamond", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 8, "aasm_state": "enabled", "system_code": 100046, "business_id": 3, "parent_id": 35, "parents_count": 1, "parents": [{ "id": 35, "name": "Cats Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Cats Premium > Cats Diamond" }, { "id": 45, "name": "Subcategoria de Cats Premium", "slug": "subcategoria-de-cats-premium", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 15, "aasm_state": "enabled", "system_code": 100053, "business_id": 3, "parent_id": 35, "parents_count": 1, "parents": [{ "id": 35, "name": "Cats Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Cats Premium > Subcategoria de Cats Premium" } ], "chain_name": "Serviços Premium > Cats Premium" }, { "id": 39, "name": "Dogs Diamond", "slug": "dogs-diamond", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 9, "aasm_state": "enabled", "system_code": 100047, "business_id": 3, "parent_id": 34, "parents_count": 1, "parents": [{ "id": 34, "name": "Serviços Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Serviços Premium > Dogs Diamond" }, { "id": 40, "name": "Dogs Premium", "slug": "dogs-premium", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 10, "aasm_state": "enabled", "system_code": 100048, "business_id": 3, "parent_id": 34, "parents_count": 1, "parents": [{ "id": 34, "name": "Serviços Premium" }, null], "date_last_sync": null, "children": [ { "id": 41, "name": "Banho Dogs Premium", "slug": "banho-dogs-premium", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 11, "aasm_state": "enabled", "system_code": 100049, "business_id": 3, "parent_id": 40, "parents_count": 1, "parents": [{ "id": 40, "name": "Dogs Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Dogs Premium > Banho Dogs Premium" } ], "chain_name": "Serviços Premium > Dogs Premium" }, { "id": 43, "name": "Consulta Veterinária", "slug": "consulta-veterinaria", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 13, "aasm_state": "enabled", "system_code": 100051, "business_id": 3, "parent_id": 34, "parents_count": 1, "parents": [{ "id": 34, "name": "Serviços Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Serviços Premium > Consulta Veterinária" }, { "id": 44, "name": "PetCare", "slug": "petcare", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 14, "aasm_state": "enabled", "system_code": 100052, "business_id": 3, "parent_id": 34, "parents_count": 1, "parents": [{ "id": 34, "name": "Serviços Premium" }, null], "date_last_sync": null, "children": [], "chain_name": "Serviços Premium > PetCare" } ], "chain_name": "Serviços Premium" }, { "id": 3, "name": "Teste 002 edit", "slug": "teste-002", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 3, "aasm_state": "enabled", "system_code": 100011, "business_id": 3, "parent_id": null, "parents_count": 0, "parents": [null], "date_last_sync": null, "children": [ { "id": 42, "name": "Um novo teste", "slug": "um-novo-teste", "cover_image": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "cover_image_cache": null, "icon": { "url": "https://cdn-sandbox.petbooking.com.br/assets/fallbacks/cover_image-a16120b79ad694c51ee09eabe2cd8ad8.png", "mobile_thumb": { "url": "https://cdn-sandbox.petbooking.com.br/fallbacks/cover_image_mobile_thumb.png" } }, "icon_cache": null, "html_class_name": null, "position": 12, "aasm_state": "enabled", "system_code": 100050, "business_id": 3, "parent_id": 3, "parents_count": 1, "parents": [{ "id": 3, "name": "Teste 002 edit" }, null], "date_last_sync": null, "children": [], "chain_name": "Teste 002 edit > Um novo teste" } ], "chain_name": "Teste 002 edit" } ]
const getOptions = ({ name, children = [], spacing = 0 }) => [
{ name, csslevel: spacing },
...children.flatMap((child) =>
getOptions({ ...child, spacing: spacing + 2 })
),
]
const options = data.flatMap(getOptions)
console.log(options)