Tips for accessing associative array elements using variables as field names

Question

Tips for accessing associative array elements using variables as field names

Imagine you have an Angular project and you want to animate a clicked element with jQuery. The element has a position: relative. You decide to pass the direction of the animation using a parameter variable as shown in this example:

onClickFoo(event :MouseEvent, dir :string) :void {
   let targetId :string = (event.currentTarget as Element).id;
   $("#" + targetId).animate({
      dir: "20px"
   });
}

The issue here is that the code ends up assigning a dir=20 attribute to the HTML element instead of interpreting it as a variable. It seems like the compiler is treating 'dir' as a string rather than a variable.

This problem might be caused by the combination of jQuery and TypeScript. If you need to use variables to determine the animation direction, what could be going wrong in this scenario?

Is there a way to make the compiler recognize dir as a variable, rather than just plain text?

javascript jquery angular typescript

Answer 1

Answer №1

If you want to achieve a specific behavior during object initialization, you can utilize computed property names.

$("#" + targetId).animate({
  [dir]: "20px"
});

Alternatively, you can also implement this behavior after the object has been created:

onClickFoo(event :MouseEvent, dir :string) :void {
   let targetId :string = (event.currentTarget as Element).id;
   const animationProps = {};
   animationProps[dir] = "20px";
   $("#" + targetId).animate(animationProps);
}

Answer 2

If you want to achieve a specific behavior during object initialization, you can utilize computed property names.

$("#" + targetId).animate({
  [dir]: "20px"
});

Alternatively, you can also implement this behavior after the object has been created:

onClickFoo(event :MouseEvent, dir :string) :void {
   let targetId :string = (event.currentTarget as Element).id;
   const animationProps = {};
   animationProps[dir] = "20px";
   $("#" + targetId).animate(animationProps);
}

Tips for accessing associative array elements using variables as field names

Answer №1

Similar questions

The CSS and JavaScript in pure form are not functioning properly upon deployment in Django

Trigger a jQuery event when an element is moved to a new line

What is the best way to incorporate a designated waiting period into the fulfillment of a promise?

Calculate a range while meeting a specific condition using JavaScript

Rotating a loaded file using THREE.js

Incorrect data is being shared through social sharing links

Numerous memberships for a single assortment within MeteorJS

The 'in' operator cannot be used in Jquery to search for 'display' in a value that is undefined

When it comes to using the text() function, the statement encounters difficulty

Sorting JSON arrays in Typescript or Angular with a custom order

The Combination of Bootstrap 4 and the jQuery Validation Plugin

The Great Gatsby - Unable to access property 'component---src-pages-index-jsx' due to its undefined nature

Tips for implementing multiple nested routes using Vue.js?

Utilizing the default event object in ag-Grid's event methods with JavaScript

I am attempting to swap values within table cells using AngularJS. Would it be recommended to utilize ngBind or ngModel, or is there another approach that would

Add CSS file to the HTML head by substituting the <link> tag

Is there a way to extract data from a single line?

The issue with Vuex and Typescript is that when using mutation object payloads, they are consistently undefined

Oops! There was an issue with building the module in ./src/index.js using babel-loader

Gatsby Image Sharp Troubleshooting: Resolving Errors