Javascript setting object property inside object callback

Question

I am trying to set an object (summary) inside another object's callback method

returnObj.beforeLoadComplete = function (records) {
    var someObj = {
        total: {
            label: 'Items',
            value: '15'
        },
        additional: [{
            label: 'Item1 Total',
            value: '25000'
        }]
    };

    returnObj.summary = summaryObj;
    // some other code which finally returns an object
}

The above code does not work (i.e. summary is not set on returnObj)

However if I have the same code outside the callback method, it works as in code snippet below:

var someObj = {
    total: {
        label: 'Items',
        value: '15'
    },
    additional: [{
        label: 'Item1 Total',
        value: '25000'
    }]
};

returnObj.summary = summaryObj;
returnObj.beforeLoadComplete = function (records) {
    // some other code which finally returns an object
}

Not sure why is it so.

At what point are you checking if it's set? Could be a dupe of this? — James Thorpe
– James Thorpe, Commented Jan 12, 2016 at 10:53

Andriy Ivaneyko · Accepted Answer · 2016-03-09 20:41:37Z

5

You have to access your object with this statement, also i've correct some typo:

var returnObj = {};
returnObj.beforeLoadComplete = function (records) {
    var someObj = {
        total: {
            label: 'Items',
            value: '15'
        },
        additional: [{
            label: 'Item1 Total',
            value: '25000'
        }]
    };
    // Access object with this
    this.summary = someObj;
    // some other code which finally returns an object
}
returnObj.beforeLoadComplete('records');
console.log(returnObj.summary);

Update: Added code snippet to verify that returnObj could be accessed via this in callback handler.

var returnObj = {};
returnObj.beforeLoadComplete = function () {
  var someObj = {
    total: {
      label: "Items",
      value: "15"
    },
    additional: [{
      label: 'Item1 Total',
      value: '25000'
    }]
  };
  this.summary = someObj;
  // some other code which finally returns an object
}
//returnObj.beforeLoadComplete();

function verifyObjectUpdated(){
   alert(returnObj.summary);
}

<select onChange="returnObj.beforeLoadComplete()">
  <option>Trigger onChange to add summary to your returnObj</option>
  <option>Trigger onChange to add summary to your returnObj</option>
</select>

<select onChange="verifyObjectUpdated()">
  <option>Trigger onChange to alert summary of returnObj ( do it after adding summary)</option>
  <option>Trigger onChange to alert summary of returnObj ( do it after adding summary)</option>
</select>

edited Mar 9, 2016 at 20:41

answered Jan 12, 2016 at 11:00

Andriy Ivaneyko

22.3k7 gold badges70 silver badges89 bronze badges

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

2 Comments

copenndthagen Over a year ago

Thx a lot...But am getting "this" is undefined inside the callback

Andriy Ivaneyko Over a year ago

@testndtv i've added working snippets with alerts. See value of select, they describe action ... Also you could play with alert to display some particular properties of your summary object...

soyuka · Accepted Answer · 2016-01-12 11:01:27Z

1

Just use this inside your object:

var res = {
  foo: 'bar',
  setSmth: function(data) {
    this.summary = data
  }
}

res.setSmth({bar: 'foo'})

console.log(res.summary)

See jsfiddle

answered Jan 12, 2016 at 11:01

soyuka

9,1554 gold badges42 silver badges55 bronze badges

Collectives™ on Stack Overflow

Javascript setting object property inside object callback

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related