Tengo una variedad de categorías como:
var categories = [ { name: 'Books', slug: 'books', parent_name: null, }, { name: 'Fiction', slug: 'books/fiction', parent_name: 'Books' }, { name: 'Romance fiction', slug: 'books/fiction/romance', parent_name: 'Fiction' }, { name: 'Bags', slug: 'bags', parent_name: null } ];Quiero convertir esta matriz en una matriz/objeto anidado para poder representarlos en el menú desplegable (hasta dos niveles de menús desplegables). Pero no tengo ni idea de cómo hacerlo.
Algo como esto:
var nestedCatefories = [ { name: 'Books', slug: 'books', parent_name: null, children: [ { name: 'Fiction', slug: 'books/fiction', parent_name: 'books', children: [ { name: 'Romance', slug: 'books/fiction/romance', parent_name: 'Fiction' } ] } ] }, { name: 'Bags', slug: 'bags', parent_name: null } ];¿Cómo cambio esta matriz lineal a una matriz anidada?
¿Has intentado usar un Array.map() simple? Algo como esto:
var nestedArr = linearArr.map(obj=>obj.children= [{obj},{obj}])Reduzca la matriz a un mapa, con una matriz root predefinida. Para cada elemento nuevo, agréguelo al Mapa usando su name como clave. Luego obtenga/inicie la matriz de elementos children de los padres, o use root para los elementos sin padres. Agregue el elemento a su padre. Al final obtenga la root que sostiene todo el árbol:
const categories = [{"name":"Books","slug":"books","parent_name":null},{"name":"Fiction","slug":"books/fiction","parent_name":"Books"},{"name":"Romance fiction","slug":"books/fiction/romance","parent_name":"Fiction"},{"name":"Bags","slug":"bags","parent_name":null}]; const result = categories.reduce((acc, item) => { acc.set(item.name, item) const parent = item.parent_name === null ? acc.get('root') : (acc.get(item.parent_name).children ??= []) parent.push(item) return acc }, new Map([['root', []]])).get('root') console.log(result)