How do you JSON serialize a set of hidden input values (jQuery can be used)?

Question

I have the following DOM structure..

<input id="WorkAssignmentID_3462" type="hidden" value="3462" name="WorkAssignmentID"/>
<input id="WorkItemID_3462" type="hidden" value="3633" name="WorkItemID"/>
<input id="EmployeeID_3462" type="hidden" value="15" name="EmployeeID"/>
<input id="AssignedBy_3462" type="hidden" value="Jonathan Erickson" name="AssignedBy"/>
<input id="AssignedDate_3462" type="hidden" value="8/1/2009 12:00:00 AM" name="AssignedDate"/>
<input id="ExpirationDate_3462" type="hidden" value="" name="ExpirationDate"/>
<input id="RegisteredDate_3462" type="hidden" value="8/1/2009 12:00:00 AM" name="RegisteredDate"/>

lets just say the jQuery selector to get all of those DOM elements is the following:

$('#assignment');

and what I want to do is create a JSON object from that set:

var WA = {
    WorkAssignmentID: '3462',
    WorkItemID: '3633',
    EmployeeID: '15',
    AssignedBy: 'Jonathan Erickson',
    AssignedDate: '8/1/2009 12:00:00 AM',
    ExpirationDate: '',
    RegisteredDate: '8/1/2009 12:00:00 AM',
};

what would be the easiest way to do that?

I was thinking of doing something like this, but it doesn't work because I don't think that you can dynamically create the property of the JSON object... is it possible to dynamically create the property name?

var WA = {};

$('#assignment').each(function(idx, elem) {
    $.extend(WA, {
                     $(elem).attr('name'): $(elem).val()
                 });
});

Christian C. Salvadó · Accepted Answer · 2009-08-03 18:04:11Z

3

What about this, using the bracket notation:

var result = {};

$('input[type=hidden]').each(function() {
    result[this.name] = this.value;
});

answered Aug 3, 2009 at 18:04

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

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

3 Comments

Jon Erickson Over a year ago

thank you, i was definitely over-complicating the solution haha.

Peter Bailey Over a year ago

Careful here, using this explicitly can break depending on the context that executes the above code. That's why $.each() provides the element to the callback as an argument.

Christian C. Salvadó Over a year ago

No, in the context of the callback function this is always the DOM element, since internally jQuery invokes the callback funciton usin call: callback.call( object[ name ], name, object[ name ] ), check the each function implementation on jquery-1.3.2.js (line 672).

Peter Bailey · Accepted Answer · 2009-08-03 18:04:17Z

2

Calling $.extend() is overkill, IMO. But you've got the basic approach I'd use

var WA = {};
$('input[type="hidden"]').each( function( idx, elem )
{
  WA[elem.name] = elem.value;
}

answered Aug 3, 2009 at 18:04

Peter Bailey

106k32 gold badges186 silver badges206 bronze badges

Collectives™ on Stack Overflow

How do you JSON serialize a set of hidden input values (jQuery can be used)?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related