Convert json object to form-serialized data

Question

I have this object containing HTML:

obj = {
   amount: 0
   apply_business_delivery: "<div class="form-check"><input type="checkbox" checked class="form-check-input" name="apply_business_delivery" id="apply_business_delivery"></div>"
   apply_private_delivery: "<div class="form-check"><input type="checkbox" checked class="form-check-input" name="apply_private_delivery" id="apply_private_delivery"></div>"
   bin: "<i class="far fa-trash-alt"></i>"
   service: "E-mail advisering"
   unit: "<div class="form-group"><select class="form-control form-control-sm select2" name="units" id="units"><option selected>Kr.</option><option >%</option></select></div>"
}

Can I somehow convert these values to a form-serialized data making it easier to work with serverside? For instance checkbox should be converted into 0 or 1 if it's checked.

Edit: Want I would like, is to have an identical function like $('form').serializeArray(). I'm just having have problems figuring out how I can do this on an obj.

For instance $('form').serializeArray() convert this HTML:

<select class="form-control form-control-sm select2" name="company_name"
        id="company_name">
    <option>My company</option>
</select>
<select class="form-control form-control-sm select2" name="type"
        id="type">
    <option>Business</option>
</select>

To this:

 "form" => array:2 [
    0 => array:2 [
      "name" => "company_name"
      "value" => "My company"
    ]
    1 => array:2 [
      "name" => "type"
      "value" => "Business"
    ]
  ]

This is the result I want:

obj = {
   amount: 0
   apply_business_delivery: [
      "name" => "apply_business_delivery"
      "value" => 1
   ]
   apply_private_delivery: [
      "name" => "apply_private_delivery"
      "value" => 1
   ]
   bin: ""
   service: "E-mail advisering"
   unit: [
      "name" => "units"
      "value" => "Kr."
   ]
}

Does this answer your question? [Query-string encoding of a Javascript Object](https://stackoverflow.com/questions/1714786/query-string-encoding-of-a-javascript-object) — Ouroborus, Aug 31 '20 at 18:19
@Ouroborus it gives me this: "0=%5Bobject%20Object%5D&1=%5Bobject%20Object%5D&2=%5Bobject%20Object%5D&3=%5Bobject%20Object%5D&4=%5Bobject%20Object%5D&5=%5Bobject%20Object%5D&6=%5Bobject%20Object%5D" It's not quite the result I want. — Unicco, Aug 31 '20 at 18:23
@Unicco You don't need to use `encodeURIComponent(p)` if you don't the "%20", just do `p.toString()`. It should work most of the time. — Dominique Fortin, Aug 31 '20 at 18:26
@DominiqueFortin hmm, it still dosen't convert my HTML tags like serializeArray does so nicely. Check out my updated question. — Unicco, Aug 31 '20 at 18:34
@Unicco The form-serialized format is for html form elements. If you have complex data that you could not be put in an html form then you have the wrong idea. Maybe look into `JSON.stringify`. — Dominique Fortin, Aug 31 '20 at 18:43
Are you saying you want to extract the HTML that is in the object to name/value pairs? Also, your final result that you are showing, where did you copy that from? — imvain2, Aug 31 '20 at 19:00
@imvain2 I have updated the question with the result I'm seeking. Make sense? — Unicco, Aug 31 '20 at 19:07

Unicco · Answer 1 · 2020-09-01T18:03:22.263

This seems to work for me

var res = $.fn.agGridSerializeRowData( gridFeeOptions.rowData );

/**
 *
 * @param agGridOption
 * @returns {[]}
 */
$.fn.agGridGetAllData = function (agGridOption) {
    let rowData = [];
    agGridOption.api.forEachNode(node => rowData.push(node.data));
    return rowData;
}

/**
 *
 * @param rows
 * @returns {[]}
 */
$.fn.agGridSerializeRowData = function (agGridOption) {
    let allFormsData = [];
    let rows = $.fn.agGridGetAllData(agGridOption);

    $.each(rows, function (i, rowObjects) {
        let obj = {};

        $.each(rowObjects, function (i, e) {
            if (/<\/?[a-z][\s\S]*>/i.test(e)) {
                obj[i] = $.fn.agGridSerializeHtml(e);
            } else {
                obj[i] = e;
            }
        });
        allFormsData.push(obj);
    });
    return allFormsData;
};

/**
 *
 * @param e
 * @returns {{}}
 */
$.fn.agGridSerializeHtml = function( e ) {
    e = e || '';
    let allDataObject = {};
    let allHtmlDataTemp = {};

    if ( e !== '' ) {
        $( e ).find( 'input,select,textarea' ).each( function( i ) {
            allHtmlDataTemp[ i ] = $( this );
        } );
    } else {
        $( 'input,select,textarea' ).each( function( i ) {
            allHtmlDataTemp[ i ] = $( this );
        } );
    }

    $.each( allHtmlDataTemp, function( i ) {
        let $input = $( this );
        let eName;
        let eVal;

        if ( ($input.attr( 'type' ) === 'submit') ||
            ($input.attr( 'type' ) === 'button') ) {
            return true;
        }

        if ( ($input.attr( 'name' ) !== undefined) && ($input.attr( 'name' ) !== '') ) {
            eName = $input.attr( 'name' ).trim();
        } else if ( ($input.attr( 'id' ) !== undefined) && ($input.attr( 'id' ) !== '') ) {
            eName = $input.attr( 'id' ).trim();
        } 

        if ( $input.val() !== undefined ) {
            if ( ($input.attr( 'type' ) === 'radio') || ($input.attr( 'type' ) === 'checkbox') ) {
                eVal = $input.is(":checked");
            } else {
                eVal = $input.val();
            }
        } else if ( $input.text() !== undefined ) {
            eVal = $input.text();
        }

        if ( eVal === undefined || eVal == null ) {
            eVal = '';
        }

        if ( eName !== undefined ) {
            let elementArr = [];
            if ( eName.indexOf( ' ' ) !== -1 ) {
                elementArr = eName.split( /(\s+)/ );
            } else {
                elementArr.push( eName );
            }

            $.each( elementArr, function( index, name ) {
                name = name.trim();
                if ( name !== '' ) {
                    allDataObject[ name ] = eVal;
                }
            } );
        }
    } );
    return allDataObject;
};

Before:

After:

Convert json object to form-serialized data

1 Answers1