Here's a JSFiddle.
If you want to store the object in an input field, you can use JSON.stringify():
//Pass your array (or JSON object) into JSON.stringify:
JSON.stringify([{id:1, product_id: 2, name: 'stack'},
{id: 2, product_id: 2, name: 'overflow'}] )
which will yield:
"[{"id":1,"product_id":2,"name":"stack"},{"id":2,"product_id":2,"name":"overflow"}]"
You can store this value in a hidden field (or a data attribute):
<input type="hidden" id="project" value="[{'id':1,'product_id':2,'name':'stack"',{'id':2,'product_id':2,'name':'overflow'}]" />
Obviously, you can combine these steps (or do it through PHP / Rails / ...)
$('#project').val(JSON.stringify([1,2,3]));
You can then decode this using, for instance, jQuery:
$.parseJSON($('#project').val());
This should allow you to use the process you are using, but store Javascript objects in your input fields. Hope this helps!