how to get data from inputs as array using Jquery?

January 5, 2023

hello guys i have many input fields and i want get it as array data like this

        array (
                'gender' => "male",
                "height" => "180",
                'weight' => '90',
                'value' = '#55'
        ),
        array (
                'gender' => "male",
                "height" => "177",
                'weight' => '68',
                'value' = '#66'
        ),
        array (
                'gender' => "female",
                "height" => "150",
                'weight' => '55',
                'value' = '#77'
        ),

and this is the input fields that I want to export it into array data as I showed you

        <input type="text" gender='male' height='180' weight='90' value='#55' class='get-my-data'>
        <input type="text" gender='male' height='177' weight='68' value='#66' class='get-my-data'>
        <input type="text" gender='female' height='150' weight='55' value='#77' class='get-my-data'>

>Solution :

If you want to actually use JQuery and not vanilla JS that is preferred, something like that should work:

const data = $('.get-my-data').map(function() {
  return {
    gender: $(this).attr('gender'),
    height: $(this).attr('height'),
    weight: $(this).attr('weight'),
    value: $(this).attr('value')
  };
}).get();

and you would get an array of objects: [{…}, {…}, …]