recursive JSON.stringify implementation

You need to view recursion as going deeper into the object without actually altering the object. It looks like you're trying to use recursion to go sideways inside of an object.

I've written a version of stringify that handles basic object (no arrays or functions).

Here is the fiddle

Here is the code:

var my_stringify2 = function (obj) {
    var objKeys = Object.keys(obj);
    var keyValueArray = new Array();
    for (var i = 0; i < objKeys.length; i++) {
        var keyValueString = '"' + objKeys[i] + '":';
        var objValue = obj[objKeys[i]];
        keyValueString = (typeof objValue == "string") ? 
            keyValueString = keyValueString + '"' + objValue + '"' : 
            keyValueString = keyValueString + my_stringify2(objValue);
        keyValueArray.push(keyValueString);
    }
    return "{" + keyValueArray.join(",") + "}";
}

You want the recursion to do most of the work for you, and you should only need to handle basic conditions (which you already had). In my function the two acceptable conditions are string and object.

A string is handled on the spot, and an object is passed into the function recursively.

That's the key. You were passing the same object into the function repeatedly, removing the handled elements until you get to a point where the object is completely gone.

What I did instead was pass the value of that particular property if it were an object. If it's a string, just add it to the string and move along.

Take a look at the code and let me know if you have any questions. Notice that the object that I'm passing in has a nested object.

my_stringify2({
    foo: 'bar',
    bar: 'foo',
    foobar: {
        foo: 'bar',
        bar: 'foo'
    }
});

and the result is proper json

{"foo":"bar","bar":"foo","foobar":{"foo":"bar","bar":"foo"}} 

If you're looking to completely avoid a for loop, you can do the following

jsfiddle

in this one you pass the object like normal, but recursively you pass a key array, removing an element from the key array for each property.

a bit more complicated, so I added comments

var my_stringify2 = function (obj, objKeys) {
    var str = "";
    // keys haven't been loaded, either first pass, or processing a value of type object
    if (objKeys == undefined) { 
        objKeys = Object.keys(obj);
        str = "{"
    } else {
        // if keys array exists and is empty, no more properties to evaluate, return the end bracket
        if (objKeys.length == 0) {
            return "}";
        // array exists and isn't empty, that means it's a property and not the first property, add a comma    
        } else {
            str = ",";
        }
    }
    // add the property name
    str += '"' + objKeys[0] + '":';
    // get the value
    var objValue = obj[objKeys[0]];
    // if the value type is string, add the string, if it's an object, call this function again, but leave the objKeys undefined
    str +=
        (typeof objValue == "string") ? 
        '"' + objValue + '"' : 
         my_stringify2(objValue);    
    // remove the first element fromt the keys array
    objKeys.splice(0,1);
    //call the function for the next property
    return str + my_stringify2(obj, objKeys);
}

This has been answered several times but here is yet another solution:

Using es6:

let oldStringify = JSON.stringify;
JSON.stringify = (obj, replacer, space) => oldStringify(obj, replacer || ((key, value) => {if(key && value === obj) return "[recursive]"; return value;}), space)

I was asked this in an Interview question and this is what I came up with. An understandable recursive approach:

​
function stringify(input) {
  var arrVals = [];
  Object.keys(input).forEach(function(keyName) {
    let val = input[keyName];
    if (typeof val !== 'undefined' && typeof val !== 'function') {
      arrVals.push(getQuotedString(keyName) + ":" + getString(val));
    }
  });
  return '{' + arrVals.join(',') + '}';
}

function getString(val) {
  switch (typeof val) {
    case 'string':
      return getQuotedString(val);
      break;
    
    case 'number':
    case 'boolean':
      return val;
      break;
    
    case 'object':
      if (val === null) {
        return "null";
      }
      
      if (Array.isArray(val)) {
        let arrString = []
        for (let i = 0; i < val.length; i++) {
          arrString.push(getString(val[i]));
        }
        return "[" + arrString.join(',') + "]";
      }
      
      return stringify(val);
      break;
  }
}

function getQuotedString(str) {
  return '"' + str + '"';
}

Test using following obj:

​
var input = {
  "a": 1,
  "b": 'text',
  "c": {
    "x": 1,
    "y": {
      "x": 2
    }
  },
  "d": false,
  "e": null,
  "f": undefined,
  "g": [1, "text", {
    a: 1,
    b: 2
  }, null]
};

Here is an implementation that follows the ECMA Script specification (excluding extra arguments that can be passed to JSON.stringify):

