Conversione elementi DOM in oggetti

Question

mi hanno valori di modulo come seguire

<input name="Document[0][category]" value="12" type="text"> 
<input name="Document[0][filename]" value="abca.png" type="text" > 

voglio serializzare a un oggetto da js o jquery.

Document[0]={ 
    category : 12 
    filename : 'abca.png' 
}; 

cerco usare serializeArray e analizzare di opporsi, ma non va bene

Answer 1

metodo a basso-tech:

var Document = []; 
 
var inputs = document.querySelectorAll('input'); 
 
Array.prototype.forEach.call(inputs, function(input) { 
 
    var name = input.getAttribute('name'); 
 
    var prevProp = null; 
 
    var obj = Document; 
 
    name.replace(/\[(.*?)\]/g, function(m, prop) { 
 
    if (prevProp) obj = obj[prevProp] || (obj[prevProp] = {}); 
 
    prevProp = prop; 
 
    }); 
 
    obj[prevProp] = input.value; 
 
}); 
 
console.log(Document);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input name="Document[0][category]" value="12" > 
 
<input name="Document[0][filename]" value="abca.png" > 
 
</form> 
 

 
<!-- results pane console output; see http://meta.stackexchange.com/a/242491 --> 
 
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

EDIT: come guest271314 note, utilizzando Document come un nome di variabile potrebbe non essere la più grande idea.

Answer 2

check this out

$.fn.serializeObject = function() 
 
{ 
 
    var o = {}; 
 
    var a = this.serializeArray(); 
 
    $.each(a, function() { 
 
     if (o[this.name] !== undefined) { 
 
      if (!o[this.name].push) { 
 
       o[this.name] = [o[this.name]]; 
 
      } 
 
      o[this.name].push(this.value || ''); 
 
     } else { 
 
      o[this.name] = this.value || ''; 
 
     } 
 
    }); 
 
    return o; 
 
}; 
 

 
$(function() { 
 
    $('form').submit(function() { 
 
     $('#result').text(JSON.stringify($('form').serializeObject())); 
 
     return false; 
 
    }); 
 
});

form { 
 
    line-height: 2em; 
 
} 
 
p { 
 
    margin: 5px 0; 
 
} 
 
h2 { 
 
    margin: 10px 0; 
 
    font-size: 1.2em; 
 
    font-weight: bold 
 
} 
 
#result { 
 
    margin: 10px; 
 
    background: #eee; 
 
    padding: 10px; 
 
    height: 40px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2>Form</h2> 
 
<form action="" method="post"> 
 
First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/> 
 
Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/> 
 
Gender:<br/> 
 
Male:<input type="radio" name="gender" value="Male"/><br/> 
 
Female:<input type="radio" name="gender" value="Female"/><br/> 
 
Favorite Food:<br/> 
 
Steak:<input type="checkbox" name="food[]" value="Steak"/><br/> 
 
Pizza:<input type="checkbox" name="food[]" value="Pizza"/><br/> 
 
Chicken:<input type="checkbox" name="food[]" value="Chicken"/><br/> 
 
<textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/> 
 
Select a Level of Education:<br/> 
 
<select name="education"> 
 
<option value="Jr.High">Jr.High</option> 
 
<option value="HighSchool">HighSchool</option> 
 
<option value="College">College</option></select><br/> 
 
Select your favorite time of day:<br/> 
 
<select size="3" name="TofD"> 
 
<option value="Morning">Morning</option> 
 
<option value="Day">Day</option> 
 
<option value="Night">Night</option></select> 
 
<p><input type="submit" /></p> 
 
</form> 
 
<h2>JSON</h2> 
 
<pre id="result"> 
 
</pre>

trovato qui: http://jsfiddle.net/sxGtM/3/

Answer 3

Considerare jQue la funzione di ry serializeArray():

var results = $("#some_id").serializeArray(); 

Questo vi darà un array di oggetti che si può lavorare con in JavaScript. Io non credo che tu sia in grado di dare a questi oggetti nomi personalizzati, come si sta cercando di fare qui sto assumendo:

<input name="Document[0][category]" value="12" type="text"> 
      ^^^^^^^^^^^ 

Se necessità per citarne questi risultati, io suggerirei serializzandolo con jQuery, quindi trasferendo i dati sul proprio oggetto.

Working Fiddle