Javascript Stringify Object

Question

I am using MVC 5 and the Select2 plugin in a Ajax form.

The object looks like this in the Chrome console: https://i.sstatic.net/bGOpg.jpg (was easier to show the object as a picture)

What I would like is to extract the ID and Text and save that to my DB. As a stringified object. Noticed it's alot of other solutions that just saves the ID/Value then do roundtrip to DB for the text. But I would like to just stringify the object and only save the id and text and then on page load serialize the object from the hidden field back to the Select2 box.

When I try to use the JSON.stringify method I get an error:

Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.

No idea why it shows that error. The field is not hidden. The error comes if I just try to run this: JSON.stringify($('#GeoList').select2('data')); and $('#GeoList').select2('data') gives the object as you can see from the picture. So is it something hidden in the object? :S — stig
– stig, Commented Aug 25, 2014 at 14:23
Ah lol. Yea it worked in Aurora/Firefox :O But not in Google Chrome v. 36.0 Kinda need it to work for Chrome aswell though :/ — stig
– stig, Commented Aug 25, 2014 at 14:30
Trying to stringify a DOM element directly is not a good idea. Extract the properties you want from the DOM elements into simpler JavaScript objects and then serialize those. — Pointy
– Pointy, Commented Aug 25, 2014 at 14:30
You are feeding .select2() with a string. I never used that plugin, but from what I see in the documentation, it accepts an object. And I'm not sure what it returns. If it creates a DOM node, it may be that it returns 'undefined', and you cannot stringify that. — Zemljoradnik
– Zemljoradnik, Commented Aug 25, 2014 at 14:31

Community · Accepted Answer · 2017-05-23 10:25:19Z

3

Since you just want to save the id and text, you could remove the rest of the fields from the object, which would also remove clutter in the database:

var selectedObjects = $('#GeoList').select2('data');
var dataToSave = []
$.each(selectedObjects, function(index, obj) {
    dataToSave.push({ "id" : obj.id, "text" : obj.text});
});
var result = JSON.stringify(dataToSave);

The element field in your object appears to be an HTML element, which has a lot of extra state information that you don't need.

I'm not sure specifically why it's happening in this case, but here's a similar question which says the same thing: Why can't you stringify a jQuery object?

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Aug 25, 2014 at 14:31

Stryner

7,3363 gold badges21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

apsillers · Accepted Answer · 2014-08-25 14:49:54Z

The ECMAScript spec for JSON.stringify specifies the behavior for getting the list of properties of an object to JSONify as:

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.

So we know that JSON.stringify tries to include all enumerable properties of the object, which includes all properties named in Object.keys. For a DOM object (except in Firefox, whose DOM elements have no properties of their own), that includes the property selectionDirection which throws an error when it is read from a <input type="button> element.

Ninsly's answer explains why this is a bad approach and suggests a better one: simply cherry-pick the actual values you need instead of stringifying loads of irrelevant data about the DOM element's state.

tmarwen · Accepted Answer · 2014-08-25 14:40:57Z

0

Since it has worked within another browser, so this may be a bug and you can go futher and report it to get what you it needs as feedback.

Otherwise you can step futher and get a wide browser compatible solution by creating an Object on your own with properties extracted from your objects (id/text) then stringify it:

var geoList = $('#GeoList').select2('data');
var toStoreList = [];
$.each(geoList, function(key, val) {
  toStoreList.push({ "id" : val.id, "text" : val.text});
});

Then call the JSON.stringify method on the Array object toStoreList.

answered Aug 25, 2014 at 14:40

tmarwen

16.5k5 gold badges48 silver badges65 bronze badges

Collectives™ on Stack Overflow

Javascript Stringify Object

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related