function stringifyJSON(value) {
    const charMap = { "\b": "\\b", "\t": "\\t", "\n": "\\n", "\f": "\\f", 
                      "\r": "\\r", '"': '\\"', "\\": "\\\\" };
    const stack = new Set; 
    const stringToJson = value =>
        '"' + value.replace(/[\x00-\x1F"\\\uD800-\uDFFF]/gu, c =>
            charMap[c] ?? `\\u${c.charCodeAt().toString(16).padStart(4, "0")}`
        ) + '"';

    const objectToJson = obj =>
        `{${Object.entries(obj).map(([key, value]) => {
            value = anyToJson(value);
            if (value !== undefined) return `${stringToJson(key)}:${value}`;
        }).filter(Boolean)}}`;
    
    const arrayToJson = arr =>
        `[${Array.from(arr, value => {
            value = anyToJson(value);
            return value === undefined ? "null" : value;
        })}]`;

    function anyToJson(value) {
        // Support for toJSON method
        if (typeof Object(value).toJSON === "function") value = value.toJSON();
        // Unwrap boxed primitives
        if (value instanceof Number || value instanceof String 
                || value instanceof Boolean || value instanceof BigInt) {
            value = value.valueOf();
        }
        // Primitive values:
        const typ = typeof value;
        if (typ === "bigint") throw new TypeError("Do not know how to serialize a BigInt");
        if (typ === "boolean" || value === null) return String(value);
        if (typ === "number") return (Number.isFinite(value) ? String(value) : "null");
        if (typ === "string") return stringToJson(value);
        if (typ !== "object") return;
        // (non-callable) object:
        if (stack.has(value)) throw new TypeError("Converting circular structure to JSON");
        stack.add(value);
        const result = Array.isArray(value) ? arrayToJson(value, stack) 
                                            : objectToJson(value, stack);
        stack.delete(value);
        return result;
    }
    
    return anyToJson(value);
}

// Test
BigInt.prototype.toJSON = () => "I'm a BigInt";

const o = {
    "!è#": `
a\r
b\t
c`,
    "😀": "-🤣-",
    a: [NaN, Infinity, -Infinity, 3.14e48, undefined, null, () => {}, Symbol.iterator],
    b: [],
    c: [new Number(8), new String("ok"), new Boolean(false)],
    d: () => {},
    e: Object.assign(Object(12n), { toJSON: () => "hello" }),
    f: Object(Symbol.iterator),
    g: 12n
};

console.log(stringifyJSON(o) === JSON.stringify(o)); // true

Notably, it implements the following specifics:

• If the object to serialize has a toJSON method, it is called
• If a cyclic reference is detected, a TypeError is thrown
• Non-finite numbers result in "null" (this is the case for NaN, -Infinity, Infinity)
• Control characters, double quote and backslash characters are escaped
• Function objects and Symbol primitives result in undefined
• If the object is a primitive-wrapper object (instance of Number, String, BigInt, Boolean, possibly sub classed), the primitive value is taken instead
• Undefined values (after applying above rules) are omitted from object serialization and are rendered as "null" when they occur in arrays.

Fundamentally, you are stringifying by cutting off the first property, stringifying that and then recursing of the rest of the object. IMHO this is not the way to go, the only reason to recurse is when there is a nested object, otherwise you should just iterate through the properties. As you've done it, you've made it much more difficult to tell if you are at the beginning of the object and should return that missing { with your string.

In semi-pseudo code (leaving you some work to do yourself), you want something like this:

var my_stringify = function(obj) {
    // check first for null / undefined / etc and return
    var myJSON = "{";
    // iterate through all the properties of the object
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            // check to see if this property is a string, number, etc
            if (//...) {
                myJSON += // the JSON representation of this value using p and obj[p]
            }
            if (// test for nested object) {
                myJSON += my_stringify(obj[p]);    // this is recursion!
            }
            if (// test for arrays) {
                // arrays also need special handling and note that they might
                // include objects or other arrays - more chances for recursion!
            }
            // note: functions should be ignored, they aren't included in JSON
        }
    }
    return myJSON + "}";
}

I disagree with @Bergi's assertion that regular old recursion isn't a good fit for this. Like I said in my comment you can avoid the use of a for loop by passing the index as an argument to the function. This is a very common technique and prevents you from needing to copy or modify the data structure.

Here's my stab at such an implementation. As you can see it's really straightforward (and to my own surprise, it works!):

