why doesn't getBoundingClientRect serialise with JSON.toStringify?

Question

Try this in dev tools console:

JSON.stringify(document.body.getBoundingClientRect())

the output is {}, instead of something sensible.

Any ideas?

cause getBoundingClientRect returns textRectangle: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect, not js object — Daydreaming Duck, Sep 07 '16 at 17:58
typeof returns "object" not only for js objects but for most enviroment objects too. I remember this part of spec but to lazy to search for prooflink) — Daydreaming Duck, Sep 07 '16 at 18:00
ok what would you suggest, just manually convert it to an object by accessing the props of the clientrect? — SuperUberDuper, Sep 07 '16 at 18:03
Note that `Object.keys(document.body.getBoundingClientRect())` returns `[]` for the same reason. It means manually creating a JS object with those properties (or using object destructuring, which is essentially the same thing). — Heretic Monkey, Sep 07 '16 at 18:06
WontFix: https://bugs.chromium.org/p/chromium/issues/detail?id=498538 — Caramiriel, Sep 08 '16 at 07:24

score 2 · Accepted Answer · answered Sep 07 '16 at 18:10

2

JSON.stringify internally uses a method called toJSON.

You can specify it for your object or in your case, override it:

ClientRect.prototype.toJSON = function(){ return { top: this.top } }

JSON.stringify(document.body.getBoundingClientRect())

"{"top":-583}"

answered Sep 07 '16 at 18:10

johnnydev

money patch, nice!! – SuperUberDuper Sep 07 '16 at 18:27
Could you guys be more constructive? :) – Caramiriel Sep 07 '16 at 18:41
@Caramiriel every somewhat experienced js developer knows, that changing native prototypes is _generally_ very bad practice. It is like timebomb for applications larger then todolist. Relevant question: http://stackoverflow.com/questions/14034180/why-is-extending-native-objects-a-bad-practice – Daydreaming Duck Sep 07 '16 at 18:52

1 Answers1