JavaScript Object is set but is null when accessed - javascript

I have the following object that constructs a session variable:
var sessionObject = function (key) {
this._key = key;
this._content;
this.set = function (v) {
this.setLocal(v);
$.post('/Program/SetVariable',
{ key: this._key, value: v }, function (data) {
});
};
this.get = function (callback) {
var setterCallback = this.setLocal;
$.get('/Program/GetVariable',
{ key: this._key }, function (data) {
setterCallback(data);
}).done(function () {
callback();
});
};
this.setLocal = function (v) {
this._content = v;
};
this.getLocal = function () {
return this._content;
};
}
And my C# in the controller is as follows:
public ActionResult SetVariable(string key, string value)
{
Session[key] = value;
return this.Json(new { success = true });
}
public ActionResult GetVariable(string key)
{
return this.Json(Session[key], JsonRequestBehavior.AllowGet);
}
I create a new session object every time the page is loaded, which references items in the session located on the server. When the session is set with the set() function, _content is set correctly and is able to be accessed publicly through item.getLocal() (either in the browser console or in code).
When I revisit the page and the session object referring to said item is already created, when I run the item.get() function it accesses the session variable and sets it to the _content object, I know this because I can do a console.log(this._content) in the setLocal() function which shows that the variable has been set correctly. But when I wish to access the content of the session object via either this.getLocal() or item._content while through the browser console or other lines of the code I get undefined returned to me.
So to illuminate the process some more this is what I do on a reload where there is already data in the session:
var item = new sessionObject("item");
item.get(printData);
function printData() {
$("printbox").append(item.getLocal());
}
This does not print anything.
Is there a reason I can not access this item's content unless it is specifically set by the item.set function?

Because you do this:
var setterCallback = this.setLocal;
and call it like so:
setterCallback(data);
You have lost the context of your sessionObject instance, so the this inside the setLocal function is no longer your object instance but the global window object.
You can do two things to correct this, save a reference to this instead of saving a reference to the function and call setLocal from that reference
var that = this;
/.../
that.setLocal(data);
or you can bind object instance when you save the setLocal reference
var setterCallack = this.setLocal.bind(this);

Related

Object modified in the function is not being modified outside the function

I'm building a code to parse some JSON details received from the server into a javascript object. The object has many objects inside it.
Then I have another function to create HTML element and apply that object's values (using for - in loop) into HTML tags' "innerHTML".
I have included the code i use below,
// This one is executed on the 'onLoad' event.
function requestDriverListings() {
**//This object stores the received object from server.**
var drivers = {};
// ***This function requests details from the server and the function in the arguments is executed once the details are received.***
sendUserData ({}, "request driver.php", function (request) {
listDrivers(request,drivers); console.log(drivers); displayDrivers(drivers);});
}
This one is the function to create a HTML Element and stores the received data in it and the use JSON.parse() to parse them into a Object.
The driver parameter is the Object passed in the above code.
request parameter has no effect on this problem. (It is the XHR responseText.)
function listDrivers (request,driver) {
var response = document.createElement("html");
response.innerHTML = request;
driver = response.querySelector("#drivers").innerHTML;
var stripComma = driver.lastIndexOf(",");
driver = JSON.parse(driver.substring(0,stripComma) +"}");
}
Here is the displayDrivers function.
drivers Object is passed into driveParsed in the first function.
requestAPage() is a function to request the displaying element from the server. the function in it's arguments is the function to apply the Objects details into the HTML innerHTML.
function displayDrivers (driveParsed) {
var driverElement = document.createElement("div");
driverElement.id = "driverElement";
driverElement.style.display = "none";
document.getElementById("driverContainer").appendChild(driverElement);
requestAPage("Drivers.html", "drivers", "driverElement", function() { selectDrivers();});
var selectDrivers = function () {
for (var x=0; x<=Object.keys(driveParsed).length; x++) {
var driverParsed = driveParsed[x];
setDriversDetails(driveParsed,x);
var element = createAElement( "div", {"margin-top": "10px;"});
element.id = driveParsed.name;
element.className = "container border";
element.innerHTML = driverElement.innerHTML;
document.getElementById("driverContainer").appendChild(element);
}
};
}
================================================================
My problem is this displayDrivers() is not getting the modified drivers Object.
Please help me to solve this problem. Sorry for the long description.
One problem is that inside listDrivers you assign a new value to the driver variable (which is an argument). This means the original variable, drivers, that was passed to the function as second argument, is disconnected from the local function variable driver: they are now two distinct, unrelated objects.
If you want the drivers variable to get a value from calling the function, then let that be the return value of the function, so you would call it like this:
sendUserData ({}, "request driver.php", function (request) {
var drivers = listDrivers(request); // <-----
console.log(drivers);
displayDrivers(drivers);
});
Then the listDrivers function would look like this:
function listDrivers (request) { // <--- only one argument
// declare new variable:
var driver = response.querySelector("#drivers").innerHTML;
// ... rest of your code comes here ...
// ... and finally:
return driver; // <---- return it
}
#trincot beat me to it and his answer is better. I'll leave this up anyway though.
Try doing this in requestDriverListings:
function requestDriverListings() {
var drivers = {};
sendUserData ({}, "request driver.php", function (request) {
var updatedDrivers = listDrivers(request,drivers);
console.log(drivers);
displayDrivers(updatedDrivers);});
}
And this in listDrivers:
function listDrivers (request,driver) {
var response = document.createElement("html");
response.innerHTML = request;
driver = response.querySelector("#drivers").innerHTML;
var stripComma = driver.lastIndexOf(",");
driver = JSON.parse(driver.substring(0,stripComma) +"}");
return driver;
}