function jsonify(obj, idx) {
  var json, objStr = toString.call(obj);

  // Handle strings
  if(objStr == '[object String]') { return '"' + obj + '"' }

  idx = idx || 0

  // Handle arrays
  if(objStr == '[object Array]') {
    if(idx >= obj.length) {
      // The code below ensures we'll never go past the end of the array,
      // so we can assume this is an empty array
      return "[]"
    }

    // JSONify the value at idx
    json = jsonify( obj[idx] )

    if(idx < obj.length - 1) {
      // There are items left in the array, so increment the index and
      // JSONify the rest
      json = json + "," + jsonify( obj, idx + 1 )
    }

    // If this is the first item in the array, wrap the result in brackets
    if(idx === 0) { return "[" + json + "]" }

    return json
  }

  // Handle objects
  if(obj === Object(obj)) {
    var keys = Object.keys(obj)
    var key = keys[idx]

    // JSONify the key and value
    json = '"' + key + '":' + jsonify( obj[key] )

    if(idx < keys.length - 1) {
      // There are more keys, so increment the index and JSONify the rest
      return json + "," + jsonify( obj, idx + 1 )
    }

    // If this is the first key, wrap the result in curly braces
    if(idx === 0) { return "{" + json + "}" }

    return json
  }

  return obj.toString() // Naively handle everything else
}

var items = [ 9, "nine", { "key": [], "key2": { "subkey": 3.333 } } ]

console.log("OUTPUT", jsonify(items))
// => OUTPUT [9,"nine","key":[],"key2":{"subkey":3.333}]

There are a number of ways this could be tightened up (and I'm sure there are some bugs, too), but you get the idea.

I have created the whole implementation of the JSON.stringify() method in a recursive way. Here is the link: https://javascript.plainenglish.io/create-your-own-implementation-of-json-stringify-simiplied-version-8ab6746cdd1

Github link: https://github.com/siddharth-sunchu/native-methods/blob/master/JSONStringfy.js

const JSONStringify = (obj) => {

  const isArray = (value) => {
    return Array.isArray(value) && typeof value === 'object';
  };

  const isObject = (value) => {
    return typeof value === 'object' && value !== null && !Array.isArray(value);
  };

  const isString = (value) => {
    return typeof value === 'string';
  };

  const isBoolean = (value) => {
    return typeof value === 'boolean';
  };

  const isNumber = (value) => {
    return typeof value === 'number';
  };

  const isNull = (value) => {
    return value === null && typeof value === 'object';
  };

  const isNotNumber = (value) => {
    return typeof value === 'number' && isNaN(value);
  };

  const isInfinity = (value) => {
    return typeof value === 'number' && !isFinite(value);
  };

  const isDate = (value) => {
    return typeof value === 'object' && value !== null && typeof value.getMonth === 'function';
  };

  const isUndefined = (value) => {
    return value === undefined && typeof value === 'undefined';
  };

  const isFunction = (value) => {
    return typeof value === 'function';
  };

  const isSymbol = (value) => {
    return typeof value === 'symbol';
  };

  const restOfDataTypes = (value) => {
    return isNumber(value) || isString(value) || isBoolean(value);
  };

  const ignoreDataTypes = (value) => {
    return isUndefined(value) || isFunction(value) || isSymbol(value);
  };

  const nullDataTypes = (value) => {
    return isNotNumber(value) || isInfinity(value) || isNull(value);
  }

  const arrayValuesNullTypes = (value) => {
    return isNotNumber(value) || isInfinity(value) || isNull(value) || ignoreDataTypes(value);
  }

  const removeComma = (str) => {
    const tempArr = str.split('');
    tempArr.pop();
    return tempArr.join('');
  };


  if (ignoreDataTypes(obj)) {
    return undefined;
  }

  if (isDate(obj)) {
    return `"${obj.toISOString()}"`;
  }

  if(nullDataTypes(obj)) {
    return `${null}`
  }

  if(isSymbol(obj)) {
    return undefined;
  }


  if (restOfDataTypes(obj)) {
    const passQuotes = isString(obj) ? `"` : '';
    return `${passQuotes}${obj}${passQuotes}`;
  }

  if (isArray(obj)) {
    let arrStr = '';
    obj.forEach((eachValue) => {
      arrStr += arrayValuesNullTypes(eachValue) ? JSONStringify(null) : JSONStringify(eachValue);
      arrStr += ','
    });

    return  `[` + removeComma(arrStr) + `]`;
  }

  if (isObject(obj)) {
      
    let objStr = '';

    const objKeys = Object.keys(obj);

    objKeys.forEach((eachKey) => {
        const eachValue = obj[eachKey];
        objStr +=  (!ignoreDataTypes(eachValue)) ? `"${eachKey}":${JSONStringify(eachValue)},` : '';
    });
    return `{` + removeComma(objStr) + `}`;
  }
};