Create assoc array from jQuery .each loop

Question

A straight-forward jQuery $.each loop over a table row. I am not so good with objects and am running into difficulty with the .push() method.

I should be getting:

[{"buyerPoINPUT":"1234567"},{"jobINPUT":"Replace grommit"},{"shipMethodINPUT":"etc"}]

Instead, I am getting:

[{"t1":"1234567"},{"t1":"Replace grommit"},{"t1":"etc"}]

Why am I getting the t1 variable name, repeated, instead of the t1 var contents (id attribute)?

jsFiddle

HTML:

    <div id="summaryTableDIV" class="b1">
        <table id="summaryTable">
            <thead>
                <th id="buyerPoTH">PO NO.</th><th id="jobTH">JOB</th><th id="shipMethodTH">SHIPPING<br>METHOD</th><th id="shipTermsTH">SHIPPING<br>TERMS</th><th id="payTermsTH">PAYMENT<br>TERMS</th><th id="blankTH"></th>
            </thead>
            <tbody>
                <td id="buyerPoTD"   ><input type="text" id="buyerPoINPUT"    value="1234567" /></td>
                <td id="jobTD"       ><input type="text" id="jobINPUT"        value="Replace grommit" /></td>
                <td id="shipMethodTD"><input type="text" id="shipMethodINPUT" value="Loomis or DHL" /></td>
                <td id="shipTermsTD" ><input type="text" id="shipTermsINPUT"  value="FOB Washington" /></td>
                <td id="payTermsTD"  ><input type="text" id="shipMethodINPUT" value="see below" /></td>
                <td id="blankTD"     ><input type="text" id="blankINPUT" value="Okay to proceed" /></td>
            </tbody>
        </table>
    </div><!-- #summaryTableDIV -->

js/jQ:

var objSumTbl = new Array();

$("#summaryTable > tbody > tr > td > input").each(function(){
    var thisTD = $(this);
    var t1 = thisTD.attr('id');
    var t2 = thisTD.val();
    objSumTbl.push({
        t1 : t2
    });
});
alert( JSON.stringify(objSumTbl) );

Have you tried objSumTbl.push ({ $(this).attr('id') : t2}) directly — user3383479
– user3383479, Commented Mar 8, 2015 at 1:10

WorldFS · Accepted Answer · 2015-03-08 16:03:06Z

2

When you use object notation as {key:value}, 'key' will always be considered as a string constant instead of a variable name, you need to use object[key_name_var] notation.

This should work:

var thisTD = $(this);
var t1 = thisTD.attr('id');
var t2 = thisTD.val();
var new_obj = {};
new_obj[t1] = t2;
objSumTbl.push(new_obj);

Update: Based on our discussion in comments, your desired result should look like this:

{"buyerPoINPUT":"1234567","jobINPUT":"Replace grommit","shipMethodINPUT":"etc"}

Then you should define objSumTbl as a object, and use [key] notation to setup values inside the loop:

var objSumTbl = {};

$("#summaryTable > tbody > tr > td > input").each(function(){
    var thisTD = $(this);
    var t1 = thisTD.attr('id');
    var t2 = thisTD.val();
    objSumTbl[t1] = t2;
});
alert( JSON.stringify(objSumTbl) );

To iterate through all values inside a object, use

Object.keys(objSumTbl)

to get an array of all keys in objSumTbl, then do a for loop on that array:

var keys = Object.keys(objSumTbl);
for(i=0;i<keys.length;i++){
    console.log(objSumTbl[ keys[i] ]);
}

edited Mar 8, 2015 at 16:03

answered Mar 8, 2015 at 1:01

WorldFS

4545 silver badges9 bronze badges

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

5 Comments

crashwap Over a year ago

If I wanted the output to look like this, standard array, how would i do it: ["buyerPoINPUT":"1234567","jobINPUT":"Replace grommit","shipMethodINPUT":"etc"] If possible, please edit your answer, and add response at bottom. (The reason I ask is that I will be storing as json in a DB and I wish the easiest possible format for later retrieval, re-populating a new table)

WorldFS Over a year ago

That's not a valid array notation, I think what you want is a object instead of an array? like {"buyerPoINPUT":"1234567","jobINPUT":"Replace grommit","shipMethodINPUT":"etc"}?

crashwap Over a year ago

Yes, you are right ! And what would a loop look like to put everything back in the table? (Not the IDs, they will be there already, just the data)

WorldFS Over a year ago

For saving, define objSumTbl as object and use objSumTbl[t1]=t2; in the loop. For loading, use Object.keys(objVarName) to get an array of keys objVarName has, then do a for loop on that array.

crashwap Over a year ago

Fantastic, thanks. Accepted. Updated jsFiddle for future readers

David · Accepted Answer · 2015-03-08 00:59:37Z

2

It turns out that defining an object in JavaScript doesn't interpret the key part of the key/value pairs as variables. This is literally naming the property t1 instead of the value of the t1 variable.

You can, however, create the object separately and use the variable to reference a property on the object to define that property. Something like this:

var objSumTbl = new Array();

$("#summaryTable > tbody > tr > td > input").each(function(){
    var thisTD = $(this);
    var t1 = thisTD.attr('id');
    var t2 = thisTD.val();
    var newObj = {};
    newObj[t1] = t2;
    objSumTbl.push(newObj);
});
alert( JSON.stringify(objSumTbl) );

answered Mar 8, 2015 at 0:59

David

221k42 gold badges245 silver badges337 bronze badges

Comments

bto.rdz · Accepted Answer · 2015-03-08 00:58:54Z

1

thats not how you make an object property variable

try this way:

var objSumTbl = new Array();
$("#summaryTable > tbody > tr > td > input").each(function(){
    var thisTD = $(this);
    var t1 = thisTD.attr('id');
    var t2 = thisTD.val();
    var obj = {};
    obj[t1] = t2;
    objSumTbl.push(obj);
});

alert( JSON.stringify(objSumTbl) );

answered Mar 8, 2015 at 0:58

bto.rdz

6,7404 gold badges41 silver badges56 bronze badges

Collectives™ on Stack Overflow

Create assoc array from jQuery .each loop

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related