jQuery - creating an array of objects containing key - value pairs

Question

I have the following HTML code :

<div class="input_data">
    <input type="text" name = 'firstname' class="fname">
    <input type="text" name = 'lastname' class="lname">
</div>
<br>
<br>
<div class="input_data">
    <input type="text" name = 'firstname'class="fname">
    <input type="text" name = 'lastname' class="lname">
</div>
<button id="sbmt">Submit</button>

I am trying to assign the pairs of strings from the inputs as object in a jQuery array through the following code :

$('#sbmt').on('click', function() {

    var this_row = {};
    //var all_rows = [];

    $('.input_data').each(function(){

        $('> input', this).each(function(){

            //this_row[$(this).attr('name')] = $(this).val();
            //this_row.push($(this).attr('name')) = $(this).val();
            keyvalue = $(this).attr('name');
            namevalue = $(this).val();
            alert(keyvalue + " is : " + namevalue);
            this_row[keyvalue] = namevalue;
            //all_rows.push({$(this).attr('name'):$(this).val()});
        });

    });

As you can see I have kept the statements with all_rows commented - actually it is giving error that use of "this" is not legal here.

That being done, the code in its current form is only storing the values from the second set of inputs.

I actually need to generate an array of objects like

[{firstname:firstname-1, lastname:lastname-1}, {firstname:firstname-2, lastname:lastname:2}]

How can I make that happen? Also I would like to know how to make the statement all_rows.push({$(this).attr('name'):$(this).val()}); work.

JHBonarius · Accepted Answer · 2021-09-14 12:50:30Z

2

You need something like this one:

$('#sbmt').on('click', function() {

    var all_rows = [];

    $('.input_data').each(function() {
        var this_row={};
        $(this).find("input").each(function () {
            keyvalue = $(this).attr('name');
            namevalue = $(this).val();
            this_row[keyvalue] = namevalue;
        });
        all_rows.push(this_row);

    });
    console.log(all_rows);
   });

https://jsfiddle.net/9kxxwz0n/

edited Sep 14, 2021 at 12:50

JHBonarius

11.5k3 gold badges28 silver badges53 bronze badges

answered Mar 20, 2016 at 5:01

Vasyl Moskalov

4,6403 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sukalyan Ghoshal Over a year ago

Thanks for your suggestions vasyl. but the problem is persisting - the array is showing only the last roes of inputs...

Vasyl Moskalov Over a year ago

I just run this code from jsfiddle and take a small screenshot. In all_rows persists all four input value splitted by two row. Screenshot: zimagez.com/miniature/screenshot-20032016-071511.php

Sukalyan Ghoshal Over a year ago

Vasyl - I'm sorry - I made some mistake about your suggestion. It is working just the way I want. Many thanks..!!

Collectives™ on Stack Overflow

jQuery - creating an array of objects containing key - value pairs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related