What is the process for retrieving an object's attribute as a variable?

Question

What is the process for retrieving an object's attribute as a variable?

I am dealing with two distinct objects:

object1={
   type: 'obj1',
   nName: 'nName'
}

object2={
   type: 'obj2',
   pName: 'pName'
}

Within my JavaScript code, I have:

object=GET_OBJECT();

The GET_OBJECT() method will return either object1 or object2. My goal is to access the name attribute of the object, which could be either nName or pName.

I have a method in place to retrieve the name (pName or nName) of the returned object:

function getName(Object, name){
      return object.name;
}

I want the name to be a variable, allowing me to access either pName or nName in a flexible manner:

object=GET_OBJECT();

var name='';

if(object.type=='obj1')
   name='nName';
else
   name='pName';

var finalName=getName(object, name);

Unfortunately, it appears as though this setup may not work as intended, since in:

function getName(Object, name){
          return object.name;
    }

Is there a way in JavaScript to access an attribute as a variable?

javascript javascript-framework

Answer 1

Answer №1

Here's a suggestion:

function fetchName(obj, key) {
    return obj[key];
}

Answer 2

Here's a suggestion:

function fetchName(obj, key) {
    return obj[key];
}

Answer 3

Answer №2

I often ponder why people offer solutions instead of sharing knowledge. Without understanding the underlying concepts, the asker may continue to make the same errors repeatedly.

The original code relies on a function to fetch an attribute. It assumes that the parameter can be used to call the attribute. Put simply, it uses Dot notation, which requires a valid JavaScript identifier. When using Dot notation, the word after the dot signifies the pointer to the content. As a result, the function getName always attempts to access the attribute name, which may not be defined.

The provided solution utilizes Bracket notation. This method uses the parameter content (even if it doesn't exist) as an identifier and then resolves the content, allowing for successful execution.

While Dot notation offers speed and readability, it is recommended when both options are applicable. Bracket notation is preferable for dynamic resolution at runtime. This is especially useful when defining internal setters and getters. The following code snippet employs bracket notation to ensure that utilizing the identifier via dot notation will trigger the specified functions.

function myClass(){
        //setX and getX functions should be defined prior to this code
        this.__defineSetter__("x", this.setX);    
        this.__defineGetter__("x", this.getX); 
        //Alternatively, Object.defineProperty can be used as well
};

var tObject = new myClass();
tObject.x = 10; //Calling the getter function

Answer 4

I often ponder why people offer solutions instead of sharing knowledge. Without understanding the underlying concepts, the asker may continue to make the same errors repeatedly.

The original code relies on a function to fetch an attribute. It assumes that the parameter can be used to call the attribute. Put simply, it uses Dot notation, which requires a valid JavaScript identifier. When using Dot notation, the word after the dot signifies the pointer to the content. As a result, the function getName always attempts to access the attribute name, which may not be defined.

The provided solution utilizes Bracket notation. This method uses the parameter content (even if it doesn't exist) as an identifier and then resolves the content, allowing for successful execution.

While Dot notation offers speed and readability, it is recommended when both options are applicable. Bracket notation is preferable for dynamic resolution at runtime. This is especially useful when defining internal setters and getters. The following code snippet employs bracket notation to ensure that utilizing the identifier via dot notation will trigger the specified functions.

function myClass(){
        //setX and getX functions should be defined prior to this code
        this.__defineSetter__("x", this.setX);    
        this.__defineGetter__("x", this.getX); 
        //Alternatively, Object.defineProperty can be used as well
};

var tObject = new myClass();
tObject.x = 10; //Calling the getter function

What is the process for retrieving an object's attribute as a variable?

Answer №1

Answer №2

Similar questions

What is the main file that vue-cli-service utilizes for entry?

jQuery custom slider with advanced previous and next navigation capability for jumping multiple steps

Issue encountered while attempting to remove a row from a table (JavaScript)

Unraveling Vue Async Components - Harnessing the power of emitted events to resolve

The deployment of the next.js error on Vercel was successful ✓ All five static pages were generated without any issues. However, there was an error encountered during the export process specifically in the

How can I obtain the true client IP address using Nginx?

What is the best way to display the value of a PHP variable in a JavaScript pop-up window?

The Google Books API initially displays only 10 results. To ensure that all results are shown, we can implement iteration to increment the startIndex until all results have

What's the reason my JavaScript isn't functioning properly?

Finding the offsetWidth (or similar measurement) for a list item (LI) element

What is preventing my Button's onClick() method from being effective?

Guide on tallying a unique value of a chosen option within a table using jQuery

When the C# method is executed, jQuery is reset

The POST Method is failing to transmit all the necessary data

What is the meaning of the term writeHead?

The attempt to execute 'removeChild' on 'Node' was unsuccessful because parameter 1 is not the correct type. Although it did remove the elements from the DOM, it only did so once

What is the process for updating the URL for specific functions within $resource in Angular?

What are the steps to transform my database object into the Material UI Table structure?

Using AngularJS to send a post request with cherrypy

What is the best way to continuously compare two date variables every minute using Javascript?