Jquery - Find partial match within an element

BLPraveen
July 30, 2024
63 views
3 votes
3 Answers

I have a dynamic elements and I need to fetch all adults first name and last name into an array of objects using jquery
like

[
  [
    {
      "first_name": "Anish",
      "last_name": "gopi"
    }, {
      "first_name": "Vinay",
      "last_name": "prasad"
    }
  ],
  [
    {
      "first_name": "Ananaya",
      "last_name": "vital"
    }, {
     "first_name": "Guru",
     "last_name": "govind"
    }
  ]
]

let i = 0;
$('.pax_details').each(function(index, item) {
  $(item).find('.adult_pax').each(function(index, adult) {
    console.log($(adult).find('input[name^="first_name_"]').val());
  });
  i++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="pax_details">
  <div class="adult_pax">
    <input name="first_name_1" value="Anish" />
    <input name="last_name_1" value="gopi" />
  </div>
  <div class="adult_pax">
    <input name="first_name_2" value="Vinay" />
    <input name="last_name_2" value="prasad" />
  </div>
</div>
<div class="pax_details">
  <div class="adult_pax">
    <input name="first_name_3" value="Ananaya" />
    <input name="last_name_3" value="vital" />
  </div>
  <div class="adult_pax">
    <input name="first_name_4" value="Guru" />
    <input name="last_name_4" value="govind" />
  </div>
</div>

Tags: javascript jquery

Answers

This solution does what you want:

Note that I added values to the HTML inputs for demonstration purposes

const results = $('.pax_details')
  .toArray()
  .map(detailElement => {
    return $('input', detailElement)
      .toArray()
      .reduce(
        (list, input, index) => {
          if (index % 2 === 0) {
            // runs for input 0, 2, 4, etc.
            return list.concat({ first_name: input.value });
          }
          // runs for input 1, 3, 5, etc.
          const item = list[list.length - 1];
          item.last_name = input.value;
          return list;
        },
        []
      );
  });
  
console.log(results);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="pax_details">
    <div class="adult_pax">
      <input name="first_name_1" value="A1">
      <input name="last_name_1" value="A2">
    </div>
    <div class="adult_pax">
      <input name="first_name_2" value="B1">
      <input name="last_name_2" value="B2">
    </div>
  </div>
  <div class="pax_details">
    <div class="adult_pax">
      <input name="first_name_3" value="C1">
      <input name="last_name_3" value="C2">
    </div>
    <div class="adult_pax">
      <input name="first_name_4" value="D1">
      <input name="last_name_4" value="D2">
    </div>
  </div>

It first scans for the .pax_details elements, then subsequently looks for all <input> elements within them.

To get what you ask (nested array), you indeed need to loop the pax_details

jQuery

let adults = $('.pax_details').map(function() {
  return [$(this).find('.adult_pax').map(function() {
    return [
      $(this)
      .find('input')
      .get()
      .reduce((obj, input) => (obj[input.name.replace(/_d{1,}$/, '')] = input.value, obj), {})
    ];
  }).get()];
}).get();

console.log(adults);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="pax_details">
  <div class="adult_pax">
    <input name="first_name_1" value="Anish" />
    <input name="last_name_1" value="gopi" />
  </div>
  <div class="adult_pax">
    <input name="first_name_2" value="Vinay" />
    <input name="last_name_2" value="prasad" />
  </div>
</div>
<div class="pax_details">
  <div class="adult_pax">
    <input name="first_name_3" value="Ananaya" />
    <input name="last_name_3" value="vital" />
  </div>
  <div class="adult_pax">
    <input name="first_name_4" value="Guru" />
    <input name="last_name_4" value="govind" />
  </div>
</div>

Plain JS

let adults =      Array.from(document.querySelectorAll('.pax_details'))
  .map(details => Array.from(details.querySelectorAll('.adult_pax'))
    .map(pax =>   Array.from(pax.querySelectorAll('input'))
      .reduce((obj, input) => (obj[input.name.replace(/_d{1,}$/, '')] = input.value, obj), {})
    )
  );
console.log(adults);

<div class="pax_details">
  <div class="adult_pax">
    <input name="first_name_1" value="Anish" />
    <input name="last_name_1" value="gopi" />
  </div>
  <div class="adult_pax">
    <input name="first_name_2" value="Vinay" />
    <input name="last_name_2" value="prasad" />
  </div>
</div>
<div class="pax_details">
  <div class="adult_pax">
    <input name="first_name_3" value="Ananaya" />
    <input name="last_name_3" value="vital" />
  </div>
  <div class="adult_pax">
    <input name="first_name_4" value="Guru" />
    <input name="last_name_4" value="govind" />
  </div>
</div>

The jQuery-way to do this would be to map all the details to an array of adults, where each adult is a reduction of the fields.

You can grab the input field’s name and use a regular expression to match on everything before the trailing underscore + number.

The trick here is to wrap the returned values in an square brackets. If you do not, you will get a flat list at the end.

const details = $('.pax_details').map(function() {
  return [$(this).find('.adult_pax').map(function() {
    return [$(this).find('input').toArray().reduce((acc, input) => {
      const $input = $(input);
      const [, name] = $input.attr('name').match(/^(w+)_d+$/);
      if (name) {
        acc[name] = $input.val().trim();
      }
      return acc;
    }, {})];
  }).toArray()];
}).toArray();

console.log(details);

.as-console-wrapper { top: 0; max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="pax_details">
  <div class="adult_pax">
    <input name="first_name_1" value="Anish">
    <input name="last_name_1" value="gopi">
  </div>
  <div class="adult_pax">
    <input name="first_name_2" value="Vinay">
    <input name="last_name_2" value="prasad">
  </div>
</div>
<div class="pax_details">
  <div class="adult_pax">
    <input name="first_name_3" value="Ananaya">
    <input name="last_name_3" value="vital">
  </div>
  <div class="adult_pax">
    <input name="first_name_4" value="Guru">
    <input name="last_name_4" value="govind">
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Find partial match within an element

Answers