2

Un poco de contexto

Me encuentro con una situación relacionada a las referencias circulares al momento de convertir un objeto a una cadena de texto en formato JSON.

Por ejemplo imaginemos que tenemos el siguiente objeto:

const a = {
   "key1": 'Valor 1',
   "key2": 'Valor 2'
};

Y luego, almacenamos una referencia de él mismo en otra propiedad:

a.key3 = a;

Ahora bien, cuando intentamos parsearlo a una cadena de texto:

JSON.stringify(a);

Nos encontramos que se ha devuelto el siguiente error:

Uncaught TypeError: cyclic object value

Ejemplo ejecutable

const a = {
  "key1": 'Valor 1',
  "key2": 'Valor 2'
};

a.key3 = a;

JSON.stringify(a);

Si bien, el ejemplo anterior es básico, describe el problema al que me estoy enfrentando.

Pregunta

Dado el contexto anterior, la pregunta es, ¿cómo evito la referencia circular para lograr parsear un objeto a una cadena de texto en formato JSON?

Es decir, la idea es eliminar la referencia circular y luego utilizar JSON.stringifyo en su defecto, utilizarla directamente, pero sin que me devuelva el error por referencia circular.

3
  • 1
    Hola David, en mi modesta opinión, que un objeto tenga dentro una referencia a si mismo, es un error, deberías describir cual es el objetivo que tienes, para poderte ayudar a encontrar la solución adecuada. Commented el 5 abr. 2023 a las 11:17
  • 1
    Hola, @MarcePuente. Las referencias circulares no las he puesto en el objeto, sino que el objeto que recibo tienen objetos que hacen referencias a sí mismas. Commented el 5 abr. 2023 a las 23:34
  • Lamentablemente, no controlo esa parte, porque proviene de una biblioteca llamada vis.js Commented el 5 abr. 2023 a las 23:45

4 respuestas 4

2

Todo depende de lo que quieras hacer con los datos, pero podrías usar un método para buscar elementos repetidos y borrarlos:

const cycled = {
  branch_a: 1,
  branch_b: {
    ba: { baa: 0 },
    here: null
  },
  branch_c: {
    ca: 2,
    cb: false
  }
};

cycled.branch_b.here = cycled;

try {
  JSON.stringify(cycled);
} catch (e) {
  console.log(e.message);
}
recursiva(cycled)
console.log(JSON.stringify(cycled,null, 2));

function recursiva (obj, visited = []) {
  visited.push(obj);
  const propiedades = Object.keys(obj);
  for (pr of propiedades) {
    if (typeof obj[pr] !== 'object') continue; //valores primitivos no son problemáticos
    if (visited.includes(obj[pr])) {
      console.log('detectado ciclo en propiedad', pr);
      obj[pr]=''; //hemos detectado un ciclo!
    } else {
      recursiva(obj[pr], [...visited]) //clonamos el array, para cada búsqueda no queremos hermanos
    }
  }
}

2
  • Hola, @PabloLozano. Probé esta solución, es la que mejor se aproxima. Soluciona el problema de referencia circular, con la única excepción de que falla cuando hay funciones de por medio. Sin embargo, el código va en la dirección correcta. Todavía no marcaré esta respuesta como la mejor, pero es candidata a serlo. Sin embargo, debió haber obtenido un voto positivo. Commented el 5 abr. 2023 a las 23:42
  • Te comento, que por ahora, esta respuesta es la única que se aproxima lo suficiente para solucionar el problema de referencias circulares. Commented el 5 abr. 2023 a las 23:43
2

Puedes almacenar en key3 la referencia una copia del objeto. Si es un objeto sin métodos, puedes simplemente hacer:

JSON.parse(JSON.stringify(obj));

Así evitarías la referencia circular.

Aún así, haría falta el contexto práctico de este problema para saber cual es la mejor solución.

