CODEWITHSUNDEEP
javascriptlaravelserializationmultipleselectionserializearray
Niklesh Raut
Niklesh Raut

Reputation: 34914

How to change serializeArray to normal object

I using serializeArray to get all element and I am getting object like 

[{name: "code[1][barcode]", value: "45534"},
{name: "code[1][rf_id]", value: "535353"},
{name: "code[1][serialize]", value: ""},
{name: "code[2][barcode]", value: "45534"},
{name: "code[2][rf_id]", value: "535353"},
{name: "code[2][serialize]", value: ""},
{name: "custodian[]", value: "3"},
{name: "custodian[]", value: "4"},
{name: "custodian[]", value: "5"}]

And I want to convert it like this

{
    code:[
            {barcode:"45534",rf_id:"535353",serialize:""},
            {barcode:"45534",rf_id:"535353",serialize:""}
        ],
    custodian: [3,4,5]
}

Currently I am using this script 

var x = $('form#acquiredetail').serializeArray();
console.log(x);
var formData = {};
$.each(x, function(i, field){
    if(field.value.trim() != ""){
      formData[field.name] = field.value;
    }
});

And getting output as

Although I am able to get value of code properly but in backend/Laravel but the problem is with custodian, I am getting last value, 

custodian[]:"5"

How can I fix this. Or any better solution for this ?

My goal is to pass all element value to php with short and common code. Please suggest if any alternative of this.

Upvotes: 0

Views: 1624

Answers (2)

sricheta ruj
sricheta ruj

Reputation: 331

Run the code snippet and enjoy :) 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var x = 
[{name: "code[1][barcode]", value: "45534"},
{name: "code[1][rf_id]", value: "535353"},
{name: "code[1][serialize]", value: ""},
{name: "code[2][barcode]", value: "45534"},
{name: "code[2][rf_id]", value: "535353"},
{name: "code[2][serialize]", value: ""},
{name: "custodian[]", value: "3"},
{name: "custodian[]", value: "4"},
{name: "custodian[]", value: "5"}];

   var formData = {};
    $.each(x, function(i, field){
    	if(field.value.trim() != ""){
    		if(formData[field.name] != undefined){
    			var val = formData[field.name];
    			if(!Array.isArray(val)){
    				 arr = [val];
    			}
    			arr.push(field.value.trim());
    			formData[field.name] = arr;
    		}else{
    		  formData[field.name] = field.value;
    		}
        }
    });
    console.log(formData );
    </script>

Upvotes: 2

Joschi
Joschi

Reputation: 2974

You will have to change your serialisation to look if an element ends with an array denoter [] and rebuild your keys according to the count of elements:

var x = [{name: "code[1][barcode]", value: "45534"},
{name: "code[1][rf_id]", value: "535353"},
{name: "code[1][serialize]", value: ""},
{name: "code[2][barcode]", value: "45534"},
{name: "code[2][rf_id]", value: "535353"},
{name: "code[2][serialize]", value: ""},
{name: "custodian[]", value: "3"},
{name: "custodian[]", value: "4"},
{name: "custodian[]", value: "5"}];


var formData = {};
var formDataArrays = {};

$.each(x, function(i, field){
    if(field.value.trim() != ""){
      if (/\[\]$/.test(field.name)) {
        var fName = field.name.substr(0,field.name.length-2);
        if (!formDataArrays[fName]) {
          formDataArrays[fName] = [];
        }
        formData[fName+"["+formDataArrays[fName].length+"]"] = field.value;
        formDataArrays[fName].push(field.value);
      } else {
        formData[field.name] = field.value;
      }
    }
});

console.info(formData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 2

Related Questions