How to get array input data using jquery?

Hola
January 20, 2024
189 views
1 vote
2 Answers

My input field is as below:

<input type="hidden"  name="data[{{ $parentIndex }}][{{ $index }}]" value="{{ $value }}">

My sample data:

<input type="hidden"  name="data[0][0]" value="Name">
<input type="hidden"  name="data[0][1]" value="contact_email">
<input type="hidden"  name="data[0][2]" value="phone number">
<input type="hidden"  name="data[0][3]" value="contact_location">
<input type="hidden"  name="data[0][4]" value="">
                                                                                                                <input type="hidden"  name="data[1][0]" value="John Doe">
<input type="hidden"  name="data[1][1]" value="[email protected]">
<input type="hidden"  name="data[1][2]" value="15551-234567">
<input type="hidden"  name="data[1][3]" value="New York, NY">
<input type="hidden"  name="data[1][4]" value="230">
                                                                                                                <input type="hidden"  name="data[2][0]" value="Jane Smith">
<input type="hidden"  name="data[2][1]" value="[email protected]">
<input type="hidden"  name="data[2][2]" value="15552345678">
<input type="hidden"  name="data[2][3]" value="Los Angeles, CA">
<input type="hidden"  name="data[2][4]" value="5201">
                                                                                                                <input type="hidden"  name="data[3][0]" value="Robert Johnson">
<input type="hidden"  name="data[3][1]" value="[email protected]">
<input type="hidden"  name="data[3][2]" value="8.80156E+13">
<input type="hidden"  name="data[3][3]" value="Chicago, IL">
<input type="hidden"  name="data[3][4]" value="4110"

I was to access the data using below code:

var   data =$('input[name="data[]"]').map(function () {
    return $(this).val();
}).get();

But it results empty array while I console.log(data) the data variable.

I have used following lines of code as well but it prints single array by combining the whole data.

var   data =$("input[name^='data']").map(function () {     return $(this).val(); }).get();

How do I get the array input here?

Tags: javascript jquery

Answers

Here is one way of solving the issue. The form entries can be supplied by jQuery’s .serializeArray() method or by using the Vanilla-JS’s FormData class:

const formEntries_vanillaJS=[...new FormData(document.getElementById("one")).entries()];
const formEntries_jQuery=$("#one").serializeArray().map(({name,value})=>[name,value]);

function processForm(arr){
 const o={};
 arr.forEach(([name,value])=>{
  const [nam,i,j]=name.split(/[[]]+/);
  if(j) { // we have TWO indexes for nam
   const t=o[nam]=o[nam]||[];
   (t[+i]=t[+i]||[])[+j]=value;
  } else o[nam]=value; // we have NO index for nam
 });
 return o;
}

console.log(processForm(formEntries_jQuery));
console.log(processForm(formEntries_vanillaJS));

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<form id="one">
<input type="hidden"  name="data[0][0]" value="Name">
<input type="hidden"  name="data[0][1]" value="contact_email">
<input type="hidden"  name="data[0][2]" value="phone number">
<input type="hidden"  name="data[0][3]" value="contact_location">
<input type="hidden"  name="data[0][4]" value="">
<input type="hidden"  name="data[1][0]" value="John Doe">
<input type="hidden"  name="data[1][1]" value="[email protected]">
<input type="hidden"  name="data[1][2]" value="15551-234567">
<input type="hidden"  name="data[1][3]" value="New York, NY">
<input type="hidden"  name="data[1][4]" value="230">
<input type="hidden"  name="data[2][0]" value="Jane Smith">
<input type="hidden"  name="data[2][1]" value="[email protected]">
<input type="hidden"  name="data[2][2]" value="15552345678">
<input type="hidden"  name="data[2][3]" value="Los Angeles, CA">
<input type="hidden"  name="data[2][4]" value="5201">
<input type="hidden"  name="data[3][0]" value="Robert Johnson">
<input type="hidden"  name="data[3][1]" value="[email protected]">
<input type="hidden"  name="data[3][2]" value="8.80156E+13">
<input type="hidden"  name="data[3][3]" value="Chicago, IL">
<input type="hidden"  name="data[3][4]" value="4110">
<input type="hidden"  name="extraData" value="something else">
</form>

The function processForm() is just a simple implementation in which I assume that the name attribute of an <input> element can have either two indexes (i and j) or none. I then treat the value of the input element accordingly by either creating a sub- and sub-array for nam in o and placing value there or by storing value in the string-typed property nam.

You can use regex in css selector, based on example data :

<input type="hidden"  name="data[0][0]" value="Name">
<input type="hidden"  name="data[0][1]" value="contact_email">
<input type="hidden"  name="data[0][2]" value="phone number">
<input type="hidden"  name="data[0][3]" value="contact_location">
<input type="hidden"  name="data[0][4]" value="zip_code">

<input type="hidden"  name="data[1][0]" value="John Doe">
<input type="hidden"  name="data[1][1]" value="[email protected]">
<input type="hidden"  name="data[1][2]" value="15551-234567">
<input type="hidden"  name="data[1][3]" value="New York, NY">
<input type="hidden"  name="data[1][4]" value="230">

<input type="hidden"  name="data[2][0]" value="Jane Smith">
<input type="hidden"  name="data[2][1]" value="[email protected]">
<input type="hidden"  name="data[2][2]" value="15552345678">
<input type="hidden"  name="data[2][3]" value="Los Angeles, CA">
<input type="hidden"  name="data[2][4]" value="5201">

<input type="hidden"  name="data[3][0]" value="Robert Johnson">
<input type="hidden"  name="data[3][1]" value="[email protected]">
<input type="hidden"  name="data[3][2]" value="8.80156E+13">
<input type="hidden"  name="data[3][3]" value="Chicago, IL">
<input type="hidden"  name="data[3][4]" value="4110">

And then use JQuery to map them :

let data = [];

// Get headers
$("input[name^='data[0]'").map((pi, el) => {
    let head = $(el).val();

    // Get data rows based on index of header
    $(`input:not([name^='data[0]'])[name$='[${pi}]']`).map((i, pel) => {
    // Create new row for index 0 because the data row retrieved by index of header
    if(pi == 0) data.push({});
    let val = $(pel).val();

    // Map the value
    data[i][head] = val;
  });
});


console.log(data);

The idea is to map the header at the first row, and the data for the next row.

The header row has data[0] pattern, and not for the data row, so we can use :not() selector to exclude header row

Please signup or login to give your own answer.

Click here to cancel reply.