3
  • 4
    El problema es que JSON.stringify es precisamente lo que le falla Commented el 5 abr. 2023 a las 11:57
  • Le falla tras hacer la referencia circular, si asigna a a.key3 la copia elimina la referencia circular. Aunque no tengo claro para que querría hacer eso.
    – Jose
    Commented el 5 abr. 2023 a las 14:17
  • Hola, @Jose. Muchas gracias por el aporte. Pero lamentablemente, no puede funcionar, porque como dice Pablo Lozano, falla. Ya lo probé de igual forma. Lamentablemente, no funciona. Commented el 5 abr. 2023 a las 23:36
1

Lo que se me ocurre que puedes hacer, es clonar el elemento antes de asignarlo. Para esto puedes utilizar la función structuredClone

const a = {
  "key1": 'Valor 1',
  "key2": 'Valor 2'
};

a.key3 = structuredClone(a);

let json = JSON.stringify(a);

console.log(json);


UPDATE

Suponiendo que la referencia circular ya viene con el objeto y no es posible modificarla.

Este tema está documentado en mdn y se aconseja utilizar una librería como cycle.js

La gracia de esta librería es que también permite hacer la conversión inversa, es decir desde JSON a Objeto.

Ejemplo:

//INICIO Libreria=============================================
if (typeof JSON.decycle !== "function") {
    JSON.decycle = function decycle(object, replacer) {
        "use strict";
        var objects = new WeakMap();     

        return (function derez(value, path) {

            var old_path;   // The path of an earlier occurance of value
            var nu;         // The new object or array

            if (replacer !== undefined) {
                value = replacer(value);
            }


            if (
                typeof value === "object"
                && value !== null
                && !(value instanceof Boolean)
                && !(value instanceof Date)
                && !(value instanceof Number)
                && !(value instanceof RegExp)
                && !(value instanceof String)
            ) {


                old_path = objects.get(value);
                if (old_path !== undefined) {
                    return {$ref: old_path};
                }


                objects.set(value, path);


                if (Array.isArray(value)) {
                    nu = [];
                    value.forEach(function (element, i) {
                        nu[i] = derez(element, path + "[" + i + "]");
                    });
                } else {

                    nu = {};
                    Object.keys(value).forEach(function (name) {
                        nu[name] = derez(
                            value[name],
                            path + "[" + JSON.stringify(name) + "]"
                        );
                    });
                }
                return nu;
            }
            return value;
        }(object, "$"));
    };
}


if (typeof JSON.retrocycle !== "function") {
    JSON.retrocycle = function retrocycle($) {
        "use strict";


        var px = /^\$(?:\[(?:\d+|"(?:[^\\"\u0000-\u001f]|\\(?:[\\"\/bfnrt]|u[0-9a-zA-Z]{4}))*")\])*$/;

        (function rez(value) {


            if (value && typeof value === "object") {
                if (Array.isArray(value)) {
                    value.forEach(function (element, i) {
                        if (typeof element === "object" && element !== null) {
                            var path = element.$ref;
                            if (typeof path === "string" && px.test(path)) {
                                value[i] = eval(path);
                            } else {
                                rez(element);
                            }
                        }
                    });
                } else {
                    Object.keys(value).forEach(function (name) {
                        var item = value[name];
                        if (typeof item === "object" && item !== null) {
                            var path = item.$ref;
                            if (typeof path === "string" && px.test(path)) {
                                value[name] = eval(path);
                            } else {
                                rez(item);
                            }
                        }
                    });
                }
            }
        }($));
        return $;
    };
}
//FIN Libreria=============================================


//Objeto con ref circular
const a = {
  "key1": 'Valor 1',
  "key2": 'Valor 2'
};
a.key3 = a;


console.log("Objeto original =>", a);


let json = JSON.stringify(JSON.decycle(a));
console.log("JSON =>", json);
console.log("Objeto desde JSON =>", JSON.retrocycle(JSON.parse(json)));

1
  • Hola, @Yussef. La solución funciona, pero cuando se desea clonar el objeto en lugar de copiar su referencia. Sin embargo, cuando se trata de clonar un objeto que tiene referencia circular, el resultado es un error. El problema es que el objeto que intento parsear ya viene con referencias circulares que lamentablemente, no controlo. Commented el 5 abr. 2023 a las 23:39
1

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 removedebemos 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 CircularReferencesno 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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.