Dynamically creating an object using eval() JS

Question

I am trying to dynamically create an object in javascript. Here is the JS code that I have written:

var table = $("#eidtPersonalInfoTbl");
var trs = table.find('tr');

var obj = { };

$(trs).each(function(index, row){
     var field = $(row).find('td').eq(0).html();
     var value = $(row).find('td').eq(1).html();
     eval('obj.' + field + ' = ' + value );
});

And here is the HTML markup for the table:


Whenever I try to execute this, it gives me this error

  Undefined variable Name

 
     Name 
     Name        


     Address
     Address 


    Area
     Area                                        


    Gender
    Male                                                                   
 
     Salutation 
     Dr                                      
   

    State
     State                                           

    

    City
     City                                        

 
     Postel Code 
     Postel Code                                         

 
     Phone# 
     04128741                                        

 
     Mobile# 
     03218741525                                     

 
     Cover Letter  
    Cover letter goes here

raina77ow · Accepted Answer

It's far easier, safer and faster to use this:

obj[field] = value;

... instead of eval('obj.' + field + ' = "' + value + '"'), which obviously has the same purpose.

You see what you see now because value should be wrapped in the quotation marks. For example, if both field and value are equal to 'Name' (string), the evalled expression as it stands now will look like...

obj.Name = Name

... obviously causing the 'Undefined variable Name' error.

Two sidenotes here. First, there's no sense wrapping trs in jQuery object again in this line...

$(trs).each(function(index, row)

... as it already IS a jQuery object (result of table.find('tr')). This redundancy is easier to see if you follow a simple convention: preceding names of all the variables that are used to store jQuery objects with $:

var $table = $("#eidtPersonalInfoTbl");
var $trs   = $table.find('tr');
// ...

// $($trs) - obviously redundant

Second, it's a bit wasting to go through DOM twice in these lines:

 var field = $(row).find('td').eq(0).html();
 var value = $(row).find('td').eq(1).html();

I'd rather have it rewritten it like this:

 var $tds = $(row).find('td');
 var field = $tds.eq(0).html(); // or just $tds[0].innerHTML;
 var value = $tds.eq(1).html(); // or just $tds[1].innerHTML;

Dynamically creating an object using eval() JS

Answers (1)

Related Questions