define getter method on object - javascript

Question

I want to define getter method on object so that when I access a property , getter method fires

object.someProperty // this fires object.get(name) where name is someProperty

this is an example illustrate my thought

file : data.js

import setting from 'setting';

const data = {
    a : {
        foo : 1 ,
        bar : 2
    } ,
    b : {
        foo : 3 ,
        bar : 4
    }
}

//DEFINE GETTER
//something like this
data.DEFINE_GETTER(function(property)
{
    if(setting.type === 'a')
        return data['a'][property];
    else
        return data['b'][property];
})

export default data;

file : test.js

import data from 'data';
import setting from 'setting';

setting.type = 'a';
console.log(data.foo)   //should be 1
console.log(data.bar)   //should be 2

setting.type = 'b';
console.log(data.foo)   //should be 3
console.log(data.bar)   //should be 4

Suren Srapyan · Accepted Answer · 2017-11-27 10:09:25Z

3

You can look at Proxies.

const data = {
    a : {
        foo : 1 ,
        bar : 2
    } ,
    b : {
        foo : 3 ,
        bar : 4
    }
}

const setting = {
  type: 'a'
};

const products = new Proxy({
     data: data
   },
   {
     get: function(obj, prop) {
       return obj.data[setting.type][prop];
     },
     set: function(obj, prop, value) {
       obj.data[setting.type][prop] = value;
     } 
   });

console.log('Before type change');
console.log(products.foo);

setting.type = 'b';

console.log('After type change');
console.log(products.foo);

products.foo = 4;

console.log('After value change');
console.log(products.foo);

setting.type = 'a';

console.log('After type change');
console.log(products.foo);

edited Nov 27, 2017 at 10:09

answered Nov 27, 2017 at 9:58

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

1 Comment

Ali Faris Over a year ago

the problem data object have a lot of properties , what i'm looking for is method fires with property parameter

Naren Sisodiya · Accepted Answer · 2017-11-27 10:04:33Z

1

Use proxy handler

let handler = {
    get(target, propKey, receiver) {
        console.log('get ' + propKey);
        if(setting.type === 'a')
        return data['a'][propKey];
    else
        return data['b'][propKey];
    }
};
let proxyData = new Proxy(data, handler);
// now you can call
proxyData.foo
proxyData.bar

answered Nov 27, 2017 at 10:04

Naren Sisodiya

7,2882 gold badges27 silver badges35 bronze badges

Comments

gurvinder372 · Accepted Answer · 2017-11-27 10:09:56Z

1

You can define a getter

Object.defineProperty(data, 'foo', {
  get: function() { return this[setting.type].foo }
});
Object.defineProperty(data, 'bar', {
  get: function() { return this[setting.type].bar }
});

Edit

You can refactor the defineProperty to a method that iterate all the different keys in the data

function defineDataProp( obj, setting )
{
  Object.keys(Object.values( obj )[0]).forEach( function(key){
      Object.defineProperty(obj, key, {
         get: function() { return this[setting.type][ key ] }
      });
  })
}

Demo

const data = {
    a : { foo : 1 , bar : 2 } ,
    b : { foo : 3 , bar : 4 }
};

var setting = { "type" : "a" };
defineDataProp( data, setting );

setting.type = 'a';
console.log(data.foo,data.bar)   

setting.type = 'b';
console.log(data.foo,data.bar)

function defineDataProp( obj, setting )
{
  Object.keys(Object.values( obj )[0]).forEach( function(key){
      Object.defineProperty(obj, key, {
         get: function() { return this[setting.type][ key ] }
      });
  })
}

edited Nov 27, 2017 at 10:09

answered Nov 27, 2017 at 10:01

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

2 Comments

Ali Faris Over a year ago

the problem data object have a lot of properties , what i'm looking for is method fires with property parameter

gurvinder372 Over a year ago

You can refactor the code which takes property parameter instead of foo or bar specically and define their getters. Let me know if you need help with that.

Harsh Chaurasia · Accepted Answer · 2017-11-27 10:48:12Z

I made a plunker that may help https://plnkr.co/edit/eRsgBXQackUgZkg84lZj?p=info

First of all if you want to access any property from an object that must be in that object.

So, data.foo will be usable only when you create an object/function of foo inside data.

Now we need a dynamic pointing object that point to Data.Child.Childobjects

So, I created a function AddProperty just pass the name of ParentObject and childchildobject. Write your logic inside it.

var setting = {type : null};
var data = {
    a : {
        foo : 1 ,
        bar : 2
    } ,
    b : {
        foo : 3 ,
        bar : 4
    }
}
function AddProperty(baseObject = null, ChildChildProperty = null)
 {
   if(baseObject != null && ChildChildProperty != null)
   {
     Object.defineProperty(baseObject, ChildChildProperty, {
    get: function() {
        if(setting.type === 'a')
        return data['a'][ChildChildProperty];
    else
        return data['b'][ChildChildProperty];
    },
    set: function(name) {
       if(setting.type === 'a')
        data['a'][ChildChildProperty] = name;
    else
        data['b'][ChildChildProperty] = name;
    }
});
   }
 }

AddProperty(data,'foo');
AddProperty(data,'bar');

setting.type = 'a';
console.log(data.foo)   //should be 1
console.log(data.bar)   //should be 2

setting.type = 'b';
console.log(data.foo)   //should be 3
console.log(data.bar)   //should be 4

Collectives™ on Stack Overflow

define getter method on object - javascript

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related