Save key=>value style with ngStorage/localstorage

In my Ionic app I've added the plugin 'ngStorage' and it comes with a little demo code:
var add = function (thing) {
$localStorage.things.push(thing);
}
This works exactly as told. I add("foo") it, and do getAll() and the value is there. I remove the add(), but keep the getAll(), I still have the value "foo" (as expected).
This isn't very usefull for me, I want to access it with keys, so I've made the following:
var addByKey = function (key, value) {
$localStorage.things[key] = value;
// Or, I've also tried:
$localStorage.things.key = value;
}
When I do the addByKey("foo","bar") and then the getAll() I get the values exactly as I want. When I remove the addByKey() and reload, I expect it to still remember the set information, but it doesn't exist. However, the first attempt via the add() function still exists, "foo" is still there (meaning the array doesnt reset).
How do I make a key->value type of structure?
In case it's usefull:
.factory ('StorageService', function ($localStorage) {
$localStorage = $localStorage.$default({
things: []
});
var _getAll = function () {
return $localStorage.things;
};
var _add = function (thing) {
$localStorage.things.push(thing);
}
var _addByKey = function (thing, value) {
$localStorage.things[key] = value;
// Or, I've also tried:
$localStorage.things.key = value;
}
return {
getAll: _getAll,
add: _add,
addByKey: _addByKey
};
})
Assuming that you want a key value storage system you can simply use an object instead of an array so that every key can be set as a property of this object.
.factory('StorageService', function($localStorage) {
$localStorage = $localStorage.$default({
things: {}
});
var _getAll = function() {
return $localStorage.things;
};
var _addByKey = function(thing, value) {
$localStorage.things[thing] = value;
}
return {
getAll: _getAll,
addByKey: _addByKey
};
})
However, assuming that you want to keep a reference of all values on the main collection and access them through keys, you can consider using an object to store the things intead of an array. So that you can use a property to store all items (you can store in a different place as well) and use this object to store your keys by referencing the to a desired value on your collection.
You may need to implement the deletion logic to maintain the consistence between the collection and the dictionary.
Your factory would look like this:
.factory('StorageService', function($localStorage) {
$localStorage = $localStorage.$default({
things: {
items: []
}
});
var _getAll = function() {
return $localStorage.things.items;
};
var _add = function(thing) {
$localStorage.things.items.push(thing);
}
var _addByKey = function(thing, value) {
var i = $localStorage.things.items.push(value) - 1;
$localStorage.things[thing] = $localStorage.things.items[i];
}
return {
getAll: _getAll,
add: _add,
addByKey: _addByKey
};
})

How can I manage Node.js async variable scope?

