Retrieve all inputs belonging to a certain array name into a jquery variable

Question

Suppose I have this html:

<td>
  <input type="hidden" name="params[test][index]" value="0">
  <input type="hidden" name="params[test][name]" value="2">
  <input type="hidden" name="params[other][]" value="0">
  <input type="hidden" name="params[test2]" value="0">
</td>

And I want to grab all the inputs of the params array into my jquery as an array or as a json:

(not sure of the syntax but something like that)

var $params = { test => {index =>0, name=>2},other=>[0],test2=>0};

What should I do?

Can you make this work instead? It might save you a lot of trouble. http://api.jquery.com/serializeArray/ — 000, Mar 30 '17 at 16:58
in my javascript, I want to do something like this: `var params = $(this).closest("td").next().find("input[name^='params']").convert_them_to_array();` and then i will receive my expected array — user4495098, Mar 30 '17 at 17:00
@mplungjan OP is not trying to select elements, but create an object of property, values reflecting element attributes — guest271314, Mar 30 '17 at 17:10
Yes it's about retrieving the elements...My objective is to include this array into another array and send them as post params. — user4495098, Mar 30 '17 at 17:17

guest271314 · Answer 1 · 2017-04-01T03:05:07.700

You can create a plain object, iterate input elements using $.each(), use .split() with RegExp

var params = {};

$.each($("td input"), function(_, el) {
  var param = el.name.split(/^\w+(?=\[)|\[|\]/).filter(Boolean).pop();
  params[param] = el.value;
});

console.log(params);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
  <input type="hidden" name="params[test][index]" value="0">
  <input type="hidden" name="params[test][name]" value="2">
  <input type="hidden" name="params[other][]" value="0">
  <input type="hidden" name="params[test2]" value="0">
</td>
</tr>
</table>

Edit, Updated

You can use if, if..else conditions and statements, RegExp to parse .name attributes to get expected result described at OP

var params = {};
var re = /\[|\]/g;

$.each($("td input"), function(_, el) {
  var param = el.name.match(/\[\]|\[\w+\]/g);
  var prop = param.shift().replace(re, "");
  if (param.length) {
    if (!(prop in params) && param[0] !== "[]") {
      params[prop] = {};
    }
    if (prop in params) {
      params[prop][param.shift().replace(re, "")] = el.value;
    } else if (param[0] === "[]") {
      params[prop] = [el.value];
    }
  } else {
    params[prop] = el.value;
  }
});

console.log(params);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table>
  <tr>
    <td>
      <input type="hidden" name="params[test][index]" value="0">
      <input type="hidden" name="params[test][name]" value="2">
      <input type="hidden" name="params[other][]" value="0">
      <input type="hidden" name="params[test2]" value="0">
    </td>
  </tr>
</table>

This won't really work because sometimes I have to push elements for example "other" should be "other":["0"]. Is there a workaround for this issue? — user4495098, Mar 30 '17 at 17:15
@user4495098 What is the algorithm for creating key, value pairs within object? — guest271314, Mar 30 '17 at 17:16
It could be of variable length: sometimes 1 dimension, sometimes 2, sometimes 3... I tried to use the eval method to set the array elements such as : `eval("params[test][index]=0");` but it won't let me do that because params[test] is not defined... — user4495098, Mar 30 '17 at 17:19
The first string within brackets is property name of an object, the second string within brackets at `.name` attribute is name of nested object with value set to `.value` of attribute? If second `[]` does not contain string value, set `.value` within bracket as value? — guest271314, Mar 30 '17 at 17:22

Retrieve all inputs belonging to a certain array name into a jquery variable

1 Answers1