[FIXED] How to customize key-value pairs when using .serializeArray() Javascript?

Issue

Code example:

        $('#simpan').click(function(){
            var data = $('.serialize').serializeArray();
            console.log(data)
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="row">
        <div class="col-lg-12">
            <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="belum kawin" data-title="Perkawinan"><b> Belum Kawin</b></label>&emsp;
            <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="kawin" data-title="Perkawinan"><b> Kawin</b></label>&emsp;
            <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="duda/janda" data-title="Perkawinan"><b> Duda/Janda</b></label>&emsp;
            <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="bawah umur" data-title="Perkawinan"><b> Bawah Umur</b></label>&emsp;
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <input type="text" name="pekerjaan" id="" class="form-control form-control-sm serialize" placeholder="Pekerjaan..." data-title="Pekerjaan">
        </div>
    </div>
  <div class="row">
        <button type="button" class="btn btn-sm btn-outline-success" id="simpan">SIMPAN</button>
    </div>

The result will be an array of object with key->value pairs of name and value. How to add additional key when we execute .serializeArray()?

The desired output is :

[
  {
    "name": "perkawinan",
    "value": "kawin",
    "title": "Status Perkawinan",
    "type": "radio"
  },
  {
    "name": "pekerjaan",
    "value": "",
    "title": "Pekerjaan Pasien",
    "type": "text"
  }
] 

Solution

Sorry for the late reply, was busy with sme works... You can do this in two way

HTML

<div class="container">
    <div class="row">
        <form action="" method="post" enctype="multipart/form-data" class="serialize">
            <div clas="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" name="perkawinan" class="custom-control-input" value="Belum Kawin" data-title="Title 1">
                  <label class="custom-control-label" for="customRadioInline1">Belum Kawin</label>
                
                  <input type="radio" name="perkawinan" class="custom-control-input" value="Duda/Janda"  data-title="Title 2">
                  <label class="custom-control-label" >Duda/Janda</label>
                </div>
                
                <div class="form-group" style="margin:15px 0">
                    <label>Pekerjaan</label>
                    <input type="text" name="pekerjaan" class="form-control" placeholder="Pekerjaan"  data-title="Title 3">
                </div>
            </div>
            
            <div clas="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <input name="submit" type="button" value="Submit" id="simpan" class="btn btn-success">
            </div>
        </form>
        
        <div clas="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="output" style="margin-top:20px"></div>
    </div>
</div>

Method 1

This will return the object even if the text box value is null

<script type="text/javascript">
$(function()
{
    $('#simpan').on('click',function()
    {
        var data = $('.serialize  :input').serializeArray();
        
        var data = $.each(data, function(i,obj){obj.title = $("input[name='"+obj['name']+"']").data('title');obj.type = $("input[name='"+obj['name']+"']").attr('type');});
        $('#output').html(JSON.stringify(data))
    })
});
</script>

Method 2

This will return objects which have values

<script type="text/javascript">
$(function()
{
    $('#simpan').on('click',function()
    {
        var data = $( ".serialize :input").filter(function () {return !!this.value;}).serializeArray();
        
        var data = $.each(data, function(i,obj){obj.title = $("input[name='"+obj.name+"']").data('title');obj.type = $("input[name='"+obj.name+"']").attr('type');});
        $('#output').html(JSON.stringify(data))
    })
});
</script>

here is a working fiddle JSFiddle

Answered By - Snm

Answer Checked By - Willingham (PHPFixing Volunteer)