Creé un componente que visualiza un objeto donde los objetos anidados y de matriz son contraíbles.
Funciona recorriendo todas las claves/índices y utilizando la función de representación adecuada. En este momento, las acciones de colapso y extensión están basadas puramente en la clase CSS.
El problema que tengo ahora es que necesito hacerlo para que el estado colapsado/extendido persista. Entonces, básicamente, necesito una forma de almacenar la información del estado colapsado. y leerlo más adelante. No estoy muy seguro de cómo empezar.
El estado debe persistir incluso cuando se modifica el objeto. Entonces, cuando se empuja un nuevo elemento en el medio de la matriz, aún debería abrir lo mismo. ¿Qué estructura de datos debo usar para esto y cómo lo leería?
La razón por la que no estoy publicando ningún código es que no creo que sea necesario, estoy puramente interesado en cómo se deben estructurar los datos para el estado colapsado/extendido de una matriz/objeto para que persista cuando se realizan actualizaciones en el objeto/matriz.
Intenté hacer algún tipo de "migas de pan" que sigan la estructura del objeto, pero luego me di cuenta de que no persistirá cuando se realicen cambios.
¿Algunas ideas? ¿Es esto posible sin algunas identificaciones únicas codificadas?
Edición 1: el punto 4 no es óptimo y se puede hacer mejor: después de terminar de representar el objeto principal en el DOM, recorra el objeto de estado y para cada ruta, busque el nodo DOM y expándalo.
Edición 2: en lugar de 'index1.nestedIndex2[1].nestedIndex3', puede hacer 'index1.nestedIndex2.1.nestedIndex3', hace que su código sea más simple
Edición 3: no es necesario usar lodash (punto editado 1)
Espero haber entendido bien tu escenario.
Para conservar el estado expandido (o colapsado), debe:
{'index1.nestedIndex2[1].nestedIndex3': true} . Puede hacer esto al hacer clic para expandir. Por supuesto, esto significa que debe conocer el índice actual y sus padres cuando hace clic; una forma de hacerlo es tener un atributo DOM que contenga el índice, en cada elemento. Entonces, cuando hace clic en un nodo para subir recursivamente hasta llegar al elemento superior y construir esa ruta de cadenaJSON.stringify y guárdelo en localStorage ( https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ). localStorage.set('expandedState', JSON.stringify(stateObject)) . Si necesita almacenar el estado de varios objetos de datos, debe usar alguna clave específica en lugar de 'estado expandido'JSON.parse