Solución encontrada | Explicación
Importante:
Es importante que lea los comentarios, porque allí se explican los detalles del código.
Lamentablemente, no se puede parsear un objeto con referencia circular por medio de la función JSON.stringify
. Sin embargo, investigando un poco, pude encontrar una solución bastante interesante.
Para empezar, dejo primero la solución ejecutable del problema para explicarlo más abajo.
/**
* Objeto de ejemplo
*/
const object = {
a: 'Primer valor',
b: 'Segundo valor',
m: 'Otro valor',
z: {
ciencia: 'Valor de la ciencia',
content: {
id: 1,
name: 'Nombre del contenido',
ejecutable: function() {
console.log('Realizando pruebas')
}
}
},
ciencia: {
david: 'David Luna',
id: 10
},
ejecutable: function() {},
indefinido: undefined,
nulo: null,
a: new Set(),
// a: new AudioContext(),
number: 10,
array: [{
id: 1,
name: 'David Luna'
},
{
id: 2,
name: 'Francisco Luna'
},
]
};
object.array[0].reference = object;
object.array.push(object);
object.reference = object;
// Creando referencias circulares para realizar pruebas
object.c = object;
object.z.content.reference = object;
object.algo = "Cualquier contenido";
object.reference = object.z.content.reference
object.ciencia.reference = object;
object.copia = {
david: 'algo por acá'
}
const array = [{
id: 1,
name: 'david'
}];
object.l = {
array: array
}
object.nuevo = array;
class CircularReferences {
/**
* Objetos visitados
*
* @type { Array<Object<string, any> }
*/
static visited = [];
/**
* Permite establecer los tipos que se van a permitir en el objeto.
*
* @param { Array<string> } types - Tipos que se desea permitir en el objeto.
* @returns { Array<string> }
*/
static allowTypes(types) {
this.evalTypes(types);
const namesType = [];
types.forEach(type => {
const char = type[0];
const nameType = `[object ${char.toUpperCase()}${(type.slice(1)).toLowerCase()}]`;
namesType.push(nameType);
});
return namesType;
}
/**
* Elimina las referencias circulares de los objetos y marca los tipos que no están en la lista
* de permitidos.
*
* @param { Array|Object<string, any> } object Objeto al que se le eliminarán las referencias.
* @param { Array } visited
*/
static remove(object, visited = []) {
if (!this.isObject(object) && !this.isArray(object)) {
return;
}
if (visited.length < 1) {
visited.push(object);
}
const types = this.allowTypes([
'string', 'number', 'array', 'object'
]);
for (const property in object) {
const value = object[property];
const type = this.getType(value);
if (types.indexOf(type) === -1) {
object[property] = type;
continue;
}
if (!this.isArray(value) && !this.isObject(value)) {
continue;
}
if (this.hasVisited(visited, value)) {
object[property] = '[Circular Reference]';
continue;
}
visited.push(value);
this.remove(value, visited);
}
}
/**
* Evalúa que los nombre de tipos tengan los nombres correctos.
*
* @param { string[] } types - Tipos a evaluar
*/
static evalTypes(types) {
if (!Array.isArray(types)) {
throw new Error("Debe pasar un array de nombre de tipos como argumento.");
}
types.forEach(type => {
if (typeof type !== "string") {
throw new Error("El nombre del tipo permitido debe ser texto");
}
});
}
/**
* Devuelve el tipo de datos del valor que pase como argumento.
*
* @param { any } value Valor a determinar su tipo.
*/
static getType(value) {
return Object.prototype.toString.call(value);
}
/**
* Determina si el valor pasado como argumento es un objeto.
*
* @param { any } value Valor a evaluar
* @returns { boolean }
*/
static isObject(value) {
return this.getType(value) === '[object Object]';
}
/**
* Determina el valor pasado como argumento es un array.
*
* @param { any } value Valor a evaluar.
* @returns { boolean }
*/
static isArray(value) {
return Array.isArray(value);
}
/**
* Determina si el objeto fue previamente visitado.
*
* @param { Array } visited Array de objetos visitados
* @param { Object<string, any> | Array } value Objeto o array a evaluar si fueron visitados previamente.
* @returns { boolean }
*/
static hasVisited(visited, value) {
return visited.indexOf(value) !== -1;
}
}
CircularReferences.remove(object);
console.log(JSON.stringify(object, null, 4));
Lo primero que hice para facilitar la lectura y compresión del código fue crear una clase con métodos estáticos llamada CircularReferences
:
class CircularReferences {
...
}
Que inclue el método remove
:
CircularReferences.remove(object: any[] | {[x: string]: any}, visited: any[] = []);
Para empezar, dentro del método remove
debemos evitar que siga adelante si el primero argumento pasado por el usuario es diferente a un Array y Objeto para evitar trabajo innecesario durante la evaluación de las referencias circulares.
static remove(object, visited = []) {
if (!this.isObject(object) && !this.isArray(object)) {
return;
}
...
}
Luego, debemos asegurarnos que el segundo parámetro (visited
), tenga al menos, un objeto almacenado. Este parámetro nos indicará durante la iteración si el objeto ha sido previamente visitado.
Por ejemplo:
static remove(object, visited = []) {
...
if (visited.length < 1) {
visited.push(object); // Aquí almacenamos su referencia, que es la que vamos a consultar más adelante.
}
...
}
Establemecemos los tipos permitidos. Es decir, aquellos cuyo contenido serán visibles, de lo contrario se marcarán así: [object Tipo]
.
Por ejemplo:
static remove(object, visited = []) {
...
// Esto los vamos a consultar dentro del bucle
const types = this.getTypes([
'string', 'object', 'number', 'array'
]);
...
}
Iteramos las propiedades del objeto a evaluar y truncamos sus referencias:
static remove(object, visited = []) {
...
for (const property in object) {
/**
* Obtenemos su valor.
*/
const value = object[property];
/**
* Y obtenemos su tipo
*/
const type = this.getType(value);
// Marcamos con su tipo de datos a los no permitidos:
if (types.indexOf(type) !== -1) {
// En lugar de su contenido, mostramos su tipo:
object[property] = type;
continue;
}
// Si el valor de la propiedad que estamos iterando no son un Objeto o un Array,
// símplemente, saltamos la ejecución:
if (!this.isArray(value) && !this.isObject(value)) {
continue;
}
// Si el objeto ha sido visitado previamente, lo marcamos como `[Circular Reference]`, aunque también
// lo podemos eliminar, según sea el caso.
if (this.hasVisited(visited, value)) {
object[property] = '[Circular Reference]';
continue;
}
// Si hemos llegado hasta aquí, entonces, esta es la primera visita
// que le hacemos al objeto o array y debemos marcar como visitado:
visited.push(value);
// Sin embargo, como ha sido un objeto que aún no había sido evaluado, entonces,
// utilizamos la recursividad:
this.remove(value, visited);
}
}
Hay que tomar en cuenta que se utilizó la recursividad en esta respuesta, pero que en una próxima actualización también se va a utilizar pilas para crear obtener el mismo resultado que el ejemplo anterior.
Los otros métodos estáticos de la clase CircularReferences
no se han explicado, porque su nombre se explican solo y ya llevan comentarios.
Objeto utilizado de ejemplo
No olvide la estructura del siguiente objeto, que es la que hemos utilizado en el fragmento de código ejecutable al principio para utilizarla de ejemplo en las referencias circulares:
/**
* Objeto de ejemplo
*/
const object = {
a: 'Primer valor',
b: 'Segundo valor',
m: 'Otro valor',
z: {
ciencia: 'Valor de la ciencia',
content: {
id: 1,
name: 'Nombre del contenido',
ejecutable: function() {
console.log('Realizando pruebas')
}
}
},
ciencia: {
david: 'David Luna',
id: 10
},
ejecutable: function() {},
indefinido: undefined,
nulo: null,
a: new Set(),
// a: new AudioContext(),
number: 10,
array: [{
id: 1,
name: 'David Luna'
},
{
id: 2,
name: 'Francisco Luna'
},
]
};
// Creando referencias circulares para realizar pruebas:
object.array[0].reference = object;
object.array.push(object);
object.reference = object;
object.c = object;
object.z.content.reference = object;
object.algo = "Cualquier contenido";
object.reference = object.z.content.reference
object.ciencia.reference = object;
object.copia = {
david: 'algo por acá'
}
const array = [{
id: 1,
name: 'david'
}];
object.l = {
array: array
}
object.nuevo = array;
Recuerda que debes leer todo el texto y tratar de entender la lógica del problema. Si usted presenta el mismo problema que yo presenté, debe leerlo, en lugar de simplemente copiar y pegar el código.
vis.js