I'm serializing objects to JSON strings with JavaScript,
I noticed only enumerable object properties get serialized:
var a = Object.create(null,{
x: { writable:true, configurable:true, value: "hello",enumerable:false },
y: { writable:true, configurable:true, value: "hello",enumerable:true }
});
document.write(JSON.stringify(a)); //result is {"y":"hello"}
[pen]
I'm wondering why that is? I've searched through the MDN page, the json2 parser documentation. I could not find this behavior documented any-where.
I suspect this is the result of using for... in
loops that only go through [[enumerable]] properties (at least in the case of json2
). This can probably be done with something like Object.getOwnPropertyNames
that returns both enumerable, and non-enumerable properties.
That might be problematic to serialize though (due to deserialization).
tl;dr
- Why does
JSON.stringify
only serialize enumerable properties? - Is this behavior documented anywhere?
- How can I implement serializing non-enumerable properties myself?
I'm serializing objects to JSON strings with JavaScript,
I noticed only enumerable object properties get serialized:
var a = Object.create(null,{
x: { writable:true, configurable:true, value: "hello",enumerable:false },
y: { writable:true, configurable:true, value: "hello",enumerable:true }
});
document.write(JSON.stringify(a)); //result is {"y":"hello"}
[pen]
I'm wondering why that is? I've searched through the MDN page, the json2 parser documentation. I could not find this behavior documented any-where.
I suspect this is the result of using for... in
loops that only go through [[enumerable]] properties (at least in the case of json2
). This can probably be done with something like Object.getOwnPropertyNames
that returns both enumerable, and non-enumerable properties.
That might be problematic to serialize though (due to deserialization).
tl;dr
- Why does
JSON.stringify
only serialize enumerable properties? - Is this behavior documented anywhere?
- How can I implement serializing non-enumerable properties myself?
-
If you set enumerable to false, there will be no instance added. Try console logging the object before you stringify it, and you'll see that
x
is missing from the object itself, so it surely can't be there once it's stringified. – adeneo Commented Mar 31, 2013 at 20:08 - 1 @adeneo that's presumably because it also uses something like stringify and not getOwnPropertyNames. Object.getOwnPropertyNames(a) returns ["x","y"] and if you type obj.x you get "hello". – Benjamin Gruenbaum Commented Mar 31, 2013 at 20:10
- Yes I've noticed, and that's a good indication that you should probably reconsider and find another way to create your object. – adeneo Commented Mar 31, 2013 at 20:12
- 1 @adeneo Enumerable properties serve a purpose. In the very basic sample input absolutely. However, this question is a very reduced case of what I'm actually doing. Thanks for the input and time. – Benjamin Gruenbaum Commented Mar 31, 2013 at 20:15
-
@BenjaminGruenbaum - As a side note for
Object.create
, enumerable will default to false unless explicitly defined. Here is a sample jsfiddle showing the behavior: jsfiddle/T3PGD/2 – Travis J Commented Mar 31, 2013 at 20:23
3 Answers
Reset to default 13It's specified in the ES5 spec.
If Type(value) is Object, and IsCallable(value) is false
a. If the [[Class]] internal property of value is
"Array"
then
- i. Return the result of calling the abstract operation JA with argument value.
b. Else, return the result of calling the abstract operation JO with argument value.
So, let's look at JO. Here's the relevant section:
Let K be an internal List of Strings consisting of the names of all the own properties of value whose [[Enumerable]] attribute is true. The ordering of the Strings should be the same as that used by the Object.keys standard built-in function.
As @ThiefMaster answered above, it's specified in the spec
however, if you know the names of the non-enumerable properties you like to be serialized ahead of time, you can achieve it by passing a replacer function as the second param to JSON.stringify() (documentation on MDN), like so
var o = {
prop: 'propval',
}
Object.defineProperty(o, 'propHidden', {
value: 'propHiddenVal',
enumerable: false,
writable: true,
configurable: true
});
var s = JSON.stringify(o, (key, val) => {
if (!key) {
// Initially, the replacer function is called with an empty string as key representing the object being stringified. It is then called for each property on the object or array being stringified.
if (typeof val === 'object' && val.hasOwnProperty('propHidden')) {
Object.defineProperty(val, 'propHidden', {
value: val.propHidden,
enumerable: true,
writable: true,
configurable: true
});
}
}
return val;
});
console.log(s);
You can achieve a generic JSON.stringify()
that includes non-enumerables with code like below. But first, some notes:
This code has not been thoroughly tested for possible bugs or unexpected behavior; also, it turns functions into basic objects. Treat accordingly.
copyEnumerable()
is the function to pay attention to. It does not itself internally callJSON.stringify()
(you can do that yourself, with the output object) mainly because recursive calls toJSON.stringify()
(due to nested objects) will yield uglier, unwanted results.I'm only checking for
object
andfunction
types to be treated specially; I believe that these are the only types which need to be handled specially... Note that JSArrays
([]
) fall into this category (objects), as well as classes (functions), andnull
does not. Sincenull
is of typeobject
, I included the!!
check.The
stopRecursiveCopy
Set
is just to make sure it's not doing infinite recursion.I'm using a trick with the 2 extra parameters to
JSON.stringify()
calls to make it output something formatted prettier, for easy reading.
The code is in an easy format to try out and tweak in the console:
{
o = {};
d = {};
Object.defineProperties(o, {
a: {
value: 5,
enumerable: false
},
b: {
value: "test",
enumerable: false
},
c: {
value: {},
enumerable: false
}
});
Object.defineProperty(o.c, "d", {
value: 7,
enumerable: false
});
//The code to use (after careful consideration!).
function isObject(testMe) {
return ((typeof(testMe) === "object" && !!testMe) ||
typeof(testMe) === "function");
}
let stopRecursiveCopy = new Set();
function copyEnumerable(obj) {
if (!isObject(obj)) {
return obj;
}
let enumerableCopy = {};
for (let key of Object.getOwnPropertyNames(obj)) {
if (isObject(obj[key])) {
if (!stopRecursiveCopy.has(obj[key])) {
stopRecursiveCopy.add(obj[key]);
enumerableCopy[key] = copyEnumerable(obj[key]);
stopRecursiveCopy.delete(obj[key]);
}
} else {
enumerableCopy[key] = obj[key];
}
}
return enumerableCopy;
}
console.log(JSON.stringify(copyEnumerable(o), null, " "));
Object.defineProperty(copyEnumerable, "test", {
value: 10,
enumerable: false
});
console.log(JSON.stringify(copyEnumerable(copyEnumerable), null, " "));
Object.defineProperty(o, "f", {
value: copyEnumerable,
enumerable: false
});
console.log(JSON.stringify(copyEnumerable(o), null, " "));
}
which outputs:
//o
{
"a": 5,
"b": "test",
"c": {
"d": 7
}
}
//copyEnumerable itself
{
"test": 10,
"prototype": {
"constructor": {
"test": 10,
"length": 1,
"name": "copyEnumerable"
}
},
"length": 1,
"name": "copyEnumerable"
}
//o again, but with `f: copyEnumerable` added
{
"a": 5,
"b": "test",
"c": {
"d": 7
},
"f": {
"test": 10,
"prototype": {},
"length": 1,
"name": "copyEnumerable"
}
}
Pertinent links:
- https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
- https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
- https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Operators/typeof
- https://stackoverflow./a/14706877/1599699
- https://stackoverflow./a/18538851/1599699