Question 10939 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Loop on html objects and obtain a single array of objects – Jquery

I have some html objects like:

<input id="myfield1" class="fields_to_iterate">
<input id="myfield2" class="fields_to_iterate">
<input id="myfield3" class="fields_to_iterate">
<input id="myfield4" class="fields_to_iterate">
<input id="myfield5" class="fields_to_iterate">

and if I do in javascript:

$('.fields_to_iterate').each( (index, element) => { 
    myObject.push( { [$(element).attr('id')] : $(element).val() } ); 
});

On console.log debug get as result an object like this:

transferBook: Array(7)
0 : {myfield1: 'value1'}
1 : {myfield2: 'value2'}
2 : {myfield3: 'value3'}
3 : {myfield4: 'value4'}
4 : {myfield5: 'value5'}
length: 5
[[Prototype]] : Array(0)

but I’d like to get only one array like:

transferBook: Array(1)
0 : {myfield1: 'value1', myfield2: 'value2', myfield3: 'value3', myfield4: 'value4', myfield5: 'value5'}
length: 1
[[Prototype]] : Array(0)

How I could modify my .each() to push in single array? Thanks to all! Cheers!

Tags:

4

Answers


  1. 0

    It seems like you want to create an object of key value pairs for each input’s id and value.

    const myObject = {}

$('.fields_to_iterate').each((index, element) => {
  const id = $(element).attr('id')
  const val = $(element).val()
  myObject[id] = val
});

console.log(myObject)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myfield1" class="fields_to_iterate" value="value1">
<input id="myfield2" class="fields_to_iterate" value="value2">
<input id="myfield3" class="fields_to_iterate" value="value3">
<input id="myfield4" class="fields_to_iterate" value="value4">
<input id="myfield5" class="fields_to_iterate" value="value5">
    Login or Signup to reply.
  2. 0

    If you need solution based on JQuery Use reduce instead each like this:

    <html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<input id="myfield1" value="x1" class="fields_to_iterate">
<input id="myfield2" value="x4" class="fields_to_iterate">
<input id="myfield3" class="fields_to_iterate">
<input id="myfield4" class="fields_to_iterate">
<input id="myfield5" class="fields_to_iterate">
<script>
    const myObject = $('.fields_to_iterate').get().reduce((acc, el) => {
        const obj = {};
        obj[$(el).attr('id')] = $(el).val();
        return { ...acc, ...obj };
    }, []);
    console.log(myObject);
</script>
</body>
</html>
    Login or Signup to reply.
  3. 0

    Who needs jQuery?

    const myObject = Object.fromEntries(
  Array.from(
    document.querySelectorAll(".fields_to_iterate"),
    ({ id, value }) => [id, value]
  )
);

console.log(myObject);
    <input id="myfield1" class="fields_to_iterate" value="one">
<input id="myfield2" class="fields_to_iterate" value="two">
<input id="myfield3" class="fields_to_iterate" value="three">
<input id="myfield4" class="fields_to_iterate" value="four">
<input id="myfield5" class="fields_to_iterate" value="five">

    See

    If you really want it in an array, simply wrap it in square brackets

    const myObject = [Object.fromEntries(...)];
    Login or Signup to reply.
  4. 0

    You can use jQuery’s map instead, and Object.fromEntries to create an object from an array of key-value pairs.

    let res = [Object.fromEntries($('.fields_to_iterate').map((i, el) => [[el.id, el.value]]).get())];
console.log(res);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myfield1" class="fields_to_iterate" value="value1">
<input id="myfield2" class="fields_to_iterate" value="value2">
<input id="myfield3" class="fields_to_iterate" value="value3">
<input id="myfield4" class="fields_to_iterate" value="value4">
<input id="myfield5" class="fields_to_iterate" value="value5">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search