Tengo un objeto anidado que necesito iterar. El objeto se ve así:
{ "Page1": { "path": "/page1" }, "Page2": { "path": "/account/menu/page1" }, "Page3": { "items": { "Subpage1": { "path": "/account/menu/subpage1" }, "Subpage2": { "path": "/account/menu/subpage2" }, "Subpage3": { "path": "/account/menu/subpage3" } } }, "Page4": { "items": { "Subpage4": { "path": "/account/menu/subpage4" }, "Subpage5": { "path": "/account/menu/subpage5" }, ...Necesito obtener el nombre de la subpágina específica, según la ruta del usuario.
Por ejemplo. Si el usuario está en la página /account/menu/subpage2 . Necesito obtener el nombre Subpage2 .
Lo que hice es lo siguiente:
const currentPageName = getPageName(this.props?.match?.params.menu); //This function gets the name of the current page (Subpage2) const getThePageName = = path => Object.keys(jsonData).find(el => jsonData[el]?.items && jsonData[el]?.items[currentPageName]?.path === path) console.log("getThePageName", getThePageName("/account/menu/subpage2"))); El resultado de lo anterior es Page3 , pero necesito que sea Subpage2 . ¿Qué estoy haciendo mal y cómo solucionarlo?
Concepto
Repita todas las entradas de datos y verifique si la ruta de cualquiera de estas páginas es igual a la ruta de destino especificada. También dentro del ciclo, itere a través de todas las subpáginas de las páginas y, nuevamente, verifique si la ruta de cualquiera de estas subpáginas es igual a la ruta de destino especificada. Si se encuentra una coincidencia, devuelva el resultado como la clave del objeto de la ruta.
Código
const data = {"Page1":{"path":"/page1"},"Page2":{"path":"/account/menu/page1"},"Page3":{"items":{"Subpage1":{"path":"/account/menu/subpage1"},"Subpage2":{"path":"/account/menu/subpage2"},"Subpage3":{"path":"/account/menu/subpage3"}}},"Page4":{"items":{"Subpage4":{"path":"/account/menu/subpage4"},"Subpage5":{"path":"/account/menu/subpage5"}}}}; function findPage(data,target){ let result; Object.entries(data).forEach(page => { if (page[1].path === target) result = page[0]; if (page[1].items){ Object.entries(page[1].items).forEach(subpage => { if (subpage[1].path === target) result = subpage[0]; }); } }); return result; } console.log(findPage(data,"/account/menu/subpage2")); console.log(findPage(data,"/page1"));La solución que utiliza la recursividad puede funcionar con un nivel más profundo de "subpáginas".
const data = { "Page1": { "path": "/page1" }, "Page2": { "path": "/account/menu/page1" }, "Page3": { "items": { "Subpage1": { "path": "/account/menu/subpage1" }, "Subpage2": { "path": "/account/menu/subpage2" }, "Subpage3": { "path": "/account/menu/subpage3" } } }, "Page4": { "items": { "Subpage4": { "path": "/account/menu/subpage4" }, "Subpage5": { "path": "/account/menu/subpage5" }, "Subpage6": { "items": { "Subsubpage1": { "path": "/secret" } } } } } }; function getPageNameForPath(data, path) { for (const pageName in data) { if (data[pageName].path != null) { if (data[pageName].path === path) { return pageName; } } else { const found = getPageNameForPath(data[pageName].items, path); if (found) { return found; } } } } console.log(getPageNameForPath(data, '/account/menu/subpage2')); console.log(getPageNameForPath(data, '/account/menu/page1')); console.log(getPageNameForPath(data, '/secret'));aquí hay una pieza de código
const jsonData = { "Page1": { "path": "/page1" }, "Page2": { "path": "/account/menu/page1" }, "Page3": { "items": { "Subpage1": { "path": "/account/menu/subpage1" }, "Subpage2": { "path": "/account/menu/subpage2" }, "Subpage3": { "path": "/account/menu/subpage3" } } }, "Page4": { "items": { "Subpage4": { "path": "/account/menu/subpage4" }, "Subpage5": { "path": "/account/menu/subpage5" }, } } }; const currentPageName = 'Subpage2'; const getThePageName = path => Object.keys(jsonData).reduce((acc, el) => { if (acc?.length) { return acc; } if (jsonData[el].hasOwnProperty('items')) { if (jsonData[el]?.items?.[currentPageName]?.path === path) { console.log(path, jsonData[el]?.items?.[currentPageName]?.path) acc = currentPageName; } } else { if (jsonData[el].path === path) { console.log(path, jsonData[el].path, path) acc = el; } } return acc; }, undefined); console.log("getThePageName", getThePageName("/account/menu/subpage2"));