i have a function that build a Select component, using an array with objects called "Service categories" inside this, we can (or not) have an array of child items that will come with a new "service category" (a subcategory with the same structure). Actually i have this code (ugly, but working code)
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);
}
basically, i need for a Select component (ReactJS/Material-ui) that renders this Categories and his respective subcategories.
Note that, like a subcategory, is a category with child, and we can have infinite subcategories inside subcategories, something like example below:
[
{
...categoryInfo,
children: [
{
...subcategoryInfo,
children: [
{
...yesAnewSubcategory,
children: [...]
}
]
},
{
...subcategoryInfo,
}
]
}
]
It really build a Select component with the options, i need to show all in a select, but with spaces indicating for this is a subcategory of other category/subcategory. But, i know, that, in some time, this will reach the limit of Array.isArray(child) inside Array.isArray(child).
EDIT: this data comes from api request. I want to use a recursion that builds a new Array with each category/subcategory, at the same level in the array, but with the cssLevel incremented for each level of subcategory.
{
"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"
}
]
}
Anyone can help me? Thanks!
For each option group, you can call the getOptions function which returns the parent category option (with the name and csslevel properties) and uses Array.prototype.flatMap to map over the children array, recursively calling the getOptions function and flattening the result, returning the parent and children options in an array.
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)