Develop Reference

Save JavaScript prototype based objects in sessionStorage?

var obj = {
conn : null,
first : function(thisIdentity) {
"use strict";
var myObj = this;
$(document).on('click', thisIdentity, function(e) {
e.preventDefault();
$.ajax ({
url : some value,
// other parameters
success : function(data) {
myObj.conn = new Connection(data.user_id, "127.0.0.1:80");
sessionStorage.setItem('connection', JSON.stringify(myObj.conn));
}
});
},
second : function(thisIdentity) {
"use strict";
var myObj = this;
var conntn = sessionStorage.getItem('connection');
$(document).on('click', thisIdentity, function(e) {
e.preventDefault();
$.ajax ({
url : some value,
// other parameters
success : function(data) {
var parsedConnection = JSON.parse(conntn);
parsedConnection.sendMsg(data.id, data.nid);
}
});
}
};
var Connection = (function() {
function Connection(uid, url) {
this.uid = uid;
this.open = false;
this.socket = new WebSocket("ws://"+url);
this.setupConnectionEvents();
},
Connection.prototype = {
sendMsg : function(id, nid) {
alert("Working");
},
// other functions
}
})();
So connection is made in the AJAX callback function of first and I store the object in the sessionStorage via JSON but when I use it in the AJAX callback of second then error is coming that
TypeError: parsedConnection.sendMsg is not a function
Now I understand that may be it is because JSON can be used to store plain objects not prototype-based objects.
My question is : Can any one tell me how to store prototype-based objects via JSON or any other way to implement this?
I don't want to use eval. Any code, reference would be much appreciated. Thanks!
UPDATE
I did as #Dan Prince mentioned but then a new problem occurred that now when in sendMsg function I use
this.socket.send(JSON.stringify({
action: 'message',
rec: receiver,
msg: message
}));
Then it stays
InvalidStateError: An attempt was made to use an object that is not,
or is no longer, usable
Any inputs? Thanks!

You could probably hack your own solution into place by storing the prototype as a property of the object, then reinstantiating it with Object.create after you read it, but the real question is why do you want to do this in the first place?
I would suggest writing a serialize method on Connection's prototype, which exposes only the essential information (there's no sense serializing a web socket for example).
Connection.prototype.toJSON = function() {
return JSON.stringify({
uid: this.uid,
url: this.url,
open: this.open
});
};
Then use this method when you save the connection object into session storage.
myObj.conn = new Connection(data.user_id, "127.0.0.1:80");
sessionStorage.setItem('connection', myObj.conn.toJSON());
Each saved connection now has the minimum amount of data you need to call the constructor and recreate the instance.
When you load a connection from session storage, parse it and pass the values back into the constructor.
var json = sessionStorage.getItem('connection');
var data = JSON.parse(json);
var connection = new Connection(data.uid, data.url)
// ...
connection.sendMsg(data.id, data.nid);
This will recreate the correct prototype chain in a natural and predictable way.

It's hard to see exactly what you are trying to achieve in every respect, but let's assume :
for various DOM elements, a click handler (delegated to document) will cause asynchronously derived data to be sent via socket.send().
the socket is to be initialized with an asynchronously derived uri.
the socket is to be kept available for immediate reuse.
data by which the socket is initialized is to be cached in local storage for future sessions. (It makes no sense to store the socket itself).
In addition, we need to acknowledge that a socket consume resources should really be disposed of if its resuse is not immediate.
The whole strategy is abnormally complex. The overhead of performing an ajax operation once per session to obtain a uri would typically be accepted, as would the creation of a socket each time one is needed. However, it's an intersting exercise to write something with all the stated characteristics.
This may not be 100% correct but could possibly give you some ideas, including the use of promises to cater for several asynchronisms. Here goes ...
var obj = {
conn: null,
init: function(thisIdentity) {
// It makes sense to attach the click handler only *once*, so let's assume this is an init function.
"use strict";
var myObj = this;
$(document).on('click', thisIdentity, function(e) {
e.preventDefault();
$.ajax ({
url : some value,
// other parameters
}).then(function(data) {
myObj.send(JSON.stringify({
'id': data.id,
'nid': data.nid
}));
});
});
},
send: function(data) {
"use strict";
var myObj = this;
return myObj.getSocket().then(function(socket) {
socket.send(data);
}).then(function() {
// by disposing in later event turn, a rapid series of send()s has at least a chance of using the same socket instance before it is closed.
if(socket.bufferedAmount == 0) { // if the socket's send buffer is empty, then dispose of it.
socket.close();
myObj.conn = null;
}
});
},
getSocket: function() {
"use strict";
var myObj = this;
//1. Test whether or not myObj.conn already exists ....
if(!myObj.conn) {
//2 .... if not, try to recreate from data stored in local storage ...
var connectionData = sessionStorage.getItem('connectionData');
if(connectionData) {
myObj.conn = myObj.makeSocket(connectionData.user_id);
} else {
//3. ... if connectionData is null, perform ajax.
myObj.conn = $.ajax({
url: some value,
// other parameters
}).then(function(data) {
sessionStorage.setItem('connectionData', JSON.stringify(data));
return myObj.makeSocket(data.user_id);
});
}
}
return myObj.conn; // note: myObj.conn is a *promise* of a socket, not a socket.
},
makeSocket: function(uid) {
"use strict";
var myObj = this;
var uri = "127.0.0.1:80"; // if this is invariant, it can be hard-coded here.
// return a *promise* of a socket, that will be resolved when the socket's readystate becomes OPEN.
return $.Deferred(function(dfrd) {
var socket = new WebSocket("ws://" + uri);
socket.uid = uid;
socket.onopen = function() {
myObj.setupConnectionEvents();// not too sure about this as we don't know what it does.
dfrd.resolve(socket);
};
}).promise();
}
};
Under this scheme, the click handler or anything else can call obj.send() without needing to worry about the state of the socket. obj.send() will create a socket if necessary.
If you were to drop the requirement for storing data between sessions, then .send() and .getSocket() would simplify to the extent that you would probably choose to roll what remains of .getSocket() into .send().

How to access $scope object in factory using AngularJS?

I have serialize method for post , So riskAssessmentKey is not part of $scope.topRiskDTO but i pass the riskAssessmentKey value from $scope.riskAssessmentDTO.riskAssessmentkey and now i am posting to factory but when i save all values are posting but riskAssessmentKey is coming undefined i dont know why..
So far tried code....
parentCtrl.js
$scope.addTopRisk = function(){
topRiskGridConfig.topRiskmodalWinConfig.title = 'Add top Risk';
$scope.viewTopRiskWin.setOptions(topRiskGridConfig.topRiskmodalWinConfig);
$scope.$broadcast('addTopRisk',$scope.riskAssessmentDTO.riskAssessmentKey);
};
childCtrl.js
$scope.topRiskDTO = {};
$scope.issuePltDataSource = kendoCustomDataSource.getDropDownDataSource('RA_KY_CNCRN_IS_PLTFM');
$scope.$on('addTopRisk', function (s,id){
$scope.riskAssessmentDTO.riskAssessmentKey = id;
$scope.viewTopRiskWin.open().center();
$scope.submit = function(){
rcsaAssessmentFactory.saveTopRisk($scope.topRiskDTO,id).then(function(){
$scope.viewTopRiskWin.close();
});
};
});
factory.js
var serializeTopRisk = function (topRisk,id) {
var riskAssessmentKey = id;
var objToReturn = {
topRiskName: topRisk.topRiskName,
mitigationActivityDes: topRisk.mitigationActivityDes,
issuePltfLookUpCode: topRisk.issuePltfLookUpCode,
issueNo: topRisk.issueNo,
riskAssessmentKey: topRisk.riskAssessmentKey
};
if(topRisk.riskAssessmentKey){
objToReturn.riskAssessmentKey = topRisk.riskAssessmentKey;
}
return objToReturn;
};
saveTopRisk: function(topRisk,id) {
var request = serializeTopRisk(topRisk);
console.log('request payload', JSON.stringify(request));
console.log('ID :: ', id);
var endpoint = 'app/assessment/rest/addTopRisks';
return $http.post(endpoint, request);
}

You forgot to pass the id to the serializeTopRisk function.
So you already pass the params correctly this this:
saveTopRisk: function(topRisk,id) {
var request = serializeTopRisk(topRisk);
But then serializeTopRisk should also get the id
var serializeTopRisk = function (topRisk, id) { // added the id over what you originally had
var riskAssessmentKey = $rootScope.riskAssessmentDTO.riskAssessmentKey; // drop this, use id instead
Don't use rootScope to pass data between the factory and the controller if you don't need to (it looks like you are already passing values to the factory from the controller by supplying it with object inputs, keep it that way and drop the rootScope usage from the factory).

Meteor - How to check if an image exists (server-side)

My goal: Show a default image if one does not exist.
My approach: I've created a helper that makes a server-side Meteor.call to check if the image url exists. The helper's intent is to either return a default image path (does not exist) or the dynamic path (image exists).
Where I'm stuck
Helper: On the client, I can successfully console.log the output
from the server-side method (result.statusCode). However, the helper does not return my
desired string in the template (/images/db/...etc).
Method: I'm getting a 200 results
status for ALL file paths, even ones that don't exist. I suspect
this has to do with iron-router's global NotFound template, but not
sure how to get around it. I tried using fs.exists but could never
get it to find a file (all responses were false).
Any and all suggestions most appreciated. If there's a simpler way to accomplish this, I'm all ears.
HTML:
<img src="{{imagePath key}}avatar.jpg">
My helper:
UI.registerHelper('imagePath', function(key){
//Build the Meteor.call url
var $host = document.location.host;
var $imgBaseUrl = '/images/db/'
var $assetPath = $imgBaseUrl + key + '/';
var url = 'http://' + $host + $assetPath + 'bg.jpg';
//Define the default image location
var $assetPathDefault = $imgBaseUrl + 'default' + '/';
//Call the server-side method
Meteor.call('checkIfImageExists', url, function(error, result) {
if (false) {
console.log('Error');
return $assetPathDefault;
} else {
console.log('Result: ' + result.statusCode);
console.log($assetPath);
return $assetPath;
};
});
});
Server-side method
Future = Npm.require('fibers/future');
Meteor.methods({
checkIfImageExists: function(url) {
check(url, String);
var fut = new Future();
this.unblock();
HTTP.get(url, function (error, result) {
if (!error) {
console.log('Found a file!: ' + url);
console.log('Result: ' + result.statusCode);
fut.return (result);
} else {
console.log(error);
console.log('Error: ' + error);
fut.return (false);
};
});
return fut.wait();
}
});
FWIW - I'm adding the "url check" to an old helper that simply inserted a string w/out checking if the image existed. Worked great.
UI.registerHelper('imagePath', function(key){
var baseUrl = '/images/db/';
return baseUrl + key + '/';
});

Your client–side helper doesn't return anything! Check out the structure you've used:
function a() {
...
Meteor.call(..., function b() {
return something;
});
}
The return something is a return statement of function b, while function a has no return statement – thus it returns undefined.
Meteor server-side methods are (and have to be) asynchrounous, while the nature of client-side Javascript implies that the helper methods are synchronous (there is no "wait" in the browser). Thus, to use a server-side method inside a client-side helper you have to take advantage of reactivity. Fortunately, it's pretty easy with a ReactiveDict:
var imagePathDict = new ReactiveDict();
UI.registerHelper('imagePath', function(key) {
...
if(!imagePathDict.get(key)) {
// the path was not initialized, fetch it from the server
Meteor.call(..., function(error, result) {
...
imagePathDict.set(key, result.assetPath);
});
}
// return the reactive path
return imagePathDict.get(key);
});
By the way, don't start your variable names with $ (unless you refer to a jQuery object), it's against conventions in Javascript.

Return string from second function

Well i have created a function to return the picture url. See code below:
function loadAttachment(itemid) {
web = context.get_web();
attachmentFolder = web.getFolderByServerRelativeUrl("Lists/LijstMedewerkers/Attachments/" + itemid);
attachmentFiles = attachmentFolder.get_files();
//Load attachments
context.load(attachmentFiles);
context.executeQueryAsync(onLoaddAttachmentSuccess, onLoadAttachmentFail);
alert(picture);
return picture;
}
function onLoadAttachmentFail(sender, args) {
alert('Failed to get lists items. Error:' + args.get_message());
}
function onLoaddAttachmentSuccess(sender, args) {
// Enumerate and list the Asset Attachments if they exist
var attachementEnumerator = attachmentFiles.getEnumerator();
while (attachementEnumerator.moveNext()) {
var attachment = attachementEnumerator.get_current();
picture = attachment.get_serverRelativeUrl();
}
}
Well it's not returning the value of the picture. When i do an alert i see the value but with the return it's not working. even if i put the picture in the itemid.
Any idea what i'm doing wrong ?

Since SP.ClientContext.executeQueryAsync method is async:
SP.ClientContext.executeQueryAsync(succeededCallback, failedCallback)
succeededCallback is used for declaring function that contains the returned results.
When working with asynchronous API such as JSOM the following patterns are commonly used:
Using nested callbacks
Using the promises pattern
The below example demonstrates how to retrieve attachment files using callback approach:
function loadAttachments(listTitle, itemId,success,error) {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle(listTitle);
var listItem = list.getItemById(itemId);
var files = listItem.get_attachmentFiles();
context.load(files);
context.executeQueryAsync(function(){
success(files);
},
error);
}
Usage
Get first file attachment url
loadAttachments('Projects',3,
function(attachmentFiles){
if(attachmentFiles.get_count() > 0) {
var attachmentFile = attachmentFiles.getItemAtIndex(0);
var fileUrl = attachmentFile.get_serverRelativeUrl();
//...
}
},
function(sender,args){
console.log(args.get_message());
});

Accessing Data from JavaScript Object's Array Member Variable

I'm writing a jQuery plugin for work which pulls in RSS feed data using Google's Feed API. Using this API, I'm saving all of the relevant RSS feed data into an object, then manipulating it through methods. I have a function which is supposed to render the RSS feed onto the webpage. Unfortunately, when I try to display the individual RSS feed entries, I get an error. Here's my relevant code:
var RSSFeed = function(feedTitle, feedUrl, options) {
/*
* An object to encapsulate a Google Feed API request.
*/
// Variables
this.description = "";
this.entries = [];
this.feedUrl = feedUrl;
this.link = "";
this.title = feedTitle;
this.options = $.extend({
ssl : true,
limit : 4,
key : null,
feedTemplate : '<article class="rss-feed"><h2>{title}</h1><ul>{entries}</ul></article>',
entryTemplate : '<li><h3>{title}</h3><p>by: {author} # {publishedDate}</p><p>{contentSnippet}</p></li>',
outputMode : "json"
}, options || {});
this.sendFeedRequest = function() {
/*
* Makes the AJAX call to the provided requestUrl
*/
var self = this;
$.getJSON(this.encodeRequest(), function(data) {
// Save the data in a temporary object
var responseDataFeed = data.responseData.feed;
// Now load the data into the RSSFeed object
self.description = responseDataFeed.description;
self.link = responseDataFeed.link;
self.entries = responseDataFeed.entries;
});
};
this.display = function(jQuerySelector) {
/*
* Displays the RSSFeed onto the webpage
* Each RSSEntry will be displayed wrapped in the RSSFeed's template HTML
* The template markup can be specified in the options
*/
var self = this;
console.log(self);
console.log(self.entries);
};
};
$.rssObj = function(newTitle, newUrl, options) {
return new RSSFeed(newTitle, newUrl, options);
};
// Code to call the jquery plugin, would normally be found in an index.html file
rss = $.rssObj("Gizmodo", "http://feeds.gawker.com/Gizmodo/full");
rss.sendFeedRequest();
rss.display($('div#feed'));
Obviously, my display() function isn't complete yet, but it serves as a good example. The first console.log() will write all of the relevant data to the console, including the entries array. However, when I try to log the entries array by itself, it's returning an empty array. Any idea why that is?

I guess the problem is that display() is called without waiting for the AJAX request to complete. So the request is still running while you already try to access entries - hence the empty array.
In order to solve this you could move the call to display() into the callback of $.getJSON(). You just have to add the required selector as a parameter:
this.sendFeedRequest = function(selector) {
var self = this;
$.getJSON(this.encodeRequest(), function(data) {
var responseDataFeed = data.responseData.feed;
...
self.entries = responseDataFeed.entries;
self.display(selector);
});
};
EDIT:
If you don't want to move display() into the callback, you could try something like this (untested!):
var RSSFeed = function(feedTitle, feedUrl, options) {
...
this.loading = false;
this.selector = null;
this.sendFeedRequest = function() {
var self = this;
self.loading = true;
$.getJSON(this.encodeRequest(), function(data) {
...
self.loading = false;
if (self.selector != null) {
self.display(self.selector);
}
});
};
this.display = function(jQuerySelector) {
var self = this;
if (self.loading) {
self.selector = jQuerySelector;
}
else {
...
}
};
};