CODEWITHSUNDEEP
jqueryasp.net-mvcjsonasp.net-mvc-5
stig
stig

Reputation: 1220

Javascript Stringify Object

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.

Upvotes: 1

Views: 3386

Answers (3)

apsillers
apsillers

Reputation: 115950

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.

Upvotes: 1

tmarwen
tmarwen

Reputation: 16364

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.

Upvotes: 0

Stryner
Stryner

Reputation: 7318

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?

Upvotes: 3

Related Questions