Creating Object Key with jquery.each() loop

Question

I'm creating a namespace in javascript to loop through a form and create an object. The goal of the function when called is to loop through all of a certain form type and construct an object that has a key which is the html input's name and the value as its current value. However, it keeps returning undefined.

Any help would be greatly appreciated:

get_form_data.radio = function(container) { //will return the value 
    var data = {}; //function data object to return
    container.find('input[type="radio"]:checked').each(function() {

        var current_object = {}; //loop temporary object
        var current = $(this); //current element
        var current_key = current.attr('name'); //property category
        var current_value = current.attr('value'); //value to update the database with
        current_object[current_key] = current_value; //temporary object
        console.log(current_object.length); //RETURNS UNDEFINED
        $.extend(data, current_object);

    });

    console.log(data.length); //returns undefined
    return data;
}

It seems to me that this would work, albeit a bit roundabout as other comments are suggesting. Can we see the HTML? Do the inputs actually have names, and did they have names when the page was first loaded? — Zach Shipley
– Zach Shipley, Commented Jul 26, 2012 at 20:02
Hello, the inputs have names and they are statically built with php. I have a parent div with several forms and send each form to this namespace function as container. If I just alert a single value or name in the loop it works properly, but just doesn't work outside of the loop — JonMorehouse
– JonMorehouse, Commented Jul 26, 2012 at 20:23

Richard Neil Ilagan · Accepted Answer · 2012-07-26 20:11:25Z

11

You want to get the var current_object = {}; declaration out of the .each() call. Each iteration of the .each() function redeclares it, and effectively erases it. And forget about $.extend() as well.

var data = {};
container.find('input[type="radio"]:checked').each(function() {
    data[this.name] = this.value;
});
return data;

Untested though from a quick skim of your current code.

edited Jul 26, 2012 at 20:11

answered Jul 26, 2012 at 19:59

Richard Neil Ilagan

14.8k6 gold badges52 silver badges68 bronze badges

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

3 Comments

Zach Shipley Over a year ago

I'd add that it would probably pay to read the actual DOM property rather than the attributes, as the attributes are not always in sync. Shorter, too: data[this.name] = this.value;

jbabey Over a year ago

@ZachShipley agreed. no reason to wrap this in jquery at all.

JonMorehouse Over a year ago

hello for some reason I still got undefined here. However, alerting this.name or this.value alerts the correct value. The forms are working it seems because those values were what they should have been. Thanks for any help

levi · Accepted Answer · 2012-07-26 19:57:49Z

You need specify key and index value, something like thtat:

array.each(function(index, value) { 
  alert(index + ': ' + value); 
});

In your case:

get_form_data.radio = function(container) { //will return the value 
    var data = {}; //function data object to return
    container.find('input[type="radio"]:checked').each(function(index,value) {

        var current_object = {}; //loop temporary object
        var current = value; //current element
        var current_key = current.attr('name'); //property category
        var current_value = current.attr('value'); //value to update the database with
        current_object[current_key] = current_value; //temporary object
        console.log(current_object.length); //RETURNS UNDEFINED
        $.extend(data, current_object);

    });

    console.log(data.length); //returns undefined
    return data;
}

JonMorehouse · Accepted Answer · 2012-07-27 08:27:37Z

Problem solved by taking a look at the global scope. It seems that the code above worked but my global namespace was confusing current = $(this) inside the each loop and this.data which is the global object for form data.

heres my form_submit namespace:

this.data = {};

this.property_status = function() {

        var property_status = {};

        this.container.children('form').each(function() {
            var current = $(this);
            property_status[current.attr('data-property_id')] = get_form_data.radio(current);
        });

        $.extend(this.data, property_status);
    };

and the get_form_data namespace:

    get_form_data.radio = function(container) {//will return the value 

    var form_data = {};//function data object to return

    container.find('input[type="radio"]:checked').each(function() {

        form_data[this.name] = this.value;
    });


    return form_data;
}

Any suggestions on optimizing this?

Collectives™ on Stack Overflow

Creating Object Key with jquery.each() loop

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related