I have the following code for populating my test database. The goal is to save the parent document after each of the child documents to the parent can have a reference to them.
function saveRecipe(ingredients, directions, recipe, done) {
var ingredientSaveTasks = createSaveTasks(ingredients)
var directionSaveTasks = createSaveTasks(directions)
async.parallel([
(callback) => { async.series(ingredientSaveTasks, callback) },
(callback) => { async.series(directionSaveTasks, callback) }
], (err, results) => {
recipe.ingredients = results[0] // The returned ids for each ingredient
recipe.directions = results[1] // The returned ids for each direction
recipe.save(done)
})
}
function createSaveTasks(objs) {
var saveTasks = []
for (var i = 0; i < objs.length; i++) {
var saveTask = function (callback) {
var obj = Object.assign({}, objs[i])
obj.save((err, result) => {
callback(err, result._id)
})
}
saveTasks.push(saveTask)
}
return saveTasks
}
I've tried a few variations on this and I think it has to do with variable scope. However, I thought by deep copying my obj with var obj = Object.assign({}, objs[i]) would save a "real" copy of the object for later use inside the async function.
Depending on which of the many way I've tried to make this work I end up with one of the following errors:
TypeError: obj.save is not a function
TypeError: Cannot read property 'save' of undefined
I've seen some talk about using .bind() to control variable scope but I'm not sure how to use it in this case.
Bind return a new function and you can specify the context assigned to the function (the value that you obtain when call "this" keyword inside the function) and/or the arguments passed to the function. Bind(thisArg, ...arguments). So in your case:
var saveTask = function(callback){this.save(...)}.bind(obj[i])
With this you specify the context, so in that function your object will be accesible as this.
Some examples:
(function a(){console.log(this)}).bind({key : 'value'})();
var a = function(){console.log(this)}.bind({key : 'value'});
a();

How to convert object value to function in javascript?

I want to used objects to store function name and another properties which i will used it to load jS script by Jquery getScript.
I have used conditional by inAarray to check if an object is existing in this array I will call that scrip and execute that function (func) but I still have stack to convert that object value to a function for execution after JS scrip load within status success.
function fetchingData(n_source_id, types, not_id) {
var data = {
'Loan Repayment':{
url:'/js/load/loan/loan_repayment.js',
func:'repayment'// name of function which I will call after JS file successfully loaded
},
'Reject Repayment':{
url:'/js/load/loan/repay_change_till_acc.js',
func:'changeTill'// name of function which I will call after JS file successfully loaded
},
'Issue Till': {
url: '/js/load/issueTill.js',
func: 'issueTill'// name of function which I will call after JS file successfully loaded
}
};
$.each(data, function(inx, vals) {
var _type = inx;
var url = vals;
if ($.inArray(types, [_type]) >= 0) {
ScriptRequire([vals.url], function(status) {
if (status === 'success') {
var fun = new Function(vals.function);
console.log(fun(n_source_id, types));
return fun;
}
});
}
});
}
Since vals.function holds the name of the function, and the function should already be defined by the loaded script, do not use the following to get the function object:
var fun = new Function(vals.function);
Instead, use:
var fun = window[vals.function];

knockout pass additional parameters to subscription function

What I want to achieve is to create subscription for model properties. This subscription function should call WebApi via Ajax updating property value in database. For ajax call I need three paramaters: "fieldName", "fieldValue" and "modelId", ajax will update database row based on those three parameters.
I have many properties and all of them need the same functionality, so I do not want to subscribe for each property individually, so I found a following suggestion:
ko.subscribable.fn.withUpdater = function (handler) {
var self = this;
this.subscribe(handler);
//support chaining
return this;
};
Add this is how it is "attached" to observables:
self.ModelId= ko.observable();
self.CompanyName = ko.observable().withUpdater(update);
where update is some js function outside model.
However, I have problem, because I am not able to pass three paramaters to update functions (or also I can say in another words - I need to be able to get viewModel.ModelId property value inside update, as well as propertyName).
function update (propertyName, propertyNewValue, anotherPropertyValue) {
//do ajax update
}
As an example for CompanyName property it will be:
update("CompanyName", "New Company value here", 3),
where
3 == viewModel.ModelId
There might be a better way to do this, but the following will work:
First, add a target object to the withUpdate method:
ko.subscribable.fn.withUpdater = function (handler, target, propname) {
var self = this;
var _oldValue;
this.subscribe(function (oldValue) {
_oldValue = oldValue;
}, null, 'beforeChange');
this.subscribe(function (newValue) {
handler.call(target, _oldValue, newValue, propname);
});
return this;
};
The update subscribe function will get scoped to the target property:
var update = function (propertyName) {
console.log('propname is '+ propname + ' old val: ' + oldvalue + ', new val: ' + newvalue + ', model id: ' + this.ModelId());
}
Now you will need to use it a little differently.
self.CompanyName = ko.observable().withUpdater(update, self, "CompanyName");
An example http://plnkr.co/edit/HhbKEm?p=preview
I couldn't get the scope of the withUpdater function to be that of the object without explicitly passing in the target and a string for the company name.
You can declare your function as a variable outside of the 'fn' scope.
var dataservice = 'my class that has the data calls';
var altFunc = function () {
return ko.pureComputed(function () {
var currentItem = this().filter(function (item) {
// Do knockout stuff here and return your data
// also make calls to the dataservice class
}, this, dataservice);
};
ko.observableArray.fn.someNewFunctionality = altFunc;

Categories