首页 文章

JSON.stringify,避免TypeError:将循环结构转换为JSON

提问于
浏览
427

我有一个大对象,我想转换为JSON并发送 . 但它具有圆形结构 . 我想抛出任何存在的循环引用并发送任何可以进行字符串化的内容 . 我怎么做?

谢谢 .

var obj = {
  a: "foo",
  b: obj
}

我想将obj字符串化为:

{"a":"foo"}

20 回答

  • -1

    试试这个:

    var obj = {
        a: "foo",
        b: obj
    };
    
    var circular_replacer = (value) => {
        var seen = [];
        if (value != null && typeof value == "object") {
            if (seen.indexOf(value) >= 0) return;
            seen.push(value);
        }
        return value;
    };
    
    obj = circular_replacer(obj);
    
  • 10

    我建议从@isaacs查看json-stringify-safe--它在NPM中使用 .

    顺便说一句 - 如果您没有使用Node.js,您只需从源代码的相关部分复制并粘贴第4-27行 .

    安装:

    $ npm install json-stringify-safe --save
    

    使用:

    // Require the thing
    var stringify = require('json-stringify-safe');
    
    // Take some nasty circular object
    var theBigNasty = {
      a: "foo",
      b: theBigNasty
    };
    
    // Then clean it up a little bit
    var sanitized = JSON.parse(stringify(theBigNasty));
    

    这会产生:

    {
      a: 'foo',
      b: '[Circular]'
    }
    

    请注意,就像提到的@Rob W的vanilla JSON.stringify函数一样,您也可以通过传入“replacer”函数作为stringify()的第二个参数来自定义清理行为 . 如果您发现自己需要一个如何执行此操作的简单示例,我只是编写了一个自定义替换程序,它将错误,正则表达式和函数强制转换为人类可读的字符串 .

  • 4

    在Node.js中,您可以使用util.inspect(object) . 它会自动用"[Circular]"替换循环链接 .


    虽然是内置的(无需安装),但您必须导入它

    import * as util from 'util' // has no default export
    import { inspect } from 'util' // or directly
    // or 
    var util = require('util')
    

    要使用它,只需致电

    console.log(util.inspect(myObject))
    

    另请注意,您可以传递options对象进行检查(参见上面的链接)

    inspect(myObject[, options: {showHidden, depth, colors, showProxy, ...moreOptions}])
    

    请阅读并向下面的评论者致敬...

  • 26

    我真的很喜欢Trindaz的解决方案 - 更详细,但它有一些错误 . 我把它们固定在喜欢它的人身上 .

    另外,我在缓存对象上添加了长度限制 .

    如果我打印的对象非常大 - 我的意思是无限大 - 我想限制我的算法 .

    JSON.stringifyOnce = function(obj, replacer, indent){
        var printedObjects = [];
        var printedObjectKeys = [];
    
        function printOnceReplacer(key, value){
            if ( printedObjects.length > 2000){ // browsers will not print more than 20K, I don't see the point to allow 2K.. algorithm will not be fast anyway if we have too many objects
            return 'object too long';
            }
            var printedObjIndex = false;
            printedObjects.forEach(function(obj, index){
                if(obj===value){
                    printedObjIndex = index;
                }
            });
    
            if ( key == ''){ //root element
                 printedObjects.push(obj);
                printedObjectKeys.push("root");
                 return value;
            }
    
            else if(printedObjIndex+"" != "false" && typeof(value)=="object"){
                if ( printedObjectKeys[printedObjIndex] == "root"){
                    return "(pointer to root)";
                }else{
                    return "(see " + ((!!value && !!value.constructor) ? value.constructor.name.toLowerCase()  : typeof(value)) + " with key " + printedObjectKeys[printedObjIndex] + ")";
                }
            }else{
    
                var qualifiedKey = key || "(empty key)";
                printedObjects.push(value);
                printedObjectKeys.push(qualifiedKey);
                if(replacer){
                    return replacer(key, value);
                }else{
                    return value;
                }
            }
        }
        return JSON.stringify(obj, printOnceReplacer, indent);
    };
    
  • 48

    我知道这是一个古老的问题,但我创建的名为smart-circular,与其他提出的方法不同 . 它's specially useful if you'重新使用大而深的对象 .

    一些功能是:

    • 通过导致第一次出现的路径(而不仅仅是字符串[circular])替换对象内的循环引用或简单重复的结构;

    • 通过在广度优先搜索中查找圆度,包确保此路径尽可能小,这在处理非常大且深的对象时非常重要,其中路径可能变得烦人且难以遵循(自定义替换在JSON.stringify中做DFS);

    • 允许个性化替换,方便简化或忽略对象中较不重要的部分;

    • 最后,路径的编写方式与访问引用字段的方式完全相同,这可以帮助您进行调试 .

  • 0

    JSON.stringify 与自定义替换程序一起使用 . 例如:

    // Demo: Circular reference
    var o = {};
    o.o = o;
    
    // Note: cache should not be re-used by repeated calls to JSON.stringify.
    var cache = [];
    JSON.stringify(o, function(key, value) {
        if (typeof value === 'object' && value !== null) {
            if (cache.indexOf(value) !== -1) {
                // Duplicate reference found
                try {
                    // If this value does not reference a parent it can be deduped
                    return JSON.parse(JSON.stringify(value));
                } catch (error) {
                    // discard key if value cannot be deduped
                    return;
                }
            }
            // Store value in our collection
            cache.push(value);
        }
        return value;
    });
    cache = null; // Enable garbage collection
    

    此示例中的替换程序不是100%正确(取决于您对“重复”的定义) . 在以下情况中,将丢弃一个值:

    var a = {b:1}
    var o = {};
    o.one = a;
    o.two = a;
    // one and two point to the same object, but two is discarded:
    JSON.stringify(o, ...);
    

    但概念是:使用自定义替换器,并跟踪解析的对象值 .

  • 1

    请注意,Douglas Crockford还实施了一种 JSON.decycle 方法 . 见他的cycle.js . 这允许您对几乎任何标准结构进行字符串化:

    var a = [];
    a[0] = a;
    a[1] = 123;
    console.log(JSON.stringify(JSON.decycle(a)));
    // result: '[{"$ref":"$"},123]'.
    

    您还可以使用 retrocycle 方法重新创建原始对象 . 因此,您不必从对象中删除循环以对其进行字符串化 .

    然而,这将对DOM节点起作用(这是现实生活用例中循环的典型原因) . 例如,这将抛出:

    var a = [document.body];
    console.log(JSON.stringify(JSON.decycle(a)));
    

    我已经做了一个解决这个问题的分叉(见我的cycle.js fork) . 这应该工作正常:

    var a = [document.body];
    console.log(JSON.stringify(JSON.decycle(a, true)));
    

    请注意,在我的fork中, JSON.decycle(variable) 与原始文件一样工作,并且当 variable 包含DOM节点/元素时将抛出异常 .

    当您使用 JSON.decycle(variable, true) 时,您接受结果将不可逆的事实(retrocycle将不会重新创建DOM节点) . 但是DOM元素在某种程度上应该是可识别的 . 例如,如果 div 元素具有id,则它将替换为字符串 "div#id-of-the-element" .

  • 0

    我发现circular-json library on github并且它对我的问题很有用 .

    我觉得有用的一些好功能:

    • 支持多平台使用,但到目前为止我只用node.js测试过它 .

    • API是相同的,所以您需要做的就是包含并将其用作JSON替代品 .

    • 它有's own parsing method so you can convert the '循环'序列化数据回到对象 .

  • 0

    JSON.stringify()的第二个参数还允许您指定应从其在数据中遇到的每个对象保留的键名数组 . 这可能不适用于所有用例,但这是一个更简单的解决方案 .

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

    var obj = {
        a: "foo",
        b: this
    }
    
    var json = JSON.stringify(obj, ['a']);
    console.log(json);
    // {"a":"foo"}
    

    Note: 奇怪的是,OP中的对象定义不会在最新的Chrome或Firefox中引发循环引用错误 . 修改了这个答案中的定义,以便它确实抛出错误 .


  • 430

    我想知道为什么没有人发布proper solution from MDN page但......

    const getCircularReplacer = () => {
      const seen = new WeakSet();
      return (key, value) => {
        if (typeof value === "object" && value !== null) {
          if (seen.has(value)) {
            return;
          }
          seen.add(value);
        }
        return value;
      };
    };
    
    JSON.stringify(circularReference, getCircularReplacer());
    

    所看到的值应该存储在一个集合中,而不是存储在数组中(每个元素都会调用replacer),并且不需要尝试 JSON.stringify 链中的每个元素,从而导致循环引用 .

    与接受的答案一样,此解决方案可以消除所有重复 Value 观,而不仅仅是圆形的 Value 观 . 但至少它没有指数复杂性 .

  • 0

    如果

    console.log(JSON.stringify(object));
    

    结果是

    TypeError:循环对象值

    然后你可能想要这样打印:

    var output = '';
    for (property in object) {
      output += property + ': ' + object[property]+'; ';
    }
    console.log(output);
    
  • 43

    将JSON.stringify方法与replacer一起使用 . 阅读本文档以获取更多信息 . http://msdn.microsoft.com/en-us/library/cc836459%28v=vs.94%29.aspx

    var obj = {
      a: "foo",
      b: obj
    }
    
    var replacement = {"b":undefined};
    
    alert(JSON.stringify(obj,replacement));
    

    找出一种用循环引用填充替换数组的方法 . 您可以使用typeof方法查找属性是否为“object”(引用)类型,并使用精确的相等性检查(===)来验证循环引用 .

  • 448

    基于其他答案,我最终得到以下代码 . 它适用于循环引用,具有自定义构造函数的对象 .

    从要序列化的给定对象,

    • 在遍历对象时缓存您遇到的所有对象,并为每个对象分配一个唯一的hashID(自动递增数也可以)

    • 找到循环引用后,将新对象中的该字段标记为循环,并将原始对象的hashID存储为属性 .

    Github Link - DecycledJSON

    DJSHelper = {};
    DJSHelper.Cache = [];
    DJSHelper.currentHashID = 0;
    DJSHelper.ReviveCache = [];
    
    // DOES NOT SERIALIZE FUNCTION
    function DJSNode(name, object, isRoot){
        this.name = name;
        // [ATTRIBUTES] contains the primitive fields of the Node
        this.attributes = {};
    
        // [CHILDREN] contains the Object/Typed fields of the Node
        // All [CHILDREN] must be of type [DJSNode]
        this.children = []; //Array of DJSNodes only
    
        // If [IS-ROOT] is true reset the Cache and currentHashId
        // before encoding
        isRoot = typeof isRoot === 'undefined'? true:isRoot;
        this.isRoot = isRoot;
        if(isRoot){
            DJSHelper.Cache = [];
            DJSHelper.currentHashID = 0;
    
            // CACHE THE ROOT
            object.hashID = DJSHelper.currentHashID++;
            DJSHelper.Cache.push(object);
        }
    
        for(var a in object){
            if(object.hasOwnProperty(a)){
                var val = object[a];
    
                if (typeof val === 'object') {
                    // IF OBJECT OR NULL REF.
    
                    /***************************************************************************/
                    // DO NOT REMOVE THE [FALSE] AS THAT WOULD RESET THE [DJSHELPER.CACHE]
                    // AND THE RESULT WOULD BE STACK OVERFLOW
                    /***************************************************************************/
                    if(val !== null) {
                        if (DJSHelper.Cache.indexOf(val) === -1) {
                            // VAL NOT IN CACHE
                            // ADD THE VAL TO CACHE FIRST -> BEFORE DOING RECURSION
                            val.hashID = DJSHelper.currentHashID++;
                            //console.log("Assigned", val.hashID, "to", a);
                            DJSHelper.Cache.push(val);
    
                            if (!(val instanceof Array)) {
                                // VAL NOT AN [ARRAY]
                                try {
                                    this.children.push(new DJSNode(a, val, false));
                                } catch (err) {
                                    console.log(err.message, a);
                                    throw err;
                                }
                            } else {
                                // VAL IS AN [ARRAY]
                                var node = new DJSNode(a, {
                                    array: true,
                                    hashID: val.hashID // HashID of array
                                }, false);
                                val.forEach(function (elem, index) {
                                    node.children.push(new DJSNode("elem", {val: elem}, false));
                                });
                                this.children.push(node);
                            }
                        } else {
                            // VAL IN CACHE
                            // ADD A CYCLIC NODE WITH HASH-ID
                            this.children.push(new DJSNode(a, {
                                cyclic: true,
                                hashID: val.hashID
                            }, false));
                        }
                    }else{
                        // PUT NULL AS AN ATTRIBUTE
                        this.attributes[a] = 'null';
                    }
                } else if (typeof val !== 'function') {
                    // MUST BE A PRIMITIVE
                    // ADD IT AS AN ATTRIBUTE
                    this.attributes[a] = val;
                }
            }
        }
    
        if(isRoot){
            DJSHelper.Cache = null;
        }
        this.constructorName = object.constructor.name;
    }
    DJSNode.Revive = function (xmlNode, isRoot) {
        // Default value of [isRoot] is True
        isRoot = typeof isRoot === 'undefined'?true: isRoot;
        var root;
        if(isRoot){
            DJSHelper.ReviveCache = []; //Garbage Collect
        }
        if(window[xmlNode.constructorName].toString().indexOf('[native code]') > -1 ) {
            // yep, native in the browser
            if(xmlNode.constructorName == 'Object'){
                root = {};
            }else{
                return null;
            }
        }else {
            eval('root = new ' + xmlNode.constructorName + "()");
        }
    
        //CACHE ROOT INTO REVIVE-CACHE
        DJSHelper.ReviveCache[xmlNode.attributes.hashID] = root;
    
        for(var k in xmlNode.attributes){
            // PRIMITIVE OR NULL REF FIELDS
            if(xmlNode.attributes.hasOwnProperty(k)) {
                var a = xmlNode.attributes[k];
                if(a == 'null'){
                    root[k] = null;
                }else {
                    root[k] = a;
                }
            }
        }
    
        xmlNode.children.forEach(function (value) {
            // Each children is an [DJSNode]
            // [Array]s are stored as [DJSNode] with an positive Array attribute
            // So is value
    
            if(value.attributes.array){
                // ITS AN [ARRAY]
                root[value.name] = [];
                value.children.forEach(function (elem) {
                    root[value.name].push(elem.attributes.val);
                });
                //console.log("Caching", value.attributes.hashID);
                DJSHelper.ReviveCache[value.attributes.hashID] = root[value.name];
            }else if(!value.attributes.cyclic){
                // ITS AN [OBJECT]
                root[value.name] = DJSNode.Revive(value, false);
                //console.log("Caching", value.attributes.hashID);
                DJSHelper.ReviveCache[value.attributes.hashID] = root[value.name];
            }
        });
    
        // [SEPARATE ITERATION] TO MAKE SURE ALL POSSIBLE
        // [CYCLIC] REFERENCES ARE CACHED PROPERLY
        xmlNode.children.forEach(function (value) {
            // Each children is an [DJSNode]
            // [Array]s are stored as [DJSNode] with an positive Array attribute
            // So is value
    
            if(value.attributes.cyclic){
                // ITS AND [CYCLIC] REFERENCE
                root[value.name] = DJSHelper.ReviveCache[value.attributes.hashID];
            }
        });
    
        if(isRoot){
            DJSHelper.ReviveCache = null; //Garbage Collect
        }
        return root;
    };
    
    DecycledJSON = {};
    DecycledJSON.stringify = function (obj) {
        return JSON.stringify(new DJSNode("root", obj));
    };
    DecycledJSON.parse = function (json, replacerObject) {
        // use the replacerObject to get the null values
        return DJSNode.Revive(JSON.parse(json));
    };
    DJS = DecycledJSON;
    

    Example Usage 1:

    var obj = {
        id:201,
        box: {
            owner: null,
            key: 'storm'
        },
        lines:[
            'item1',
            23
        ]
    };
    
    console.log(obj); // ORIGINAL
    
    // SERIALIZE AND THEN PARSE
    var jsonObj = DJS.stringify(obj);
    console.log(DJS.parse(jsonObj));
    

    Example Usage 2:

    // PERSON OBJECT
    
    function Person() {
        this.name = null;
        this.child = null;
        this.dad = null;
        this.mom = null;
    }
    var Dad = new Person();
    Dad.name = 'John';
    var Mom = new Person();
    Mom.name = 'Sarah';
    var Child = new Person();
    Child.name = 'Kiddo';
    
    Dad.child = Mom.child = Child;
    Child.dad = Dad;
    Child.mom = Mom;
    
    console.log(Child); // ORIGINAL
    
    // SERIALIZE AND THEN PARSE
    var jsonChild = DJS.stringify(Child);
    console.log(DJS.parse(jsonChild));
    
  • 32

    我知道这个问题很老,有很多很好的答案,但我发布这个答案是因为它有新的味道(es5)

    Object.defineProperties(JSON, {
      refStringify: {
        value: function(obj) {
    
          let objMap = new Map();
          let stringified = JSON.stringify(obj,
            function(key, value) {
    
              // only for objects
              if (typeof value == 'object') {
                // If has the value then return a reference to it
                if (objMap.has(value))
                  return objMap.get(value);
    
                objMap.set(value, `ref${objMap.size + 1}`);
              }
              return value;
            });
          return stringified;
        }
      },
      refParse: {
        value: function(str) {
    
          let parsed = JSON.parse(str);
          let objMap = _createObjectMap(parsed);
          objMap.forEach((value, key) => _replaceKeyWithObject(value, key));
          return parsed;
        }
      },
    });
    
    // *************************** Example
    let a = {
      b: 32,
      c: {
        get a() {
            return a;
          },
          get c() {
            return a.c;
          }
      }
    };
    let stringified = JSON.refStringify(a);
    let parsed = JSON.refParse(stringified, 2);
    console.log(parsed, JSON.refStringify(parsed));
    // *************************** /Example
    
    // *************************** Helper
    function _createObjectMap(obj) {
    
      let objMap = new Map();
      JSON.stringify(obj, (key, value) => {
        if (typeof value == 'object') {
          if (objMap.has(value))
            return objMap.get(value);
          objMap.set(value, `ref${objMap.size + 1}`);
    
        }
        return value;
      });
      return objMap;
    }
    
    function _replaceKeyWithObject(key, obj, replaceWithObject = obj) {
    
      Object.keys(obj).forEach(k => {
    
        let val = obj[k];
        if (val == key)
          return (obj[k] = replaceWithObject);
        if (typeof val == 'object' && val != replaceWithObject)
          _replaceKeyWithObject(key, val, replaceWithObject);
      });
    }
    
  • 0

    做就是了

    npm i --save circular-json
    

    然后在你的js文件中

    const JSON = require('circular-json');
    ...
    const json = JSON.stringify(obj);
    

    你也可以这样做

    const CircularJSON = require('circular-json');
    

    https://github.com/WebReflection/circular-json

    注意:我与此软件包无关 . 但我确实用它 .

  • 21

    对于未来的googlers在您不知道所有循环引用的键时搜索此问题的解决方案,您可以使用JSON.stringify函数周围的包装来排除循环引用 . 请参阅https://gist.github.com/4653128上的示例脚本 .

    该解决方案基本上归结为保持对数组中先前打印的对象的引用,并在返回值之前在replacer函数中检查该对象 . 它比仅排除循环引用更加紧缩,因为它还排除了两次打印对象,其中一个副作用是避免循环引用 .

    示例包装器:

    function stringifyOnce(obj, replacer, indent){
        var printedObjects = [];
        var printedObjectKeys = [];
    
        function printOnceReplacer(key, value){
            var printedObjIndex = false;
            printedObjects.forEach(function(obj, index){
                if(obj===value){
                    printedObjIndex = index;
                }
            });
    
            if(printedObjIndex && typeof(value)=="object"){
                return "(see " + value.constructor.name.toLowerCase() + " with key " + printedObjectKeys[printedObjIndex] + ")";
            }else{
                var qualifiedKey = key || "(empty key)";
                printedObjects.push(value);
                printedObjectKeys.push(qualifiedKey);
                if(replacer){
                    return replacer(key, value);
                }else{
                    return value;
                }
            }
        }
        return JSON.stringify(obj, printOnceReplacer, indent);
    }
    
  • 4

    用这种对象解决这个问题的另一个解决方案就是使用这个库

    https://github.com/ericmuyser/stringy

    它简单,你可以在几个简单的步骤解决这个问题 .

  • 3

    我像这样解决这个问题:

    var util = require('util');
    
    // Our circular object
    var obj = {foo: {bar: null}, a:{a:{a:{a:{a:{a:{a:{hi: 'Yo!'}}}}}}}};
    obj.foo.bar = obj;
    
    // Generate almost valid JS object definition code (typeof string)
    var str = util.inspect(b, {depth: null});
    
    // Fix code to the valid state (in this example it is not required, but my object was huge and complex, and I needed this for my case)
    str = str
        .replace(/<Buffer[ \w\.]+>/ig, '"buffer"')
        .replace(/\[Function]/ig, 'function(){}')
        .replace(/\[Circular]/ig, '"Circular"')
        .replace(/\{ \[Function: ([\w]+)]/ig, '{ $1: function $1 () {},')
        .replace(/\[Function: ([\w]+)]/ig, 'function $1(){}')
        .replace(/(\w+): ([\w :]+GMT\+[\w \(\)]+),/ig, '$1: new Date("$2"),')
        .replace(/(\S+): ,/ig, '$1: null,');
    
    // Create function to eval stringifyed code
    var foo = new Function('return ' + str + ';');
    
    // And have fun
    console.log(JSON.stringify(foo(), null, 4));
    
  • 0
    var a={b:"b"};
    a.a=a;
    JSON.stringify(preventCircularJson(a));
    

    评估为:

    "{"b":"b","a":"CIRCULAR_REFERENCE_REMOVED"}"
    

    功能:

    /**
     * Traverses a javascript object, and deletes all circular values
     * @param source object to remove circular references from
     * @param censoredMessage optional: what to put instead of censored values
     * @param censorTheseItems should be kept null, used in recursion
     * @returns {undefined}
     */
    function preventCircularJson(source, censoredMessage, censorTheseItems) {
        //init recursive value if this is the first call
        censorTheseItems = censorTheseItems || [source];
        //default if none is specified
        censoredMessage = censoredMessage || "CIRCULAR_REFERENCE_REMOVED";
        //values that have allready apeared will be placed here:
        var recursiveItems = {};
        //initaite a censored clone to return back
        var ret = {};
        //traverse the object:
        for (var key in source) {
            var value = source[key]
            if (typeof value == "object") {
                //re-examine all complex children again later:
                recursiveItems[key] = value;
            } else {
                //simple values copied as is
                ret[key] = value;
            }
        }
        //create list of values to censor:
        var censorChildItems = [];
        for (var key in recursiveItems) {
            var value = source[key];
            //all complex child objects should not apear again in children:
            censorChildItems.push(value);
        }
        //censor all circular values
        for (var key in recursiveItems) {
            var value = source[key];
            var censored = false;
            censorTheseItems.forEach(function (item) {
                if (item === value) {
                    censored = true;
                }
            });
            if (censored) {
                //change circular values to this
                value = censoredMessage;
            } else {
                //recursion:
                value = preventCircularJson(value, censoredMessage, censorChildItems.concat(censorTheseItems));
            }
            ret[key] = value
    
        }
    
        return ret;
    }
    
  • 1

    @ RobW的答案是正确的,但这更高效!因为它使用hashmap / set:

    const customStringify = function (v) {
      const cache = new Set();
      return JSON.stringify(v, function (key, value) {
        if (typeof value === 'object' && value !== null) {
          if (cache.has(value)) {
            // Circular reference found
            try {
              // If this value does not reference a parent it can be deduped
             return JSON.parse(JSON.stringify(value));
            }
            catch (err) {
              // discard key if value cannot be deduped
             return;
            }
          }
          // Store value in our set
          cache.add(value);
        }
        return value;
      });
    };
    

相关问题