Wobbles Wobbles - 4 months ago 11
Javascript Question

Encode form array elements into JSON using only JS or other client side libs

Im working on a joomla component and its not handling the serialization of my form data the way I need it to, so my solution is going to be to create a hidden textarea and populate it with the json data that is created as the form is filled out on the client side then just submit the text area.

<input type="text" name="jform[work_experience][]employer"><input type="text" name="jform[work_experience][]position"><br/>
<input type="text" name="jform[work_experience][]employer"><input type="text" name="jform[work_experience][]position"><br/>
<input type="text" name="jform[work_experience][]employer"><input type="text" name="jform[work_experience][]position"><br/>


Imagine my form looks like this where the number of "rows" are dynamic, depending on how many the user needs. I would then like to serialize this into a JSON string that looks something like:

[
{
"employer": "apple",
"position": "contract killer"
},
{
"employer": "microsoft",
"position": "bathroom attendant"
},
{
"employer": "samsung",
"position": "window washer"
}
]


If I need to rename the fields to get the proper structure so be it.

Is there a jQuery function that would allow me to take
jform[work_experience]
and spit out a json string?

Answer

Here you go, I added data-type to select stuff easier. And it uses native JS so you shouldnt have to worry about collisions with frameworks or libs. I also assume the fields come in tandem.

<form id="uniqueId">
    <input type="text" name="jform[work_experience][]employer" data-type="employer" value="apple">
    <input type="text" name="jform[work_experience][]position" data-type="position" value="contract killer"><br/>

    <input type="text" name="jform[work_experience][]employer" data-type="employer" value="apples">
    <input type="text" name="jform[work_experience][]position" data-type="position" value="Designer"><br/>

    <input type="text" name="jform[work_experience][]employer" data-type="employer" value="appe">
    <input type="text" name="jform[work_experience][]position" data-type="position" value="Sales rep"><br/>

</form>

JS:

var inputFields = document.querySelectorAll( '#uniqueId input' );
var dataObject = [];
for( var x = 0 ; x < inputFields.length ; x++ ){
    if( inputFields[ x ].dataset.type === "employer" ){
        var current = {};
        current.employer = inputFields[ x ].value;
        current.position = inputFields[ x + 1 ].value;
        dataObject.push( current );
        x++;    //skip check for next input
    }
}
//verify that the object holds data. The loop assumes 
//that employer and position come in tandem
console.log( JSON.stringify( dataObject ));

Outputs:

[{
        "employer": "apple",
        "position": "contract killer"
}, {
        "employer": "apples",
        "position": "Designer"
}, {
        "employer": "appe",
        "position": "Sales rep"
}]

EDIT: Fixed dataformat :)

Comments