Concatenate the Parameter Name of a Javascript Function

Question

I have some working code which I'm trying to optimize using a loop but am having trouble concatenating the name of a parameter.

var objlocations = {};
$.get('https://example.com/something/ajax-state?somevar=' + somevar, function(data) {

  $.each(data, function(index,DBRow){
        
    objlocations['point1x'] = DBRow.Point01X;
    objlocations['point1y'] = DBRow.Point01Y;
    objlocations['point2x'] = DBRow.Point02X;
    objlocations['point2y'] = DBRow.Point02Y;
    objlocations['point3x'] = DBRow.Point03X;
    objlocations['point3y'] = DBRow.Point03Y;
    objlocations['point4x'] = DBRow.Point04X;
    objlocations['point4y'] = DBRow.Point04Y;
    // There are about 30 more of these needed

    var $grid = jQuery('#MyDiv');
    $grid.empty();
    for(var i=1;i<=4;i++) {

      var x = objlocations['point' + i + 'x'];
      var y = objlocations['point' + i + 'y'];
      // doesnt' work: var x = 'DBRow.Point0'+i+'X';
      // doesn't work: var y = 'DBRow.Point0'+i+'Y';

      var $PointLocation = jQuery('<img class="PointLocation" id="Grid-Point-' + i + '"' + 'src="../img/points/point.png" width="50px">').css({top:y + 'px', left:x + 'px'});
      $grid.append($PointLocation); 
    }
  });
});

For the variables "x" and "y" I'd like to loop through and directly use DBRow.PointxX rather than first manually dumping them into an object since there will be over 60 lines required.

As per the comment in the code I've tried var x = 'DBRow.Point0'+i+'X' which results in "x" having "DBRow.Point01X" etc as a string value.

If I try without the quotes like this: DBRow.Point0+i+X I get a console error stating that X is not defined.

I'll also have to do something about the leading 0 on the DBRow.Point##X but I may be able to do this in the database I'm pulling from.

I'm new to Javascript so hopefully this is something simple that I'm overlooking.

Edit: Final solution

$.get('https://example.com/something/ajax-state?somevar=' + somevar, function(data) {

  $.each(data, function(index,DBRow){

    var $grid = jQuery('#MyDiv');
    $grid.empty();
    for(var i=1;i<=32;i++) { 

      var ii = ('00'+i).slice(-2);

      var x = DBRow["Point"+ii+"X"];
      var y = DBRow["Point"+ii+"Y"];

      var $PointLocation = jQuery('<img class="PointLocation" id="Grid-Point-' + i + '"' + 'src="../img/points/point.png" width="50px">').css({top:y + 'px', left:x + 'px'});
      $grid.append($PointLocation); 
    }
  });
});

Have you tried using DBRow.Point01X; like DBRow["Point0"+i+"X"]? — Daniel Gale
– Daniel Gale, Commented Mar 2, 2018 at 4:13
No I had not tried that. Just tried and it appears to be working! Thank you. Is there any way I can add a leading 0 in my for loop for anything under 10? — someguy
– someguy, Commented Mar 2, 2018 at 4:21

Daniel Gale · Accepted Answer · 2018-03-02 04:31:07Z

1

Moved comment to answer for more explanation.

Objects in javascript can be accessed like named array items.

DBRow.Point01X is the same as DBRow['Point01X']

You could make a loop where the name is prepared then inserted into the array.

Ex:

i = (i < 10) ? ("0" + i) : i; // for leading zeros
var point = 'Point' + i + 'X';

objlocations['point'+i+'x'] = DBRow[point];

answered Mar 2, 2018 at 4:31

Daniel Gale

6634 silver badges13 bronze badges

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

1 Comment

someguy Over a year ago

Thanks again. I ended up finding a solution to the leading 0s which is working for me. I used your solution of DBRow["Point0"+i+"X"] directly in my loop which removed the need for the object / array entirely in my case. I'll edit my original post to show the final solution.

Animesh Kumar · Accepted Answer · 2018-03-02 04:44:31Z

0

 for(var i=1;i<=4;i++) {
      var xProperty = "Point0" + i + 'X';
      var yProperty = "Point0" + i + 'Y';
      var x = DBRow[xProperty];
      var y = DBRow[yProperty];
      var $PointLocation = jQuery('<img class="PointLocation" id="Grid-Point-' + i + '"' + 'src="../img/points/point.png" width="50px">').css({top:y + 'px', left:x + 'px'});
      $grid.append($PointLocation); 
    }

Since the properties are variable and not a literal, so you will have to use the bracket notation instead of the dot notation.

answered Mar 2, 2018 at 4:44

Animesh Kumar

2373 silver badges12 bronze badges

Collectives™ on Stack Overflow

Concatenate the Parameter Name of a Javascript Function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related