Freezing / crashing when circular objects are passed in

[devth]

When I use JSON.stringify it renders handles these fine, but if I pass a complex object into JSONView it freezes up my browser.

If there was an option to ignore certain keys that might be a nice/easy way to work around this.

[Uzlopak]

Not tested, but I guess this should work, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#examples

function getCircularReplacer() {
  const ancestors = [];
  return function (key, value) {
    if (typeof value !== "object" || value === null) {
      return value;
    }
    // `this` is the object that value is contained in,
    // i.e., its direct parent.
    while (ancestors.length > 0 && ancestors.at(-1) !== this) {
      ancestors.pop();
    }
    if (ancestors.includes(value)) {
      return "[Circular]";
    }
    ancestors.push(value);
    return value;
  };
}

function sanitizeCircularity (data) {
  return JSON.parse(JSON.stringify(data, getCircularReplacer()));
}

<JsonView data={sanitizeCircularity(data)} />

[AnyRoad]

I agree, it is better to separate the sanitizeCircularity logic from the component itself. If the problem is not circular dependencies then can you specify how complex/big your data is?