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](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron)? — James Thorpe, Jan 12 '16 at 10:53

Andriy Ivaneyko · Answer 1 · 2016-03-09T20:41:37.677

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>

Thx a lot...But am getting "this" is undefined inside the callback — copenndthagen, Jan 12 '16 at 11:06
@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... — Andriy Ivaneyko, Jan 12 '16 at 11:16

score 1 · Answer 2 · answered Jan 12 '16 at 11:01

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 '16 at 11:01

soyuka

8,839
3
39
54

Javascript setting object property inside object callback

2 Answers2